簡體   English   中英

如何在three.js中在WebGL渲染器和畫布渲染器之間切換

[英]How to switch between a WebGL renderer and a canvas renderer in three.js

我想在 Three.js(版本 69)中使用 WebGL 渲染器或畫布渲染器渲染場景。

這是我的代碼:

<!DOCTYPE html>

<html>

<head>
    <script src="./libs/three.js"></script>
    <script src="./libs/CanvasRenderer.js"></script>
    <script src="./libs/Projector.js"></script>

    <script src="./libs/dat.gui.js"></script>
</head>

<body>
    <div id="renderer-output"></div>

    <script type="text/javascript">
        // global variables
        var scene, camera, renderer;

        var gui;

        var config = {
            rendererType: 'WebGL',
            perspectiveCameraFOV: 45,
            perspectiveCameraNear: 0.1,
            perspectiveCameraFar: 1000,
            cameraPosition_x: -30,
            cameraPosition_y: 40,
            cameraPosition_z: 30,
        };

        function init() {
            // create the scene
            scene = new THREE.Scene();

            // create the camera
            camera = new THREE.PerspectiveCamera(
                config.perspectiveCameraFOV,
                window.innerWidth / window.innerHeight,
                config.perspectiveCameraNear,
                config.perspectiveCameraFar
            );
            // set the position
            camera.position.set(
                config.cameraPosition_x,
                config.cameraPosition_y,
                config.cameraPosition_z
            );
            // set the look at
            camera.lookAt(scene.position);

            // create the renderer
            if (config.rendererType == 'WebGL') {
                renderer = new THREE.WebGLRenderer();
            } else if (config.rendererType == 'canvas') {
                renderer = new THREE.CanvasRenderer();
            }
            // set the size
            renderer.setSize(window.innerWidth, window.innerHeight);
            // add the output to the html element
            document.getElementById("renderer-output").appendChild(renderer.domElement);

            var boxGeometry = new THREE.BoxGeometry(4, 4, 4);
            var boxMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });

            var box = new THREE.Mesh(boxGeometry, boxMaterial);

            scene.add(box);

            // create the dat gui
            gui = new dat.GUI({
                preset: config // preset default config
            });

            // remember config
            gui.remember(config);

            // add a renderer folder
            let rendererFolder = gui.addFolder("Renderer");
            rendererFolder.open();

            // set control rendererType
            let rendererTypeController = rendererFolder.add(
                config,
                "rendererType",
                ['WebGL', 'canvas']
            );
            rendererTypeController.onFinishChange(function (rendererType) {
                // remove the renderer output from the html element
                document.getElementById('renderer-output').removeChild(renderer.domElement);
                // create the renderer
                if (rendererType == 'WebGL') {
                    renderer = new THREE.WebGLRenderer();
                } else {
                    renderer = new THREE.CanvasRenderer();
                }
                // set the size
                renderer.setSize(window.innerWidth, innerHeight);
                // add the output to the html element
                document.getElementById('renderer-output').appendChild(renderer.domElement);
            });

            render();
        }

        function render() {
            // update the scene
            requestAnimationFrame(render);
            renderer.render(scene, camera);
        }

        window.onload = init;
    </script>
</body>

</html>

當我想更改渲染器類型時,將執行以下幾行:

// remove the renderer output from the html element
document.getElementById('renderer-output').removeChild(renderer.domElement);
// create the renderer
if (rendererType == 'WebGL') {
    renderer = new THREE.WebGLRenderer();
} else {
    renderer = new THREE.CanvasRenderer();
}
// set the size
renderer.setSize(window.innerWidth, innerHeight);
// add the output to the html element
document.getElementById('renderer-output').appendChild(renderer.domElement);

但是當我將渲染器從畫布更改為 WebGL 時,我看不到場景中的對象。 當我從 WebGL 轉到畫布時,我可以看到它。

我在控制台中沒有收到任何錯誤。

你有什么建議嗎?

我可以找到一個解決方案,創建兩個變量來存儲兩種不同的渲染器類型,並在我更改config.rendererTypes的值時調用它們。

<!DOCTYPE html>

<html>

<head>
    <script src="./libs/three.js"></script>
    <script src="./libs/CanvasRenderer.js"></script>
    <script src="./libs/Projector.js"></script>

    <script src="./libs/dat.gui.js"></script>
</head>

<body>
    <div id="renderer-output"></div>

    <script type="text/javascript">
        // global variables
        var camera, scene;
        var rendererWebGL, rendererCanvas;

        var gui;

        var config = {
            rendererType: 'WebGL'
        };

        function init() {
            // create the scene
            scene = new THREE.Scene();

            // create the camera
            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
            // set the position
            camera.position.set(-30, 40, 30);
            // set the look at
            camera.lookAt(new THREE.Vector3(0, 0, 0));

            // create the renderer
            rendererWebGL = new THREE.WebGLRenderer();
            rendererCanvas = new THREE.WebGLRenderer();
            // set the sizeWebGLRenderer
            rendererWebGL.setSize(window.innerWidth, window.innerHeight);
            rendererCanvas.setSize(window.innerWidth, window.innerHeight);
            // set the color
            // rendererWebGL.setClearColor(0xEEEEEE);
            // rendererCanvas.setClearColor(0xEEEEEE);            
            // add the output to the html element
            if (config.rendererType == 'WebGL') {
                document.getElementById("renderer-output").appendChild(rendererWebGL.domElement);
            } else if (config.rendererType == 'canvas') {
                document.getElementById("renderer-output").appendChild(rendererCanvas.domElement);
            }

            // add a box to the scene
            var boxGeometry = new THREE.BoxGeometry(4, 4, 4);
            var boxMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
            scene.add(new THREE.Mesh(boxGeometry, boxMaterial));

            // create the dat gui
            gui = new dat.GUI({
                preset: config
            });
            // remember config
            gui.remember(config);
            // add a renderer folder
            let rendererFolder = gui.addFolder("Renderer");
            // set folder open
            rendererFolder.open();
            // add a control rendererType
            let rendererTypeController = rendererFolder.add(config, "rendererType", ['WebGL', 'canvas']);
            // set the onFinishCange
            rendererTypeController.onFinishChange(function (rendererType) {
                // remove the renderer's domElement
                var renderer_output = document.getElementById("renderer-output");
                renderer_output.removeChild(renderer_output.children[0]);

                // add the renderer-output
                if (rendererType == 'WebGL') {
                    renderer_output.appendChild(rendererWebGL.domElement);
                } else {
                    renderer_output.appendChild(rendererWebGL.domElement);
                }
            });

            render();
        }

        function render() {
            // update the scene
            if (config.rendererType == 'WebGL') {
                rendererWebGL.render(scene, camera); 
            } else if (config.rendererType == 'canvas') {
                rendererCanvas.render(scene, camera); 
            }

            requestAnimationFrame(render);
        }

        window.onload = init;
    </script>
</body>

</html>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM