Hello.
I’m having trouble to making an object moving from one point to another.
I am using objects(meshes) created in Blender that are converted into 3js files.
I’m unsure, how to animate the object so its moves at X speed, to Y point and stops at Z location.
var Mesh;
var MesCopy = Mesh;
var meshArray = [];
//init the scene
init();
//then call the animate function
animate();
{
}
// Dock Object
var loader = new THREE.JSONLoader();
createMesh = function( geometry ,materials)
{
var Mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
Mesh.position.set( -80, 0, 112 ); //, -,top,right
Mesh.scale.set(5, 5,5);
Mesh.rotation.y = 0;
scene.add( Mesh );
};
loader.load( "Dock.js", createMesh );
// End OF Dock
// Ferry Object
var loader = new THREE.JSONLoader();
createMesh = function( geometry ,materials)
{
Mesh = new THREE.Mesh( geometry, new
THREE.MeshFaceMaterial( materials ) );
Mesh.position.set( 105,0,77); //, -,top,right
Mesh.scale.set(5, 5,5);
Mesh.rotation.y = 0;
scene.add( Mesh );
};
loader.load( "Ferry.js", createMesh );
var geometry2 = new THREE.CubeGeometry( 50, 50, 50 );
//and a material
var material2 = new THREE.MeshPhongMaterial( { color: 0xFF3D12} );
//create a mesh combine geometry and material
cubeMesh2 = new THREE.Mesh( geometry2, material2 );
// add the mesh to the sceen at position
//materials for the sky box
var materials = [
loadTexture( 'px.jpg' ), // right
loadTexture( 'nx.jpg' ), // left
loadTexture( 'py.jpg' ), // top
loadTexture( 'ny.jpg' ), // bottom
loadTexture( "pz.jpg" ), // back
loadTexture( 'nz.jpg' ) // front
];
//create the new sky box
mesh = new THREE.Mesh( new THREE.CubeGeometry( 300, 300, 300, 7, 7, 7 ), new THREE.MeshFaceMaterial( materials ) );
mesh.position.y = 40
mesh.scale.x = -1;
scene.add( mesh );
//add a light
var light = new THREE.PointLight(0xffffff);
light.position.set(0,40,-100);
scene.add(light);
//create the floor using an image as the sea
var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 1, 1);
var floor = new THREE.Mesh(floorGeometry, new THREE.MeshBasicMaterial( loadTexture( "water.jpg") ));
floor.rotation.x = -1.6;
floor.position.set( 0, -4, 0 );
floor.doubleSided = true;
scene.add(floor);
//create a point light and position at 0,30,-100
var light = new THREE.PointLight( 0xFFFFFF );
light.position.set( 100, 60, 60 );
scene.add( light );
//this creates the canvas html element that we use to draw our scene to
renderer = new THREE.WebGLRenderer();
//size of the canvas
renderer.setSize( 800, 800 );
//Add the canvas to the test div
document.getElementById("test").appendChild( renderer.domElement );
}
//this function drives the animation
function animate() {
if(cubeMesh2.position.z < 100)
{
cubeMesh2.position.z -= 105;
}
else
{
if(cubeMesh2.position.z > 0){
cubeMesh2.position.z -=0.1;
cubeMesh2.position.x += 0.1;
cubeMesh2.rotation.y -= 0.01;
}
else if(cubeMesh2.position.z > -30)
{
cubeMesh2.position.z -=0.1;
cubeMesh2.position.x += 0.1;
}
}
//we request that this function is called again after completion
requestAnimationFrame( animate );
controls.update();
//Render the sceen into the test div
renderer.render( scene, camera );
}
}
</script>
</head>
<body bgcolor=white>
<centre>Basic Animation</centre>
<div id=test width=800 height=500></div>
</body>
</html>
I’ve removed the scripts at, it all works fine except,I can’t figure how to animate the object.
Anything from animate function onwards(where my trouble is).
I’m unable to make the ferry object “move”/animate along a certain path.
Thanks for replies in advance.
Meanwhile,ill try to figure out how to do it.