From github: How to add drag behaviors for imported OBJ file model ? · Issue #7809 · BabylonJS/Babylon.js · GitHub
Hi all,
This is my example code for applying PointerDragBehavior for the meshes obtained from imported OBJ file. The object file is getting loaded but I’m unable to drag the meshes obtained from the file. I’m currently using BabylonJs with React.
componentDidMount = () => {
this.engine = new BABYLON.Engine(this.canvas, true);
scene = new BABYLON.Scene(this.engine);
let camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(1, 5, -550), scene);
camera.setTarget(BABYLON.Vector3.Zero());
let light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = 0.7;
let pointerDragBehavior = new BABYLON.PointerDragBehavior({dragAxis: new BABYLON.Vector3(1,0,0)});
pointerDragBehavior.useObjectOrientationForDragging = false;
pointerDragBehavior.onDragStartObservable.add((event)=>{
console.log("dragStart");
console.log(event);
})
pointerDragBehavior.onDragObservable.add((event)=>{
console.log("drag");
console.log(event);
})
pointerDragBehavior.onDragEndObservable.add((event)=>{
console.log("dragEnd");
console.log(event);
})
let assetsManager = new BABYLON.AssetsManager(scene);
let meshTask = assetsManager.addMeshTask("Teeth task", "", "/", "IronMan.obj");
meshTask.onSuccess = (task) => {
task.loadedMeshes[0].position = BABYLON.Vector3.Zero();
};
assetsManager.onFinish = (tasks) => {
tasks[0].loadedMeshes.map((mesh) => {
mesh.addBehavior(pointerDragBehavior);
return mesh;
});
this.engine.runRenderLoop(function () {
scene.render();
});
};
assetsManager.load();
Any support would help. Thanks in advance !!
Here is a playground corresponding to the code above: https://playground.babylonjs.com/#3QNJ4B#2
The code actually works in the playground so I wonder if it could be related to the setup ???
@sebavan Thanks for the reply. I tried in vanilla js by running simple httpserver in python but still not able to drag objects.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
<title>Babylon - Getting Started</title>
<!--- Link to the last version of BabylonJS --->
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<!-- Link to pep.js to ensure pointer events work consistently in all browsers -->
<script src="https://code.jquery.com/pep/0.4.1/pep.js"></script>
<style>
html, body {
overflow: hidden;
width : 100%;
height : 100%;
margin : 0;
padding : 0;
}
#renderCanvas {
width : 100%;
height : 100%;
touch-action: none;
}
</style>
</head>
<body>
<canvas id="renderCanvas"></canvas>
<script>
window.addEventListener('DOMContentLoaded', function(){
// get the canvas DOM element
var canvas = document.getElementById('renderCanvas');
// load the 3D engine
var engine = new BABYLON.Engine(canvas, true);
// createScene function that creates and return the scene
var createScene = function(){
var scene = new BABYLON.Scene(engine);
let camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(1, 5, -10), scene);
camera.setTarget(BABYLON.Vector3.Zero());
//camera.attachControl(canvas);
let light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = 2;
let pointerDragBehavior = new BABYLON.PointerDragBehavior({dragAxis: new BABYLON.Vector3(1,0,0)});
pointerDragBehavior.useObjectOrientationForDragging = false;
pointerDragBehavior.onDragStartObservable.add((event)=>{
console.log("dragStart");
console.log(event);
})
pointerDragBehavior.onDragObservable.add((event)=>{
console.log("drag");
console.log(event);
})
pointerDragBehavior.onDragEndObservable.add((event)=>{
console.log("dragEnd");
console.log(event);
})
let assetsManager = new BABYLON.AssetsManager(scene);
let meshTask = assetsManager.addMeshTask("Teeth task", "", "/", "LibertStatue.obj");
meshTask.onSuccess = (task) => {
task.loadedMeshes[0].position = BABYLON.Vector3.Zero();
};
assetsManager.onFinish = (tasks) => {
tasks[0].loadedMeshes.map((mesh) => {
mesh.addBehavior(pointerDragBehavior);
return mesh;
});
// this.engine.runRenderLoop(function () {
// scene.render();
// });
};
assetsManager.load();
return scene;
}
// call the createScene function
var scene = createScene();
// run the render loop
engine.runRenderLoop(function(){
scene.render();
});
// the canvas/window resize event handler
window.addEventListener('resize', function(){
engine.resize();
});
});
</script>
</body>
</html>
I’ve used Babylon CDN here. Can you find any issue in this code?
Can you try this one and let me know ?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
<title>Babylon - Getting Started</title>
<!--- Link to the last version of BabylonJS --->
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<!-- Link to pep.js to ensure pointer events work consistently in all browsers -->
<script src="https://code.jquery.com/pep/0.4.1/pep.js"></script>
<style>
html, body {
overflow: hidden;
width : 100%;
height : 100%;
margin : 0;
padding : 0;
}
#renderCanvas {
width : 100%;
height : 100%;
touch-action: none;
}
</style>
</head>
<body>
<canvas id="renderCanvas"></canvas>
<script>
window.addEventListener('DOMContentLoaded', function(){
// get the canvas DOM element
var canvas = document.getElementById('renderCanvas');
// load the 3D engine
var engine = new BABYLON.Engine(canvas, true);
// createScene function that creates and return the scene
var createScene = function(){
var scene = new BABYLON.Scene(engine);
let camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(1, 5, -550), scene);
camera.setTarget(BABYLON.Vector3.Zero());
//camera.attachControl(canvas);
let light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = 2;
let pointerDragBehavior = new BABYLON.PointerDragBehavior({dragAxis: new BABYLON.Vector3(1,0,0)});
pointerDragBehavior.useObjectOrientationForDragging = false;
pointerDragBehavior.onDragStartObservable.add((event)=>{
console.log("dragStart");
console.log(event);
})
pointerDragBehavior.onDragObservable.add((event)=>{
console.log("drag");
console.log(event);
})
pointerDragBehavior.onDragEndObservable.add((event)=>{
console.log("dragEnd");
console.log(event);
})
let assetsManager = new BABYLON.AssetsManager(scene);
let meshTask = assetsManager.addMeshTask("Teeth task", "", "https://playground.babylonjs.com/scenes/Box/", "box.obj");
meshTask.onSuccess = (task) => {
task.loadedMeshes[0].position = BABYLON.Vector3.Zero();
};
assetsManager.onFinish = (tasks) => {
tasks[0].loadedMeshes.map((mesh) => {
mesh.addBehavior(pointerDragBehavior);
return mesh;
});
// this.engine.runRenderLoop(function () {
// scene.render();
// });
};
assetsManager.load();
return scene;
}
// call the createScene function
var scene = createScene();
// run the render loop
engine.runRenderLoop(function(){
scene.render();
});
// the canvas/window resize event handler
window.addEventListener('resize', function(){
engine.resize();
});
});
</script>
</body>
</html>
@sebavan Yeah that works fine. I think there is a problem with the model file I’m using. Will look into it. Thank you so much for the support.