写一下完整的代码
时间: 2023-07-10 12:24:23 浏览: 49
好的,以下是一个完整的示例代码,实现了在 HTML 中通过点击按钮切换 threejs 中的场景和模型:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>切换场景和模型</title>
<style>
#container {
width: 800px;
height: 600px;
}
button {
margin-right: 10px;
}
</style>
</head>
<body>
<div id="container"></div>
<button id="btn-switch-scene" onclick="switchScene()">切换场景</button>
<button id="btn-switch-model" onclick="switchModel()">切换模型</button>
<script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/three.min.js"></script>
<script>
var scene1, scene2, currentScene;
var model1, model2, currentModel;
var renderer, camera, controls;
function init() {
// 创建场景1和场景2
scene1 = new THREE.Scene();
scene2 = new THREE.Scene();
currentScene = scene1;
// 创建模型1和模型2
var geometry1 = new THREE.BoxGeometry();
var material1 = new THREE.MeshBasicMaterial({color: 0xff0000});
var geometry2 = new THREE.SphereGeometry();
var material2 = new THREE.MeshBasicMaterial({color: 0x00ff00});
model1 = new THREE.Mesh(geometry1, material1);
model2 = new THREE.Mesh(geometry2, material2);
currentModel = model1;
// 将模型1添加到场景1中
scene1.add(model1);
// 创建渲染器、相机等
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(800, 600);
document.getElementById('container').appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(45, 800 / 600, 0.1, 1000);
camera.position.set(0, 0, 5);
controls = new THREE.OrbitControls(camera, renderer.domElement);
// 渲染场景1
renderer.render(scene1, camera);
}
function switchScene() {
// 切换场景
if (currentScene === scene1) {
currentScene = scene2;
} else {
currentScene = scene1;
}
// 切换模型
switchModel();
// 更新渲染器的场景
renderer.setScen(currentScene);
// 重新渲染场景
renderer.render(currentScene, camera);
}
function switchModel() {
// 获取当前场景中的模型对象
var currentModel = currentScene.getObjectByName('currentModel');
// 从场景中移除当前模型
currentScene.remove(currentModel);
// 切换模型
if (currentModel === model1) {
currentModel = model2;
} else {
currentModel = model1;
}
// 将新的模型添加到场景中
currentScene.add(currentModel);
}
init();
</script>
</body>
</html>
```
在这个示例中,我们创建了两个场景和两个模型,分别是一个红色的立方体和一个绿色的球体。我们将立方体添加到了场景1中,并在切换模型时,从当前场景中移除当前模型,然后再添加另一个模型到场景中。
同时,我们使用了 threejs 自带的 OrbitControls 来控制相机的旋转和平移,使得用户能够更方便地查看场景和模型。需要注意的是,我们在切换场景后也要调用 `switchModel()` 函数来切换模型。
在实际应用中,你需要根据你的具体需求来创建场景和模型,并对代码进行更加详细的优化和改进。