Three.js 实现鼠标拖动改变视角：交互式 3D 场景示例

以下是使用 Three.js 实现的一个示例程序，通过点击拖动空白空间来改变观察一个 mesh 结构的视角：\n\njavascript\n// 创建场景\nvar scene = new THREE.Scene();\n\n// 创建相机\nvar camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);\ncamera.position.z = 5;\n\n// 创建渲染器\nvar renderer = new THREE.WebGLRenderer();\nrenderer.setSize(window.innerWidth, window.innerHeight);\ndocument.body.appendChild(renderer.domElement);\n\n// 创建一个盒子作为 mesh 结构\nvar geometry = new THREE.BoxGeometry(1, 1, 1);\nvar material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });\nvar cube = new THREE.Mesh(geometry, material);\nscene.add(cube);\n\n// 添加鼠标点击事件\nvar mouseDown = false;\nvar startX, startY;\n\nrenderer.domElement.addEventListener('mousedown', function (event) {\n event.preventDefault();\n mouseDown = true;\n startX = event.clientX;\n startY = event.clientY;\n}, false);\n\nrenderer.domElement.addEventListener('mouseup', function (event) {\n event.preventDefault();\n mouseDown = false;\n}, false);\n\nrenderer.domElement.addEventListener('mousemove', function (event) {\n event.preventDefault();\n if (!mouseDown) return;\n \n var deltaX = event.clientX - startX;\n var deltaY = event.clientY - startY;\n \n cube.rotation.y += deltaX * 0.01;\n cube.rotation.x += deltaY * 0.01;\n \n startX = event.clientX;\n startY = event.clientY;\n}, false);\n\n// 渲染循环\nfunction animate() {\n requestAnimationFrame(animate);\n renderer.render(scene, camera);\n}\nanimate();\n\n\n在这个示例中，我们创建了一个场景、一个相机和一个渲染器。我们使用Three.js提供的BoxGeometry和MeshBasicMaterial来创建一个盒子作为 mesh 结构，并将其添加到场景中。然后，我们添加了鼠标点击事件，当鼠标按下并移动时，根据鼠标的移动距离改变盒子的旋转角度。最后，我们通过调用renderer.render方法来渲染场景和相机。\n\n你可以将这段代码复制到一个 HTML 文件中，并在浏览器中运行，然后你就可以通过点击拖动空白空间来改变观察盒子的视角了。