图形化开发（三）-Three.js之基本元素-scene场景 ——操作3d对象-添加、获取、删除、修改位置、修改大小、修改模型的转向

2024-01-02 12:49:58

图形化开发（三）-Three.js之基本元素-scene场景 ——操作3d对象-添加、获取、删除、修改位置、修改大小、修改模型的转向

基本元素

scene场景

介绍

场景是我们每个Three.js项目里面放置内容的容器，我们也可以拥有多个场景进行切换展示，你可以在场景内放置你的模型，灯光和照相机。还可以通过调整场景的位置，让场景内的所有内容都一起跟着调整位置。

THREE.Object3D

为了方便操作，Three.js将每个能够直接添加到场景内的对象都继承至一个基类-THREE.Object3D，以后我们将继承至这个基类的对象称为3d对象，判断一个对象是否是继承至THREE.Object3D，我们可以这么判断：

obj instanceof THREE.Object3D
//继承至返回 true 否则返回false

代码

    // renderer, camera, scene, geometry, material, mesh; 
    console.log('renderer', renderer instanceof THREE.Object3D);
    console.log('camera', camera instanceof THREE.Object3D);
    console.log('scene', scene instanceof THREE.Object3D);
    console.log('geometry', geometry instanceof THREE.Object3D);
    console.log('material', material instanceof THREE.Object3D);
    console.log('mesh', mesh instanceof THREE.Object3D);

效果

向场景内添加一个`3d`对象：

scene.add(mesh); //将网格添加到场景

这个方法不光能够在场景内使用，而且也可以将一个3d对象添加到另一个3d对象里面：

parent.add(child);

获取一个3d对象

object3D.name = "firstObj";
scene.add(object3D);

scene.getObjectByName("firstObj"); //返回第一个匹配的3d对象

删除一个3d对象

如果我们想隐藏一个3d对象，而不让它显示，可以通过设置它的visible的值：

mesh.visible = false; //设置为false，模型将不会被渲染到场景内

如果一个模型不再被使用到，需要彻底删除掉，我们可以使用remove方法进行删除：

scene.remove(mesh); //将一个模型从场景中删除

修改位置(3种方式)

单独设置

mesh.position.x = 3; //将模型的位置调整到x正轴距离原点为3的位置。
mesh.position.y += 5; //将模型的y轴位置以当前的位置向上移动5个单位。
mesh.position.z -= 6;

一次性设置所有

mesh.position.set(3, 5, -6);  //直接将模型的位置设置在x轴为3，y轴为5，z轴为-6的位置

Three.js的模型的位置属性是一个THREE.Vector3（三维向量）的对象（后期教程会讲解相关对象），我们可以直接重新赋值一个新的对象：

mesh.position = new THREE.Vector3(3, 5, -6); //上面的设置位置也可以通过这样设置。

修改大小

单独设置

mesh.scale.x = 2; //模型沿x轴放大一倍
mesh.scale.y = 0.5; //模型沿y轴缩小一倍
mesh.scale.z = 1; //模型沿z轴保持不变

第二种是使用set方法:

mesh.scale.set(2, 2, 2); //每个方向等比放大一倍

第三种方式，由于scale属性也是一个三维向量，我们可以通过赋值的方式重新修改：

mesh.scale = new THREE.Vector3(2, 2, 2); //每个方向都放大一倍

修改模型的转向

第一种方式是单独设置每个轴的旋转：

mesh.rotation.x = Math.PI; //模型沿x旋转180度
mesh.rotation.y = Math.PI * 2; //模型沿y轴旋转360度，跟没旋转一样的效果。。。
mesh.rotation.z = - Math.PI / 2; //模型沿z轴逆时针旋转90du

第二种方式就是使用set方法重新赋值：

mesh.rotation.set(Math.PI, 0, - Math.PI / 2); //旋转效果和第一种显示的效果相同

第三种方式，模型的rotation属性其实是一个欧拉角对象（THREE.Euler）欧拉角后面会讲解到，我们可以通过重新赋值一个欧拉角对象来实现旋转调整：

mesh.rotation = new THREE.Euler(Math.PI, 0, - Math.PI / 2, "YZX");

对象（THREE.Euler）欧拉角后面会讲解到，我们可以通过重新赋值一个欧拉角对象来实现旋转调整：

mesh.rotation = new THREE.Euler(Math.PI, 0, - Math.PI / 2, "YZX");

码农公寓