1. OrbitControls控制器

  • OrbitControls控制器的target属性的使用
  • OrbitControls控制场景的旋转

    2. target属性的使用,效果如下:

    4.gif

    2. 代码

    
    const btns = document.querySelectorAll('.btn')
    btns[0].onclick = function () {
    // target属性值
    controls.target.copy(greenMesh.position)
    // 动画实现效果
    // new TWEEN.Tween(controls.target).to(greenMesh.position).start()
    }

btns[1].onclick = function () {
// target属性值
controls.target.copy(redMesh.position)
}

## 3. 控制场景的旋转,效果如下:
![4.gif](https://s2.51cto.com/images/20211207/1638846598470063.gif)
## 4. 代码

// 启动旋转
btns[3].onclick = function() {
controls.autoRotate = true;
controls.autoRotateSpeed = 2
}

// 同时还需要执行controls.update()方法
function render() {
TWEEN.update()
renderer.render(scene, camera)
controls.update() // 这个代码不能少 否则场景旋转不起来
}
animate()

function animate() {
render()
requestAnimationFrame(animate)
}