CODEWITHSUNDEEP
javascriptthree.js
krikey
krikey

Reputation: 195

Why am I not able to scale or set position of a mesh in three.js?

As you can see below, I added a mesh to the scene but everytime I try to scale it or set position, I get an error that the mesh is null.

  mesh2.position.set(0,0,-5);
  mesh2.scale.set(0.2, 0.3, 0.2);

Uncaught TypeError: Cannot read property 'position' of null

check it out at testing2.site44.com

Please help as I have wasted hours trying to get this to work.

function init()
{
    var scene = new THREE.Scene();//CREATE NEW THREE JS SCENE

    var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
    var renderer = new THREE.WebGLRenderer({antialias:true}); //INIT NEW THREE JS RENDERER
        renderer.setPixelRatio( window.devicePixelRatio ); //SET PIXEL RATIO FOR MOBILE DEVICES
        renderer.setClearColor(new THREE.Color('#005b96'), 1) //SET BG COLOR
        renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); // SET SIZE
        document.body.appendChild( renderer.domElement ); //APPLY CANVAS TO BODY
        renderer.domElement.id = "canvas_threeJS";//ADD ID TO CANVAS

    //ADD CAMERA TO THE SCENE
    var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR =1000;
    var camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
        camera.position.set(0,3,8); //SET CAMERA POSITION
        camera.lookAt(new THREE.Vector3(0,0,-5));
        scene.add(camera);

    //ADD AMBIENT LIGHT
    var ambientLight = new THREE.AmbientLight("#6497b1");
        scene.add(ambientLight);

    //HANDLE WINDOW RESIZE
    //ADD MAIN LIGHT
    var light = new THREE.PointLight("#b3cde0",.6);
        light.position.set(-5,13,-1);
        scene.add(light);


    var mesh2 = null;
    var loader = new THREE.JSONLoader();
    loader.load('assets/models/spaceship001.json', function(geometry) {
        mesh2 = new THREE.Mesh(geometry);
        scene.add(mesh2);
        console.log("done loading model");
        });


      mesh2.position.set(0,0,-5);
//    mesh2.scale.set(0.2, 0.3, 0.2);


    //START POSITION OF A LEVEL GROUP
    var levelSpawn = -100;

    //GET VISIBLE WIDTH AT levelSpawn POSITION
    var vFOV = camera.fov * Math.PI / 180; // convert vertical fov to radians
    var height = 2 * Math.tan( vFOV / 2 )*levelSpawn; // visible height

    var aspect = window.innerWidth / window.innerHeight;
    var width = height * aspect;// visible width

    //START RENDER
    update();

    function update()
    {

        //UPDATE 3D SCENE
        renderer.render( scene, camera );

        //KEEP RENDERING
        requestAnimationFrame( update );
    }


}

Upvotes: 0

Views: 1428

Answers (1)

micnil
micnil

Reputation: 4805

The problem is that javascript is an asynchronous language. Depending on your background you should read up on that. Try putting a console.log("setting scale and postion") just under or above those two lines. What you'll notice is that the position and scale is set before the mesh is loaded.

What you need to do is set the position and scale inside the callback function that you pass to the load function, just under the console.log("done loading model"); line.

You can also read up on javascript Promises to understand it better.

Upvotes: 2

Related Questions