控制器

轨道控制器

导入

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

创建

const controls = new OrbitControls(camera, renderer.domElement);

调用

controls.update();

  
  scene = new THREE.Scene();

  const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );

  camera.position.set(0, 0, 10);
  scene.add(camera);

  const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
  const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
  const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
  scene.add(cube);

  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);

  document.body.appendChild(renderer.domElement);

  renderer.render(scene, camera);

  // 创建控制器
  const controls = new OrbitControls(camera, renderer.domElement);

  function animate() {
    controls.update();
    
    requestAnimationFrame( animate );

    renderer.render( scene, camera );
  }

  animate();