javascript - 为什么我无法在 Three.js 中缩放或设置网格的位置？

Question

正如您在下面看到的，我向场景添加了一个网格，但每次我尝试缩放它或设置位置时，都会收到网格为空的错误。

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

未捕获类型错误:无法读取 null 的属性“位置”

查看testing2.site44.com

请帮忙，因为我浪费了很多时间来尝试让它工作。

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 );
    }


}

Answer 1

问题在于 javascript 是一种异步语言。根据您的背景，您应该阅读相关内容。尝试在这两行的下方或上方放置一个 console.log("setting scale and postion") 。您会注意到，位置和比例是在加载网格之前设置的。

您需要做的是在传递给加载函数的回调函数内设置位置和比例，就在 console.log("done loading model"); 行下方。

您还可以阅读 javascript Promises 以更好地理解它。