Three.js+OrbitControls.js实现缩放旋转

OrbitControls.js实现canvas区域中物体的缩放旋转
通过对camera进行设置实现

function initCamera(){
//添加一个透视相机
camera = new THREE.PerspectiveCamera(15,
window.innerWidth/window.innerHeight, 1, 1000);
camera.position.z=500;//设置相机位置
camera.position.x=200;
camera.lookAt(new THREE.Vector3(0,0,0));//让相机指向原点
controls = new THREE.OrbitControls(camera,renderer.domElement);
controls.target = new THREE.Vector3(0,0,0);
controls.autoRotate = false;
clock = new THREE.Clock();
}
一开始只写了 controls = new THREE.OrbitControls(camera,renderer.domElement);
这一条语句,发现并不能实现,后来找了好多案例,终于尝试到了一个好用的

在上述基础上添加三条代码
controls.target = new THREE.Vector3(0,0,0);
controls.autoRotate = false;
clock = new THREE.Clock();

然后对render函数进行设置
function render(){
delta = clock.getDelta();
controls.update(delta);
requestAnimationFrame(render);

renderer.render(scene, camera);
}
成功!!!

猜你喜欢

转载自blog.csdn.net/weixin_43854888/article/details/86140473