Three.js - Translation animation of model. Not an object3D

Question

Hey guys basically I have a crude scene set up. I was finally able to load to a 3D model of a sports car into my scene.

I can animate an Object3D primitive with for example sphere.translateY(1).

I for the death of me cannot figure out how to do a similar translation animation on my car model. First it said car variable not found when I made a global for it, then I tried passing car into animate function to no avail.

I'm sure translateY only works on Object3D like sphere, so how do i do this simple translate on an imported 3d model? I tried incrementing position. Here is my code someone please help! (I ommitted camera and render code etc, it all works just need to animate this car!

var sphere;
var car;

function init() {
    // THE USUAL STUFF, scene, camera, renderer
  }

function addSceneElements() {
 // Sphere
    sphere = new THREE.Mesh(new THREE.SphereGeometry(8, 70, 20), blueMat);
    sphere.position.set(-260, 9, 125);
    scene.add(sphere);

    var loader = new THREE.JSONLoader();
    loader.load( "models/hotride.js", function(geometry){
    var material = new THREE.MeshLambertMaterial({color: 0x66CCFF});
    var car = new THREE.Mesh(geometry, material);
    car.scale.set(7,7,7);
    car.position.set(10, 22, -1000);
    scene.add(car);
    animate();
  });
  }

function animate() {
sphere.translateX(1);
      //car.translateZ(2);
     // car.position.z += clock.getDelta();

      // render
      renderer.render(scene, camera);
       requestAnimationFrame( animate );
      controls.update();
    }

score 1 · Accepted Answer · answered May 09 '14 at 16:05

You have a global var car and a local var car

var car;

function init() {
    // THE USUAL STUFF, scene, camera, renderer
  }

function addSceneElements() {
 // Sphere
    sphere = new THREE.Mesh(new THREE.SphereGeometry(8, 70, 20), blueMat);
    sphere.position.set(-260, 9, 125);
    scene.add(sphere);

    var loader = new THREE.JSONLoader();
    loader.load( "models/hotride.js", function(geometry){
    var material = new THREE.MeshLambertMaterial({color: 0x66CCFF});
    var car = new THREE.Mesh(geometry, material);     //// <<<< local var !!!

That means that the global car won't have the mesh assigned to the local car. Just remove var in the line !

    car = new THREE.Mesh(geometry, material);     //// <<<< global var !!!

score 0 · Answer 2 · answered May 08 '14 at 12:44

0

You can add your model in a new Object3D, and manipulate this object for translation/rotation.

answered May 08 '14 at 12:44

vincent

1,525
12
18

Three.js - Translation animation of model. Not an object3D

2 Answers2