Can you help me with a question regarding three.js and x position translation of an imported .obj mesh?
I'm new to three.js and looking for guidance on how to solve this issue.
Basically, I have a mesh at (0,-200,0) and I want to smoothly move it to (50,-200,0) using a button to toggle back and forth between the two positions.
objLoader = new THREE.OBJLoader();
objLoader.load('models/map_real.obj', function (obj) {
var blackMat = new THREE.MeshStandardMaterial({color:0xfaf9c9});
obj.traverse(function (child) {
if (child instanceof THREE.Mesh) {
child.material = blackMat;
}
});
obj.castShadow = true;
obj.receiveShadow = true;
obj.position.set(0,-200,0)
obj.rotation.y = getDeg(-20);
scene.add(obj);
objWrap = obj;
});In my main.js, I have an init() function that includes all the necessary functions like camera(), animate(), render(), etc. From the variable objWrap.position.x, I can see the correct position being logged.
I tried capturing the click event (as shown in the code snippet below) on my #test button and incrementing the position by 0.5. However, since it's not in the animate loop, it doesn't keep adding 0.5.
$('#test').click(function(){
if (objWrap.position.x <= 50) {
objWrap.position += 0.5}
});What I want is a button that triggers a smooth animation from objWrap.position.x = 0 to objWrap.position.x = 50
I hope that was clear. Feel free to ask if you need more information, I'll respond promptly. Your assistance is greatly appreciated!