ThreeJs 将它们放入列表后不呈现我的对象

Question

所以我有一些代码，当我重构时它不再显示任何内容。我在控制台中没有收到任何错误，所以我真的没什么可做的。据我所知，这段代码应该为工作实例产生相同的输出，但事实并非如此。这是损坏的代码。

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<script src="http://threejs.org/build/three.min.js"></script>
<script>var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var objects = [
{
    name : "earth",
    geometry : new THREE.SphereGeometry(1, 32, 32),
    material : new THREE.MeshPhongMaterial(),
    mesh : new THREE.Mesh(this.geometry, this.material),
    init : function(scene){
    console.log("Wtf");
    this.mesh.position.set(0,0,0);
    //this.material.map = THREE.ImageUtils.loadTexture('../earth.jpg');
    scene.add(this.mesh);
    console.log("ugh");
    },
    animate : function(t){this.mesh.position.set(0+t/100,0+t/100,0+t/100);}
},
{
    name : "satellite",
    geometry : new THREE.SphereGeometry(0.1, 32, 32),
    material : new THREE.MeshPhongMaterial(),
    mesh : new THREE.Mesh(this.geometry, this.material),
    init : function(scene){
    console.log("Wtf");
    this.mesh.position.set(1.5,0,0);
    //this.material.map = THREE.ImageUtils.loadTexture('../earth.jpg');
    scene.add(this.mesh);
    console.log("ugh");
    },
    animate : function(t){this.mesh.position.set(1.5+t/100,0+t/100,0+t/100);}
}];
objects.forEach(object => object.init(scene));

var light = new THREE.HemisphereLight(0xf6e86d, 0x404040, 0.5);
scene.add(light);

camera.position.x = 0;
camera.position.y = -5;
camera.position.z = 0;
camera.lookAt(new THREE.Vector3( 0, 0, 0));

var render = function () {
    requestAnimationFrame( render );
    renderer.render(scene, camera);
}

render();
</script>
</body>
</html>

这是工作示例。

        <!DOCTYPE html>
        <html>
        <head>
        </head>
        <body>
        
        <script src="http://threejs.org/build/three.min.js"></script>
        
        <script>var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );

        
        var earth_geometry = new THREE.SphereGeometry(1, 32, 32);
        var earth_material = new THREE.MeshPhongMaterial();
        var earth_mesh = new THREE.Mesh(earth_geometry, earth_material);
        earth_mesh.position.set(0,0,0);
        //earth_material.map = THREE.ImageUtils.loadTexture('../earth.jpg');
        scene.add(earth_mesh);
        

        var satellite_geometry = new THREE.SphereGeometry(0.1, 32, 32);
        var satellite_material = new THREE.MeshPhongMaterial();
        var satellite_mesh = new THREE.Mesh(satellite_geometry, satellite_material);
        satellite_mesh.position.set(1.5,0,0);
        //satellite_material.map = THREE.ImageUtils.loadTexture('../earth.jpg');
        scene.add(satellite_mesh);
        
        
        var light = new THREE.HemisphereLight(0xf6e86d, 0x404040, 0.5);
        scene.add(light);
        
        camera.position.x = 0;
        camera.position.y = -5;
        camera.position.z = 0;
        camera.lookAt(new THREE.Vector3( 0, 0, 0));
        
        var render = function () {
            requestAnimationFrame( render );
            renderer.render(scene, camera);
        }

        render();
        </script>
        </body>
        </html>

我试过将 scene.add 从 init 函数中移出，只是用 scene.add(object[0].mesh) 手动完成，并将对象更改为 const 和 let 但是 none 有帮助。

Answer 1

问题在这里：

mesh : new THREE.Mesh(this.geometry, this.material),

实例化在该对象上被评估为属性，并且不会在函数内部调用。因此 this 将引用全局上下文，或者在本例中为父 window，它没有定义“几何”或“material”属性。 this 仅在函数内部发生变化，以引用该函数是其对象的对象属性（或调用者将其绑定到的任何对象，如果适用。）

在不重构代码的情况下，最简单的解决方法是在传入几何体和网格时在同一行实例化几何体和 material，如下所示：

mesh : new THREE.Mesh(new THREE.SphereGeometry(1, 32, 32), new THREE.MeshPhongMaterial()),

ThreeJs 将它们放入列表后不呈现我的对象

ThreeJs does not render my objects after putting them in a list

javascript

three.js