Question

代码正在执行应该执行的操作，但我在控制台中遇到2个错误：“无法读取未定义的属性'旋转'”。由于两个变量被定义为全局变量，所以会混淆为什么它会抛出错误。我错过了什么吗？（使用TextureLoader（），因为不推荐使用ImageUtils.loadTexture（））。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Three.js</title>
    <style>
        body{
            margin: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r80/three.js"></script>
    <script src="js/OrbitControls.js"></script>
    <script>

        //GLOBAL VARIABLES
        var scene, camera, renderer, cameraControl, earthMesh, cloudMesh;

        function init(){

            //scene
            scene = new THREE.Scene();

            //renderer
            renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.setClearColor('#000', 1.0);
            renderer.shadowMap.enabled = true;

            //camera
            camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 1000);
            camera.position.x = 35;
            camera.position.y = 36;
            camera.position.z = 33;
            camera.lookAt(scene.position);

            //earth mesh
            var sphereGeometry = new THREE.SphereGeometry(10, 60, 60);
            var sphereMaterial;
            var sphereMaterialLoader = new THREE.TextureLoader();
            sphereMaterialLoader.load(
                'images/earth.jpg',
                function(earthImage){
                    sphereMaterial = new THREE.MeshBasicMaterial({
                        map: earthImage
                    });
                    earthMesh = new THREE.Mesh(sphereGeometry, sphereMaterial);
                    earthMesh.name = 'earth';
                    scene.add(earthMesh);
                    render();   
                }
            );

            //cloud mesh
            var cloudGeometry = new THREE.SphereGeometry(sphereGeometry.parameters.radius * 1.02, 
                sphereGeometry.parameters.widthSegments, sphereGeometry.parameters.heightSegments);
            var cloudMaterial;
            var cloudMaterialLoader = new THREE.TextureLoader();
            cloudMaterialLoader.load(
                'images/clouds.png',
                function(cloudImage){
                    cloudMaterial = new THREE.MeshBasicMaterial({
                        map: cloudImage
                    });
                    cloudMaterial.transparent = true;
                    cloudMesh = new THREE.Mesh(cloudGeometry, cloudMaterial);
                    cloudMesh.name = 'cloud';
                    scene.add(cloudMesh);
                    render();
                }
            );

            //camera control
            cameraControl = new THREE.OrbitControls(camera);

            document.body.appendChild(renderer.domElement);
            render();
        }

        function render(){
            renderer.render(scene, camera);
            earthMesh.rotation.y += -0.001;
            cloudMesh.rotation.y += 0.0005;
            cameraControl.update();
            requestAnimationFrame(render);
        }

        //initialize scene/render
        window.onload = init;

    </script>
</body>
</html>

Answer 1

在您的cloudMaterialLoader.load（）函数中看起来earthMesh异步初始化 - 您需要小心，因为当您第一次调用render（）earthMesh时可能尚未加载，在哪种情况下它仍然是未定义的。

使用它的几种方法是在加载earthMesh之前不调用render（），或者检查是否已经在render（）调用中加载了earthMesh，或任何符合你想象的东西。

无法读取undefined的属性'rotation' - Three.js

1 个答案: