鼠标控制

为了使用鼠标操作三维场景，可以借助 three.js 众多控件之一 OrbitControls.js

<script src="../lib/OrbitControls.js"></script>

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

function render() {
  renderer.render(scene, camera); //执行渲染操作
}
var controls = new THREE.OrbitControls(camera, renderer.domElement); //创建控件对象
controls.addEventListener("change", render); //监听鼠标、键盘事件

注意开发中不要同时使用 requestAnimationFrame()或 controls.addEventListener('change', render)调用同一个函数，这样会冲突。

//执行渲染操作   指定场景、相机作为参数
function render() {
  renderer.render(scene, camera); //执行渲染操作
  requestAnimationFrame(render); //请求再次执行渲染函数render
}
render();
var controls = new THREE.OrbitControls(camera, renderer.domElement); //创建控件对象