ThreeJS-场景

这是我参与8月更文挑战的第26天，活动详情查看：8月更文挑战

在现实生活场景中，我们肉眼所见到的事物都是基于一些条件的，若是没有光，那么周围的一切都是黑暗的

在ThreeJS中想要将内容放到页面中，也需要一些条件，其中有三个基本元素：场景、渲染器和相机，一切都绕不开这三个基本元素

接下来跟随本文了解场景的一些概念

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

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

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

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

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

parent.add(child);

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

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

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

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

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

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

单独设置

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");