首页 > 其他分享> 文章详细

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

2021-09-09 23:34:20 阅读：299 来源： 互联网

标签：模型 THREE scene Object3D 修改 mesh 图形化 3d

图形化开发（三）-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");

标签：模型,THREE,scene,Object3D,修改,mesh,图形化,3d
来源： https://blog.csdn.net/weixin_44867717/article/details/120212286

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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