投影视图的魅力
想象一下，你站在一个巨大的雕塑前，不仅可以绕着它走，还能从不同的角度仔细欣赏。在Three.js中，我们可以通过编程实现类似的效果，让观众体验到从不同方向观察模型的乐趣。
相机观察视角的控制
通过UI按钮，我们可以控制相机的观察视角，实现在不同轴向上的投影视图。
示例代码：控制相机观察视角
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three.js Camera View Projections</title>
<style>
body { margin: 0; }
canvas { display: block; }
#controls { position: absolute; top: 10px; left: 10px; }
</style>
</head>
<body>
<div id="controls">
<button id="x">X-Axis View</button>
<button id="y">Y-Axis View</button>
<button id="z">Z-Axis View</button>
</div>
<script type="importmap">
{
"imports": {
"three": "https://threejs.org/build/three.module.js"
}
}
</script>
<script type="module">
import * as THREE from 'three';
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 cube = new THREE.Mesh(
new THREE.BoxGeometry(100, 100, 100),
new THREE.MeshStandardMaterial({ color: 0x00ff00 })
);
scene.add(cube);
camera.position.set(500, 500, 500); // 初始相机位置
scene.add(camera);
document.getElementById('x').addEventListener('click', function () {
camera.position.set(500, 0, 0); // X轴方向观察
camera.lookAt(cube.position); // 重新计算相机视线方向
});
document.getElementById('y').addEventListener('click', function () {
camera.position.set(0, 500, 0); // Y轴方向观察
camera.lookAt(cube.position); // 重新计算相机视线方向
});
document.getElementById('z').addEventListener('click', function () {
camera.position.set(0, 0, 500); // Z轴方向观察
camera.lookAt(cube.position); // 重新计算相机视线方向
});
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>在这个示例中，我们创建了一个立方体，并设置了相机的初始位置。通过点击UI按钮，观众可以改变相机的观察角度，实现在X轴、Y轴和Z轴方向上的投影视图。
相机位置的调整
通过改变相机的.position属性，我们可以控制相机的观察方向。同时，使用.lookAt()方法确保相机始终指向模型的中心。