想在一个html 页面 展示多个threejs 的场景 怎么实现
时间: 2024-02-24 20:00:37 浏览: 24
在一个 HTML 页面展示多个 Three.js 场景可以通过以下步骤实现:
1. 创建多个 Three.js 场景:根据需要创建多个 Three.js 场景,并在每个场景中添加需要的物体、光源、相机等。
2. 创建多个画布容器:为每个场景创建一个画布容器,例如 div 元素,并为每个画布容器设置一个唯一的 ID,例如:
```html
<div id="canvas1"></div>
<div id="canvas2"></div>
```
3. 在 JavaScript 中创建多个渲染器:为每个场景创建一个渲染器,同时将渲染器的输出目标设置为对应的画布容器。例如:
```javascript
var renderer1 = new THREE.WebGLRenderer();
renderer1.setSize(window.innerWidth, window.innerHeight);
document.getElementById("canvas1").appendChild(renderer1.domElement);
var renderer2 = new THREE.WebGLRenderer();
renderer2.setSize(window.innerWidth, window.innerHeight);
document.getElementById("canvas2").appendChild(renderer2.domElement);
```
4. 渲染场景:在每个场景中循环渲染,同时在循环中使用对应的渲染器进行输出。例如:
```javascript
function render1() {
requestAnimationFrame(render1);
// 渲染场景1
renderer1.render(scene1, camera1);
}
function render2() {
requestAnimationFrame(render2);
// 渲染场景2
renderer2.render(scene2, camera2);
}
render1();
render2();
```
通过以上步骤,就可以在一个 HTML 页面中展示多个 Three.js 场景。需要注意的是,每个场景需要有独立的渲染器和画布容器,同时需要在循环渲染时分别使用对应的渲染器进行输出。