three.js多重渲染

我现在有一个函数，它应该在运行时创建一个三维行星球体，但我似乎无法让我的函数渲染多次，如果我在一个页面上运行多次，它会完全忽略除最后一次调用之外的所有函数，我知道我在编码这件事时做得很糟糕，它是用来证明概念的，但如果我不明白为什么我不能在同一页面上获得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);
}

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

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

此外，我已经检查过，如果我删除第三个，第二个会显示，但不是第一个，所以这不是参数不正确的问题，我认为这是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个不同的渲染图，它们不在同一个场景中，或者我会在一个场景中将它们全部制作出来，它们在网站中被视为不同的块，这只是一个例子，绝不是该功能需要工作的唯一方式，但该功能确实需要将每个星球视为自己的场景，我们不能把它们放在一个场景里。

https://i.stack.imgur.com/tooOA.jpg