Question

我有一个包含15-20个物体，4个灯光的场景。我的渲染器的属性是

function getRenderer(container, width, height) {
    var renderer;

    renderer = new THREE.WebGLRenderer({ alpha: false, antialias: true, preserveDrawingBuffer: false });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(width, height);
    container.appendChild(renderer.domElement);
    renderer.shadowMapEnabled = true;
    renderer.shadowMapType = THREE.PCFSoftShadowMap;
    renderer.setClearColor(new THREE.Color(0xCCE0FF), 1);
    renderer.gammaInput = true;
    renderer.gammaOutput = true;
    renderer.clear();

    return renderer;
}

我的渲染循环每秒渲染场景。

    function renderLoop() {
    this.renderer.render(this.scene, this.camera);
    setTimeout(function () {
        renderLoop();
    }, 1000);
}

我面临的问题是this.renderer.render(this.scene, this.camera)渲染场景需要大约100毫秒，但我希望它低于33毫秒，这样我的帧速率至少可以达到30 fps。

有没有办法通过任何方式优化渲染器性能（比如更改任何属性或其他东西）？

我不想使用worker.js，因为我的场景是静态的，并且不包含任何复杂的计算。

Answer 1

如果您有静态场景，则没有理由进行动画循环。您只需在场景后渲染一次 - 以及所有资产 - 加载。

这就是为什么有加载器函数的回调。这就是为什么有一个THREE.LoadingManager。

有许多可能的用例。研究three.js示例以找到适合您特定用例的解决方案。

如果您使用OrbitControls来控制相机，则可以在相机移动时强制重新渲染，如下所示：

controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render ); // use if there is no animation loop

three.js r.75

为静态场景优化Three.JS渲染时间

1 个答案: