Question

我正在制作一个与此shutterfly customization page上非常相似的应用程序，只是更加简洁。我真的很喜欢预览，但是我需要有关如何在预览中旋转对象的指导。目前，我正在使用THREE.OrbitControls()，但是我的对象无法看到，并且相机没有聚焦在实际对象上。我尝试着眼于对象，但出现错误。

编辑后添加：我的对象是.ply文件，因此我正在使用PLYLoader。

我找到了另一个我想做的使用鼠标事件的完美示例：https://jsfiddle.net/n6u6asza/1735/

这很聪明，但是我想使用three.js库而不是这些鼠标事件，因为删除控件时我的对象不断消失，并且如果我可以使代码更短，那将是理想的选择。我已经花了几个小时阅读有关OrbitControls（）的信息，但是我尝试过的所有操作都没有使对象聚焦，因此看来我只是在旋转对象。

控制代码：

controls = new THREE.OrbitControls( camera, renderer.domElement);
 controls.minPolarAngle = toRadians(0); //was trying to limit the object 
 controls.maxPolarAngle = toRadians(45); //movement with these
controls.enablePan = false;
controls.enableZoom = false;
//controls.enabled = false; 
controls.update();

我还具有基本的动画功能。我想稍后将自动旋转作为按钮选项实现。

function animate() {
    requestAnimationFrame( animate );
    controls.update();
    renderer.render( scene, camera );
}

回顾一下，我的问题是：旋转相机时如何聚焦在物体上？要么如何在不移动相机的情况下旋转对象？

编辑后添加我的目标代码：

var loader = new THREE.PLYLoader();
loader.load( 'sleeve.ply', function ( geometry ) {
     geometry.computeVertexNormals();
     var material = new THREE.MeshStandardMaterial( { color: 0xffffff } );
     sleeve = new THREE.Mesh( geometry, material );
     scene.add( sleeve );
});

Answer 1

要专注于某个对象，您应该使用https://threejs.org/docs/#api/en/core/Object3D.lookAt

object.lookAt(x,y,z) or object.lookAt(vector);

对于控件，您应该更改目标https://threejs.org/docs/#examples/controls/OrbitControls.target

controls.target = object;

或者，如果要旋转对象而不是围绕对象旋转摄影机，则可以修改变换控件。

https://threejs.org/examples/?q=control#misc_controls_transform

如何使用鼠标旋转3D对象而不用three.js将其旋转出屏幕？

1 个答案: