#yyds干货盘点#three.js中OrbitControls控制器的使用 _的使用

【#yyds干货盘点#three.js中OrbitControls控制器的使用】落花踏尽游何处，笑入胡姬酒肆中。这篇文章主要讲述#yyds干货盘点#three.js中OrbitControls控制器的使用相关的知识，希望能为你提供帮助。
1. OrbitControls控制器

OrbitControls控制器的target属性的使用
OrbitControls控制场景的旋转 2. target属性的使用，效果如下:
文章图片

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)
}