Three.js 拖动鼠标改变视角 - 使用 OrbitControls 实现

"使用 Three.js 实现拖动鼠标改变场景视角的功能"\n\n要实现用鼠标拖动改变场景中视角的功能，可以使用 three.js 中的 OrbitControls 控制器。\n\n首先，需要在 HTML 文件中引入 three.js 库和 OrbitControls.js 文件。\n\nhtml\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js\"</script>\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/controls/OrbitControls.min.js\"</script>\n\n\n然后，在 JavaScript 代码中创建场景、相机、渲染器，并添加一个立方体到场景中。\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// 创建立方体\nvar geometry = new THREE.BoxGeometry();\nvar material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });\nvar cube = new THREE.Mesh(geometry, material);\nscene.add(cube);\n\n\n接下来，使用 OrbitControls 控制器来实现拖动鼠标改变视角的功能。\n\njavascript\n// 创建控制器\nvar controls = new THREE.OrbitControls(camera, renderer.domElement);\n\n// 渲染场景\nfunction animate() {\n requestAnimationFrame(animate);\n renderer.render(scene, camera);\n}\n\nanimate();\n\n\n在上述代码中，我们将相机和渲染器的 DOM 元素传递给 OrbitControls 控制器的构造函数。然后，在渲染场景的循环中调用控制器的 update 方法，以便在每一帧中更新相机的位置。\n\n现在，你可以在浏览器中运行代码，然后通过鼠标拖动来改变场景中的视角。