济南行知做网站,福州网站建设教程视频,wordpress 列表模板,深圳网站创建公司在threejs开发中#xff0c;不可避免的需要对三维场景进行交互#xff0c;例如对模型进行旋转#xff0c;缩放#xff0c;平移等操作。接下来#xff0c;我们就聊一聊如何进行三维场景的交互。控制的对象是谁?在三维的世界中#xff0c;如果想达到场景的TRS(translate、…在threejs开发中不可避免的需要对三维场景进行交互例如对模型进行旋转缩放平移等操作。接下来我们就聊一聊如何进行三维场景的交互。控制的对象是谁?在三维的世界中如果想达到场景的TRS(translate、rotate、scale)操作我们其实有两种办法来做到。一种是对模型本身进行TRS操作通过改变模型的属性达到视觉上的效果。第二种是对相机进行操作把相机拉远模型自然缩小了把相机移动模型自然就向相反方向移动了。两种方式各自有各自的特点和使用场景。操作模型我们可以控制每个模型的TRS比如在一个家装场景中我们要对某个家具进行拖动缩放。操作相机我们可以对整个场景进行操作比如拉远相机查看场景全局外观。两种方式经常也会配合在一起使用。操作模型操作模型首先选中需要操作的模型。这部分需要用到我们之前介绍过的拾取操作首先拾取都某个三维模型作为选中对象。然后我们才能对选中对象进行操作。第二部分是鼠标及手势的输入及判断。例如我们需要使用鼠标的滚轮触发缩放操作或者触屏双指进行缩放操作。最后就是进行模型的属性修改在threejs中一般使用position,rotate,scale来达到修改模型外观的目的。我们从最简单的模型缩放来具体讲讲如何实现。缩放renderer.domElement.addEventListener(mousewheel, (event) {var scaleFactor 0.001; //鼠标滚轮控制的缩放强度系数var scale 1 event.wheelDelta * scaleFactor; //缩放倍数cube.scale.multiplyScalar(scale)})平移对于平移来说我们需要设置一个参考面让这个模型在这个参考面上进行平移。一般来说我们常见的平移方式有固定参考面比如地面、墙面。除此以外还有就是相机朝向的参考面。如图所示我们以mesh的中心点为面上的一个点然后以相机的朝向为法向量可以创建一个平面。整个鼠标的拖动都应该在这个面上。let dragTarget null; //拖拽对象let raycaster new THREE.Raycaster(); //射线let mouse new THREE.Vector2(); //鼠标位置let hit new THREE.Vector3(); //射线在参考面上的拾取点let plane new THREE.Plane(); //拖拽参考面plane.setFromNormalAndCoplanarPoint(camera.getWorldDirection(), cube.position);//let helper new THREE.PlaneHelper( plane, 50, 0xffff00 ); //拖拽参考面的可视化帮助类//scene.add( helper );//添加拖拽参考面的可视化帮助类到场景renderer.domElement.addEventListener(mousedown, (event) {mouse.x (event.clientX / window.innerWidth) * 2 - 1;mouse.y -(event.clientY / window.innerHeight) * 2 1;raycaster.setFromCamera(mouse, camera);let intersects raycaster.intersectObjects([cube], true);if (intersects.length 0) {dragTarget intersects[0].object;}})renderer.domElement.addEventListener(mousemove, (event) {if (dragTarget) {mouse.x (event.clientX / window.innerWidth) * 2 - 1;mouse.y -(event.clientY / window.innerHeight) * 2 1;raycaster.setFromCamera(mouse, camera);raycaster.ray.intersectPlane(plane, hit);if (hit) {cube.position.copy(hit);console.log(hit)}}})renderer.domElement.addEventListener(mouseup, (event) {dragTarget null;})旋转一般来说我们旋转物体都是沿着某个轴的比如Y轴。我们以鼠标X移动的增量作为参数沿着模型Y轴方向旋转。let lastX null;renderer.domElement.addEventListener(mousedown, (event) {lastX event.clientX;})renderer.domElement.addEventListener(mousemove, (event) {if (lastX) {let delta event.clientX - lastXcube.rotateY(delta * 0.01)lastX event.clientX;}})renderer.domElement.addEventListener(mouseup, (event) {lastX null;})操作相机threejs为我们提供了一系列的相机操作控件。对于相机控制最常用的就是OrbitControls控件(一般放在threejs的examples/jsm/controls/OrbitControls.js)。使用起来也比较简单。只需importy引入文件然后new出一个控件即可。这里注意就是如果copy文件到项目目录需要手动修改js文件中关于threejs的引用因为控件中的threejs是引用的是编译出来的文件相对地址不是通过npm安装的地址。import {OrbitControls} from ../lib/controls/OrbitControlsconst controls new OrbitControls(camera, renderer.domElement);控件提供了鼠标左键旋转右键平移滚轮缩放的功能并且支持手势操作。以上就是对threejs中三维场景操作控制的说明后续我们将继续讲讲如何在3d场景中加入一些动画。
