three.js 相机可以由鼠标控制
时间: 2023-08-12 10:06:38 浏览: 71
是的,three.js 中可以通过鼠标控制相机的位置和朝向,这可以通过引入 `OrbitControls` 来实现。`OrbitControls` 是 three.js 中一个常用的控制器,可以通过鼠标控制相机的位置、朝向和缩放等操作。下面是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Three.js 相机鼠标控制示例</title>
<style>
body {
margin: 0;
padding: 0;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/three@0.131.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three/examples/js/controls/OrbitControls.js"></script>
<script>
// 初始化场景、相机、渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 添加一个立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 添加光源
const light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(0, 0, 10);
scene.add(light);
// 添加鼠标控制
const controls = new THREE.OrbitControls(camera, renderer.domElement);
// 渲染循环
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
```
在这个示例中,我们首先初始化了场景、相机和渲染器,并添加了一个立方体和一个光源。接着,我们引入了 `OrbitControls`,并使用 `OrbitControls` 创建了一个控制器 `controls`,将相机和渲染器传入。最后,我们开启了渲染循环,并在循环中调用 `renderer.render` 方法和 `controls.update` 方法。这样,我们就实现了通过鼠标控制相机的功能。