three.js加载3d模型_threejs中的三维场景操作

本文探讨了在three.js开发中如何进行三维场景的交互,包括模型的旋转、缩放和平移,以及相机的操作。介绍了通过模型属性修改和相机控制来实现场景的TRS操作,并详细讲解了OrbitControls.js在相机控制中的应用。
摘要由CSDN通过智能技术生成

6c24343e9c8b0d0b4dc3a3da030f9310.png

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

平移

对于平移来说,我们需要设置一个参考面,让这个模型在这个参考面上进行平移。一般来说我们常见的平移方式有固定参考面,比如地面、墙面。除此以外还有就是相机朝向的参考面。

766b01e27089e1e185e12d6b9408a04f.png

如图所示,我们以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 - lastX
        cube.rotateY(delta * 0.01)
        lastX = event.clientX;
    }

})

renderer.domElement.addEventListener("mouseup", (event) => {
    lastX = null;
})

a6702ae5b3e6993071dc68268b18c974.gif

操作相机

threejs为我们提供了一系列的相机操作控件。对于相机控制,最常用的就是OrbitControls控件(一般放在threejs的examples/jsm/controls/OrbitControls.js)。使用起来也比较简单。只需importy引入文件,然后new出一个控件即可。这里注意就是如果copy文件到项目目录,需要手动修改js文件中关于threejs的引用,因为控件中的threejs是引用的是编译出来的文件相对地址,不是通过npm安装的地址。

import {
    OrbitControls
} from '../lib/controls/OrbitControls'

const controls = new OrbitControls(camera, renderer.domElement);

控件提供了鼠标左键旋转,右键平移,滚轮缩放的功能,并且支持手势操作。

以上就是对threejs中三维场景操作控制的说明,后续我们将继续讲讲如何在3d场景中加入一些动画。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值