[英]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.