Javascript

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

本文主要是介绍图形化开发(三)-Three.js之基本元素-scene场景 ——操作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.js之基本元素-scene场景 ——操作3d对象-添加、获取、删除、修改位置、修改大小、修改模型的转向的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!