PDA

View Full Version : Movement/Animation



Carl_Smith93
03-09-2013, 12:19 PM
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.

cireneikual
03-10-2013, 10:20 AM
Try this:

Vector3 velocity = (endPoint - startPoint).Normalize() * speed;
meshPosition += velocity;

Where endPoint, startPoint, and meshPosition are 3 component vectors and speed is a scalar.

Update like this each frame until:

(endPoint - startPoint).Magnitude() < speed

Then you just set the meshPosition to the endPoint.

Carl_Smith93
03-10-2013, 10:31 AM
Try this:

Vector3 velocity = (endPoint - startPoint).Normalize() * speed;
meshPosition += velocity;

Where endPoint, startPoint, and meshPosition are 3 component vectors and speed is a scalar.

Update like this each frame until:

(endPoint - startPoint).Magnitude() < speed

Then you just set the meshPosition to the endPoint.

Could you indication where do this? I've been trying to figure it for last 2 days and I'm still at the same point.

Regards

cireneikual
03-10-2013, 04:34 PM
Every frame you update the position (add on to it) with the velocity. The velocity is the direction to the goal = (endPoint - startPoint).Normalize(), scaled by the speed.

When the object is closer than one velocity update (speed), it is close enough to just set the position equal to the destination position.