Javascript three.js多重渲染

我现在有一个函数，在运行时应该创建一个3d星球球体，但我似乎无法让我的函数渲染多次，如果我在一个页面上运行多次，它只会完全忽略对该函数的所有调用，但最后一次调用除外，我知道我做了一个可怕的编码工作，这是为了用作概念证明，但是我不想去优化任何东西，如果我不能找出为什么我不能在同一页上得到3个不同的渲染

function makePlanet(planetContainer, texture){
        $this = this;

    $this.camera; 
    $this.scene;
    $this.sceneAtmosphere;
    $this.renderer;
    $this.primitive; 
    $this.material;
    $this.stats;

    $this.loop = function() {
        var angle = (Math.PI/180*0.1);

        cosRY = Math.cos(angle);
        sinRY = Math.sin(angle);

        var tempz = $this.camera.position.z;
        var tempx = $this.camera.position.x; 

        $this.camera.position.x = (tempx*cosRY)+(tempz*sinRY);
        $this.camera.position.z = (tempx*-sinRY)+(tempz*cosRY);

        $this.renderer.clear();
        $this.renderer.render( $this.scene, $this.camera );
        $this.renderer.render( $this.sceneAtmosphere, $this.camera );

        setTimeout(function(){
            $this.loop();
        }, 1000 / 60);
    }

        $this.Shaders = {

        'earth' : {

            uniforms: {

                "texture": { type: "t", value: 0, texture: null }

            },

            vertex_shader: [

                "varying vec3 vNormal;",
                "varying vec2 vUv;",

                "void main() {",

                    "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",

                    "vNormal = normalize( normalMatrix * normal );",
                    "vUv = uv;",

                "}"

            ].join("\n"),

            fragment_shader: [

                "uniform sampler2D texture;",

                "varying vec3 vNormal;",
                "varying vec2 vUv;",

                "void main() {",

                    "vec3 diffuse = texture2D( texture, vUv ).xyz;",
                    "float intensity = 1.10 - dot( vNormal, vec3( 0.0, 0.0, 1.0 ) );",
                    "vec3 atmosphere = vec3( 0.75, 0.75, 2.0 ) * pow( intensity, 3.0 );",

                    "gl_FragColor = vec4( diffuse + atmosphere, 1.0 );",

                "}"

            ].join("\n")

        },

        'atmosphere' : {

            uniforms: {},

            vertex_shader: [

                "varying vec3 vNormal;",

                "void main() {",

                    "vNormal = normalize( normalMatrix * normal );",
                    "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",

                "}"

            ].join("\n"),

            fragment_shader: [

                "varying vec3 vNormal;",

                "void main() {",
                    // First float seems to affect opacity, and the last float affects size/strenth of the gradient
                    "float intensity = pow( 0.4 - dot( vNormal, vec3( 0.0, 0.0, 1.0 ) ), 5.0 );",
                    // This seems to just be a simple colour value
                    "gl_FragColor = vec4( 0.5, 1.0, 1.0, 0.8 ) * intensity;",

                "}"

            ].join("\n")

        }

    };

    $this.camera = new THREE.Camera(30, $(planetContainer).width() / $(planetContainer).height(), 1, 100000);
    $this.camera.position.z = 1000;

    $this.scene = new THREE.Scene();
    $this.sceneAtmosphere = new THREE.Scene();

    $this.texture = ImageUtils.loadTexture('img/planets/textures/'+texture, {}, function() {
        $this.renderer.render($this.scene);
    });
    $this.texture.needsUpdate = true;

    $this.material = new THREE.MeshBasicMaterial( { map: $this.texture });
    $this.geom = new Sphere( 200, 50, 50);

    $this.primitive = new THREE.Mesh($this.geom, $this.material );

    $this.scene.addObject( $this.primitive );

// Atmosphere
    $this.shader = $this.Shaders[ 'atmosphere' ];
    $this.uniforms = Uniforms.clone( $this.shader.uniforms );

    $this.material = new THREE.MeshShaderMaterial( {

        uniforms: $this.uniforms,
        vertex_shader: $this.shader.vertex_shader,
        fragment_shader: $this.shader.fragment_shader

    } );

    $this.primitive = new THREE.Mesh( $this.geom, $this.material );
    $this.primitive.scale.x = $this.primitive.scale.y = $this.primitive.scale.z = 1.12;
    $this.primitive.flipSided = true;
    $this.sceneAtmosphere.addObject( $this.primitive );


    $this.renderer = new THREE.WebGLRenderer();
    $this.renderer.autoClear = false;
    $this.renderer.setClearColorHex( 0x000000, 1.0 );
    $this.renderer.setSize($(planetContainer).width(), $(planetContainer).height());

    $(planetContainer).append($this.renderer.domElement);

    setTimeout(function(){
        $this.loop();
    }, 1000 / 60);
}

有人能解释一下为什么我不能在一个页面上多次使用这个功能吗

当我在任何页面上多次运行该函数时，我只看到1个3D对象，其他应该渲染对象的位置不会出现，我想我有3个部分，每个部分都要渲染一个不同的星球，如果我用不同的参数运行该函数3次，我最后一次运行该函数是唯一显示的部分，其他两个地方什么也没有显示，只是一个空白点

另外，我已经检查过了，如果我删除了第三个，则会显示第二个，但不会显示第一个，因此参数不正确不是问题，我相信这是three.js不希望创建多个渲染器实例的问题

使用示例

$(document).ready(function(){
    var goldilocks = new makePlanet('.goldilocksplanet .planetRender','planet_Jinx1200.png');
    var ocean = new makePlanet('.oceanplanet .planetRender','planet_serendip_1600.jpg');
    var sulfur = new makePlanet('.sulfurplanet .planetRender','planet_Telos1200.png');
});

---

下面是一个包含3个不同渲染的网页示例，它们不在同一场景中，或者我会将它们全部制作在一个场景中，它们被视为网站中的不同块，这只是一个示例，决不是该功能需要工作的唯一方式，但是函数确实需要将每个行星视为自己的场景，我们不能将它们全部放在一个场景中

---

所以我解决了自己的问题，显然是因为我在函数中使用了全局变量而不是局部变量。我所要做的就是改变

$this = this;

到

---

这解决了我所有的问题。。。有时我觉得自己像个白痴。

所以我解决了自己的问题，显然是因为我在函数中使用了全局变量，而不是局部变量。我所要做的就是改变

$this = this;

到

---

这解决了我所有的问题。。。有时我觉得自己像个白痴。

你可能想考虑替换：

    setTimeout(function(){
            $this.loop();
        }, 1000 / 60);

第三部分：

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

---

<> >主要原因是<>代码>请求动画框架不会在浏览器窗口不可见时浪费渲染能力。

您可能需要考虑替换：

    setTimeout(function(){
            $this.loop();
        }, 1000 / 60);

第三部分：

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

---

主要原因是当浏览器窗口不可见时，

requestAnimationFrame

不会浪费渲染能力。

“如果我在一个页面上多次运行它，它只会完全忽略除最后一次调用外的所有函数”是吗？这是什么意思？什么功能？你如何“不止一次”运行什么？你希望看到什么？你看到了什么？@AlexWayne当我在任何页面上多次运行该函数时，我只看到1个3D对象，其他应该渲染对象的位置不会出现，我想我有3个部分，每个部分都要渲染一个不同的星球，如果我用不同的参数运行该函数3次，上次运行该函数时，只有一个显示，其他两个位置没有显示任何内容，只是一个空白点。@AlexWayne，我也检查过，如果删除第三个，第二个会显示，但不是第一个，因此参数不正确不是问题，我认为three.js不想创建多个渲染器实例是一个问题。@AlexWayne我在原始问题中添加了一个编辑，向您展示了我多次运行函数的意思。“如果我在一个页面上多次运行它，它只会完全忽略对函数的最后一次调用”哈？这是什么意思？什么功能？你如何“不止一次”运行什么？你希望看到什么？你看到了什么？@AlexWayne当我在任何页面上多次运行该函数时，我只看到1个3D对象，其他应该渲染对象的位置不会出现，我想我有3个部分，每个部分都要渲染一个不同的星球，如果我用不同的参数运行该函数3次，上次运行该函数时，只有一个显示，其他两个位置没有显示任何内容，只是一个空白点。@AlexWayne，我也检查过，如果删除第三个，第二个会显示，但不是第一个，因此参数不正确不是问题，我认为three.js不想创建多个渲染器实例是一个问题。@AlexWayne我在原始问题中添加了一个编辑，向您展示了我多次运行该函数的意思。您知道如果画布不可见，它是否也不会浪费渲染能力吗？（即：它位于不同的选项卡上，我将该选项卡更改为不同的选项卡，因此画布不再可见？）我使用setTimeout的原因是，我打算添加检查选项卡当前是否可见。）@CoryEvans我不知道是否所有浏览器都以相同的方式工作，但在Google Chrome中，切换选项卡时它会停止更新。在我的笔记本电脑上，当我渲染厚重的3D场景时，温控风扇会高速旋转。当我切换选项卡时，风扇向下旋转=o） 不是“窗口选项卡”，我的意思是如果我将父容器设置为display:none，requestAnimationFrame会停止运行吗？您知道如果画布不可见，它是否也不会浪费渲染能力吗？（即：它位于不同的选项卡上，我将该选项卡更改为不同的选项卡，因此画布不再可见？）我使用setTimeout的原因是，我打算添加检查选项卡当前是否可见。）@CoryEvans我不知道是否所有浏览器都以相同的方式工作，但在Google Chrome中，切换选项卡时它会停止更新。在我的笔记本电脑上，当我渲染厚重的3D场景时，温控风扇会高速旋转。当我切换选项卡时，风扇向下旋转=o） 不是“窗口选项卡”，我的意思是如果我将父容器设置为