当前位置:   article > 正文

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

threejs scene.add 位置

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

基本元素

scene场景
介绍

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

THREE.Object3D

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

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

代码

    // 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);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

效果

在这里插入图片描述

向场景内添加一个3d对象:
scene.add(mesh); //将网格添加到场景
  • 1

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

parent.add(child);
  • 1
获取一个3d对象
object3D.name = "firstObj";
scene.add(object3D);

scene.getObjectByName("firstObj"); //返回第一个匹配的3d对象
  • 1
  • 2
  • 3
  • 4
删除一个3d对象

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

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

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

scene.remove(mesh); //将一个模型从场景中删除
  • 1
修改位置(3种方式)

单独设置

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

一次性设置所有

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

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

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

单独设置

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

第二种是使用set方法:

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

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

mesh.scale = new THREE.Vector3(2, 2, 2); //每个方向都放大一倍
  • 1
修改模型的转向

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

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

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

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

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

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

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

mesh.rotation = new THREE.Euler(Math.PI, 0, - Math.PI / 2, "YZX"); 
  • 1
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/IT小白/article/detail/95905
推荐阅读
相关标签
  

闽ICP备14008679号