Question

1

我正在尝试在页面上设置多个画布，例如threejs.org上的给定示例。

我的基本代码是这样的：

var scene, camera, controls, renderer, pointLight, geometry, material;
var container, position, dimensions, apps = [];
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;

function preView( id ){

    apps.push( new App( id ) );

    //animate(); // if i call this here, all canvases renders once

    function App( id ) {

        container = $('#preView_' + id);
        dimensions = { width: container.width(), height: container.height()};

        camera = new THREE.PerspectiveCamera(45, dimensions.width/dimensions.height, 1, 5 * radius);
        camera.position.x = 0;
        camera.position.y = 0;
        camera.position.z = 100;

        scene = new THREE.Scene();

        /* add meshes */


        /* ======================= */

        renderer = new THREE.WebGLRenderer();
        renderer.setSize(dimensions.width, dimensions.height);

        container.append(renderer.domElement);

        this.animate = function() {
            if( camera.position.z > -(1/3) * 100 )
            {

                /* simple fly through the scene */
                camera.position.x += 0.05;
                camera.position.y += 0.05;
                camera.position.z -= 0.1;
            }
            camera.lookAt(new THREE.Vector3(0,0,0));
            render();
        };
    }
}


function animate(){
    for ( var i = 0; i < apps.length; ++i ) {
        apps[ i ].animate();
    }
    requestAnimationFrame(animate);
}

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

奇怪的是，在绘制完所有画布之后，如果我调用animate();，那么只有最后一个画布渲染（根本没有）。如果我在animate();函数中调用preView();，则会渲染一次，但只有最后一个画布渲染“相机飞越”。但是console.log(apps[i]);函数中的animate();会遍历所有应用，但不会渲染场景。

我在这里做错了什么？

2

此外，我尝试为我声明为“光”的每个对象实现this着色器效果，无论它在场景中具有哪个位置。我尝试使用着色器中的所有位置值稍微玩一点，绝对没有效果。唯一的影响是在第333行的VolumetericLightShader。

我希望这里有任何提示。

Answer 1

将所有变量（apps = []除外）放入App（id）函数中。因此，你将它们作为App的本地。在你的情况下，每次你打电话
```
new App( id ) 
```
您将信息放在您创建一次的全局变量中。因此，在这些变量中，您拥有自上次调用App（id）以来存储在那里的数据。这意味着您在全局变量中重写数据。关于render（）方法也是如此。把它放在App（）函数中。正如你提到的Threejs.org中的例子，你必须注意这个方法的存储位置。它位于App（）函数内部。样本jsfiddle
使用镜头光晕技术可能会更容易。 https://threejs.org/examples/webgl_lensflares.html

Three.js多个画布和着色器

1 个答案: