【ThreeJS】 02 - Scene 场景

模型: Mesh Line LineSegment Sprite 等模型所有的父对象都是Object3D都可以添加到场景中。

1. 设置场景的背景

1. 场景的背景可以是一张图片、一种颜色、一个图形、一个纹理等。

2. 为场景设置一种颜色：

this.scene.background = new THREE.Color(0x0000ff)

3. 为场景设置一个纹理：

let bgTextureLoader = new TextureLoader()
this.scene.background = bgTextureLoader.load(require('../../assets/girl.jpg'))

2. Mesh网格的介绍和使用

Mesh 继承于Object3D；

2.1 Mesh主要有两部分组成：

1. Geometry：几何体形状、立方体、球体、以及各种不规则的形状；

2. Material：光照反射和折射等各种信息，物体的本身物理性质决定。

2.2 Line 线

1. 创建线，线是连续的。
2. 使用 new Float32BufferAttribute 创建一个形状 ，这里的数组中每三个数为一个点。一个点中的三个数分别代表的首 x ,y ,z。

       /** 创建一个线段和线 线段和线的区别 线段不是连续的 线是连续的 **/
        let lineGeometry = new BufferGeometry()
        // 创建线段时数组中每三个数表示为一个点
        lineGeometry.setAttribute("position" , new Float32BufferAttribute([-10,-10,-10,8,8,8,15,15,15],3))
        let line = new Line(lineGeometry , new LineBasicMaterial({color:0xff0000}))
        this.scene.add(line)

2.3 LineSegment 线段

1. 线段不是连续的，如果要做到连续需要第一条线的终点和第二条线的起点一致。

线段要做到连续

        /**
           * 创建线段对象 创建线段时 每两个点位一个线段 不是连续的 如果要做到连续需要第一条线的终点和第二条线的起点一致
       */
        let lineSegmentGeo = new BufferGeometry()
        lineSegmentGeo.setAttribute("position" , new Float32BufferAttribute([-30,-10,-10,-20,8,8,-20,8,8,-30,15,15],3))
        let lineSeg = new LineSegments(lineSegmentGeo,new LineBasicMaterial({color:0x00ff00}))
        this.scene.add(lineSeg)

2.4 Sprite 精灵

1. 创建精灵时不需要创建形状因为精灵默认就是一个正方形。

精灵

          // 创建纹理加载器
        let textureLoader = new TextureLoader()

        let sprite = new Sprite(new SpriteMaterial({
          map: textureLoader.load(require('../../assets/girl.jpg')),
          // sizeAttenuation:false // false的话 不随着相机拉远而变小
        }))

        // 将精灵添加到场景中
         this.scene.add(sprite)

2.5 Points 点云

1. 点云就是由一组精灵组成的:每个点显示一个精灵

点云

        /**
         * 创建点云
    */
    let pointGeometry = new BufferGeometry()
        // 点云就是很多精灵组成的 一个点代表一个精灵的位置
        pointGeometry.setAttribute('position',new Float32BufferAttribute([-30,-10,-10,-20,8,8,-30,15,15],3))
        // 创建点云
        let points = new Points(pointGeometry, new PointsMaterial({
          map:textureLoader.load(require('../../assets/girl.jpg'))
        }))

        this.scene.add(points)

3. 位置、缩放、旋转

只有继承了Object3D的对象都是可以进行方位变换的。

3.1 位置

1. 可以通过物体的 position属性设置物体的位置。

2. 位置写法有两种一种是分开的写法，一种是组合的写法:

         // 5. 创建一个简单的形状
        let  boxGeometry = new BoxGeometry(10,10,10)
        // 创建材质
        let boxMaterial = new MeshPhongMaterial()
        // 根据形状和材质创建一个网格
        let boxMesh = new Mesh(boxGeometry,boxMaterial)
        /** 对形状进行方位的改变
         *  1. 平移
         *  2. 旋转
         *  3. 缩放
         * **/
        // 1. 平移
        // boxMesh.position.x = 10
        // boxMesh.position.y = 10
        // boxMesh.position.z = 10

        boxMesh.position.set(10,10,20)

3.2 缩放

1. 物体可以通过scale属性改变物体的大小。

2. 对物体进行缩放也可以有两种写法，一种分开的写法和组合写法：

      // 3. 缩放
       boxMesh.scale.x = 1
       boxMesh.scale.y = 0.5
       boxMesh.scale.z = 2
       // boxMesh.scale.set(1,2,3)

3.3 旋转

1. 物体通过 rotation属性可以对物体进行绕x 、 y 、 z轴进行旋转操作。

2. 物体除了绕 x 、 y、 z 轴旋转还可以绕任意轴旋转。 使用rotateOnAxis方法可以实现。传递一个向量的方式让物绕任意指定的轴进行旋转，但是这个任意轴需要保证旋转轴的长度为1，否则物体就会发生变形。保证任意旋转轴的长度为1使用 normalize方法可以实现。

      // 2. 旋转 绕 x y z 轴旋转 或者 任意轴旋转
        // boxMesh.rotation.x = Math.PI / 4 //  ( Math.PI 代表 180 度 π )
        // boxMesh.rotation.y = Math.PI / 3 //  ( Math.PI 代表 180 度 π )
        // 可以组合写法
        // boxMesh.rotation.set(0,0,Math.PI / 3)

        //  可以沿任意轴旋转
        let axis = new Vector3(15,15,15)
        axis.normalize() // 需要进行单位话 保证旋转轴的长度为1 否则就会产生变形
        boxMesh.rotateOnAxis(axis , Math.PI / 3)