ThreeJs控制器controls

threeJs的控制器有多种，本文主要讲述的是常用的OrbitControls控制器

在js代码中引入OrbitControls

 初始化OrbitControls，需要传入两个参数一个是相机camera另一个是渲染器的dom元素

 案例 可拖拽，平移和缩放的立方体

import * as THREE from 'three'

import {

  OrbitControls

} from 'three/examples/jsm/controls/OrbitControls'

const w = window.innerWidth

const h = window.innerHeight

const scene = new THREE.Scene()

const geometry = new THREE.BoxGeometry(1, 1, 1)

const material = new THREE.MeshNormalMaterial()

const cube = new THREE.Mesh(geometry, material)

scene.add(cube)

const camera = new THREE.PerspectiveCamera(75, w / h, 0.1, 1000)

camera.position.set(0, 0, 5)

camera.lookAt(0, 0, 0)

const renderer = new THREE.WebGLRenderer()

renderer.setSize(w, h)

renderer.render(scene, camera)

document.body.append(renderer.domElement)

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

function animation() {

  renderer.render(scene, camera)

  controls.update()

  requestAnimationFrame(animation)

}

animation()