Question

我在两个不同的画布上创建了两个场景：

var scene1 = new THREE.Scene()
var scene2 = new THREE.Scene()
scene1.add(camera1)
scene2.add(camera2)

接下来我用“ autoClear：false”创建了两个渲染器：

renderer = new THREE.WebGLRenderer({alpha: true, antialias: true});
renderer.autoClear = false;
$obj3D[0].appendChild(renderer.domElement);

renderer2 = new THREE.WebGLRenderer({alpha: true, antialias: true});
renderer2.autoClear = false;
$obj3D2[0].appendChild(renderer2.domElement);

现在我正在执行更新功能（带有renderer.clear（）和renderer.clearDepth（））：

function update() {
    controls.update();
    controls2.update();

    renderer.clear();
    renderer.render(scene, camera);
    renderer.clearDepth();

    renderer2.clear();
    renderer2.render(scene2, camera2);
    renderer2.clearDepth();
}

但是以这种方式，它仅在最后一个画布上显示对象。我哪里错了？我不明白

这里有一个演示：http://atktest.000webhostapp.com/，这里是代码：https://github.com/ab89/3d

我会更好地解释我想做什么：

我需要创建一个页面，最多显示5个相同的对象。也就是说，我只加载一次.obj，但是随后我将对其进行自定义。我尝试这样做，但只显示最后一个。

我这样做是因为我知道更改对象材质的方法是：

OBJ.traverse (function (child) {

             if (child.name! == '') {
                 console.log (child)
                 var clone_material = child.material [0] .clone ();
                 clone_material.map = texture;
                 child.material = clone_material;
             }
         });

         scene.add (OBJ);

所以我认为我需要有更多的场景来做。但是我也应该有：OBJ2，OBJ3，OBJ4，OBJ5做“遍历”功能并更改每个对象的纹理

多个画布Threejs上的多个场景

0 个答案: