threejs Vector3 赋值给mesh threejs loader

Threejs github地址

“three”: “^0.142.0”,//npm install下载依赖包

OpenGl基础

Three.JS基础

一、FBXLoader.js 建筑模型加载器

<script src="./libs/FBXLoader.js"></script>

		const path = './models/shanghai.FBX';//写在类的外面
        var loader = new THREE.FBXLoader();
        loader.load( path, function ( object ) {//加载路径fbx文件
          object.traverse( function ( child ) {
                if ( child.isMesh ) {
                    child.castShadow = true;
                    child.receiveShadow = true;
                }
          });
          scene.add( object );//模型
        });

二、Blender 三维建模工具（开源免费）

3、添加vr效果四周顺序 右-左-上-下-后-前 side设置双面显示

三、three.js 三要素

场景（scene），相机（camera），渲染器（renderer）

1、场景（scene）

```
	var scene = new THREE.Scene()
```

2、摄像机（Camera）

使用OrthographicCamera相机对象的时候，three.js会按照正投影算法自动计算几何体的投影结果； 使用PerspectiveCamera相机对象的时候，three.js会按照透视投影算法自动计算几何体的投影结果。

1、正交相机（OrthographicCamera）

//正交摄像机OrthographicCamera( left, right, top, bottom, near, far )
        camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -1000, 5000 );

构造函数格式 OrthographicCamera( left, right, top, bottom, near, far )

参数（属性）	含义
left	渲染空间的左边界
right	渲染空间的右边界
top	渲染空间的上边界
bottom	渲染空间的下边界
near	从距离相机多远的位置开始渲染，一般情况会设置一个很小的值。 默认值0.1
far	距离相机多远的位置截止渲染，如果设置的值偏小小，会有部分场景看不到。 默认值1000
三维场景中坐标值不在三维空间中的网格模型不会被渲染出来，会被剪裁掉，比如你把上面代码中far参数的值从1000更改为420，你会发现长方体的一部分无法显示

注意
左右边界的距离与上下边界的距离比值与画布的渲染窗口的宽高比例要一致，否则三维模型的显示效果会被单方向不等比例拉伸

构造函数OrthographicCamera的参数(
left,right,top,bottom,near,far)本质上是对WebGL投影矩阵的封装，宽度width、高度height越大，三维模型顶点的位置坐标就会越大，超出可视区域的网格模型就会被剪裁掉，
不会再显示在屏幕上，大家还可以看到参数left与right、参数top与bottom互为相反数，这样做的目的是lookAt指向的对象能够显示在canvas画布的中间位置。

2、透视投影相机（PerspectiveCamera）

这一投影模式被用来模拟人眼所看到的景象，它是3D场景的渲染中使用得最普遍的投影模式

//透视投影照相机 PerspectiveCamera
        // camera = new THREE.PerspectiveCamera(45, sizes.width/sizes.height, 1,1000)
        camera.position.set(1500, 700, 121)
        scene.add(camera)

相机位置.posiiotn和.lookAt(相机拍摄目标位置)
camera.postion：相机所在的位置，默认为（0，0，0）
camera.lookAt：相机焦点方向，默认为Z轴负半轴方向
camera.up：坐标轴向上方向，默认（0，1，0）。PS：要设置在camera.lookAt前才有效

执行lookAt方法之前，需要先设置相机的位置属性

camera.position.set(200, 300, 200);
camera.lookAt(0,0,0);

PerspectiveCamera( fov, aspect, near, far )

参数	含义	默认值
fov	fov表示视场，所谓视场就是能够看到的角度范围，人的眼睛大约能够看到180度的视场，视角大小设置要根据具体应用，一般游戏会设置60~90度	45
aspect	aspect表示渲染窗口的长宽比，如果一个网页上只有一个全屏的canvas画布且画布上只有一个窗口，那么aspect的值就是网页窗口客户区的宽高比	window.innerWidth/window.innerHeight
near	near属性表示的是从距离相机多远的位置开始渲染，一般情况会设置一个很小的值	0.1
far	far属性表示的是距离相机多远的位置截止渲染，如果设置的值偏小小，会有部分场景看不到	1000

3 、立方相机（CubeCamera）

4、立体相机（StereoCamera）

3、渲染器（renderer）

var scene = new THREE.WebGLRenderer()
renderer.setClearColor(0x000000, 1.0)//颜色，透明度
renderer.setSize(window.innerWidth,window.innerHeight)
document.body.appendChild(renderer.domElement)

三、光源 Light

1、AmbientLight

环境光会均匀的照亮场景中的所有物体。
环境光不能用来投射阴影，因为它没有方向

AmbientLight( color : Integer, intensity : Float )

参数	描述	默认值
color	(参数可选）颜色的rgb数值	0xffffff
intensity	(参数可选)光照的强度	1

```
// 环境光
        const light = new THREE.AmbientLight(0x41648b); // soft white light
        scene.add(light);
```

2、PointLight 点光源

PointLight( color : Integer, intensity : Float, distance : Number, decay : Float )

参数	描述	默认值
color	(可选参数) 16进制表示光照颜色	0xffffff
intensity	(可选参数) 光照的强度	1
distance	这个距离表示从光源到光照强度为0的位置。 当设置为0时，光永远不会消失(距离无穷大)	0
decay	沿着光照距离的衰退量	缺省值为1，在 physically correct 模式中，decay = 2

//点光 (光照颜色(可选),光照强度(可选默认1),从光源到光照强度为0的位置,沿着光照距离的衰退量（越小光照亮范围越大）)
        var lightPoint = new THREE.PointLight( 0xff0000, .8, 2200, 1.6 ); 
        lightPoint.position.set( 0, 0, 0 ); 
        scene.add( lightPoint );

3、（SpotLight）聚光灯

聚光灯是从一个方向上的一个点发出，沿着一个圆锥体，它离光越远，它的尺寸就越大。

SpotLight( color : Integer, intensity : Float, distance : Float, angle : Radians, penumbra : Float, decay : Float )

参数	描述	默认值
color	(可选参数) 十六进制光照颜色	0xffffff (白色)
intensity	(可选参数) 光照强度	1
distance	从光源发出光的最大距离，其强度根据光源的距离线性衰减
angle	光线散射角度，最大为Math.PI/2
penumbra	聚光锥的半影衰减百分比。在0和1之间的值	0
decay	沿着光照距离的衰减量

var spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( 100, 1000, 100 );

spotLight.castShadow = true;

spotLight.shadow.mapSize.width = 1024;
spotLight.shadow.mapSize.height = 1024;

spotLight.shadow.camera.near = 500;
spotLight.shadow.camera.far = 4000;
spotLight.shadow.camera.fov = 30;

scene.add( spotLight );

4、DirectionalLight 平行光源

平行光是沿着特定方向发射的光,平行光可以投射阴影

DirectionalLight( color : Integer, intensity : Float )

参数	描述	默认值
color	(可选参数) 16进制表示光的颜色	0xffffff
intensity	(可选参数) 光照的强度	1

```
	// 平行光源
    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
    directionalLight.position.set(100, 100, 0);
    scene.add(directionalLight);
```

四、网格 Mesh

表示基于以三角形为polygon mesh（多边形网格）的物体的类。 同时也作为其他类的基类，例如SkinnedMesh。

// 创建地面几何体（长，宽）
            var planeGeometry = new THREE.PlaneGeometry(60, 20)
            // 给地面物体上色
            var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc })
            // 创建地面
            var plane = new THREE.Mesh(planeGeometry, planeMaterial)
            // 物体移动位置
            plane.rotation.x = -0.5 * Math.PI
            plane.position.x = 15
            plane.position.y = 0
            plane.position.z = 0
            plane.castShadow = true
            // 地板接受立方体的阴影
            plane.receiveShadow = true
            // 将地面添加到场景中
            scene.add(plane)

1、立方缓冲几何体（BoxBufferGeometry）

这是BoxGeometry中的BufferGeometry接口。

BoxBufferGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer)

参数	描述	默认值
width	X轴上面的宽度	1
height	Y轴上面的高度	1
depth	Z轴上面的深度	1
widthSegments	（可选）宽度的分段数	1
heightSegments	（可选）宽度的分段数	1
depthSegments	（可选）宽度的分段数	1

var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
var cube = new THREE.Mesh( geometry, material );
// 设定位置
cube.position.x = 0
cube.position.y = 4
cube.position.z = 0
scene.add( cube );

2、立方几何体（BoxGeometry）

BoxGeometry是四边形的原始几何类，它通常使用构造函数所提供的“width”、“height”、“depth”参数来创建立方体或者不规则四边形。

BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer)

参数	描述	默认值
width	X轴上面的宽度	1
height	Y轴上面的高度	1
depth	Z轴上面的深度	1
widthSegments	（可选）宽度的分段数	1
heightSegments	（可选）宽度的分段数	1
depthSegments	（可选）宽度的分段数	1

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

3、圆形缓冲几何体（CircleBufferGeometry）

这是CircleGeometry中的BufferGeometry接口

CircleBufferGeometry(radius : Float, segments : Integer, thetaStart : Float, thetaLength : Float)

参数	描述	默认值
radius	圆形的半径	1
segments	分段（三角面）的数量，最小值为3	8
thetaStart	第一个分段的起始角度	默认为0（three o’clock position）
thetaLength	圆形扇区的中心角，通常被称为“θ”（西塔）	默认值是2*Pi，这使其成为一个完整的圆

var geometry = new THREE.CircleBufferGeometry( 5, 32 );
var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
var circle = new THREE.Mesh( geometry, material );
scene.add( circle );

4、圆形几何体（CircleGeometry）

CircleGeometry是欧式几何的一个简单形状，它由围绕着一个中心点的三角分段的数量所构造，由给定的半径来延展。 同时它也可以用于创建规则多边形，其分段数量取决于该规则多边形的边数。

CircleGeometry(radius : Float, segments : Integer, thetaStart : Float, thetaLength : Float)

参数	描述	默认值
radius	圆形的半径	1
segments	分段（三角面）的数量，最小值为3	8
thetaStart	第一个分段的起始角度	默认为0。（three o’clock position）
thetaLength	圆形扇区的中心角，通常被称为“θ”（西塔）	默认值是2*Pi，这使其成为一个完整的圆

var geometry = new THREE.CircleGeometry( 5, 32 );
var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
var circle = new THREE.Mesh( geometry, material );
scene.add( circle );

5、圆锥缓冲几何体（ConeBufferGeometry）

这是ConeGeometry中的BufferGeometry接口。

ConeBufferGeometry(radius : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float)

参数	描述	默认值
radius	圆锥底部的半径	1
height	圆锥的高度	1
radialSegments	圆锥侧面周围的分段数	8
heightSegments	圆锥侧面沿着其高度的分段数	1
openEnded	一个Boolean值，指明该圆锥的底面是开放的还是封顶的	false，即其底面默认是封顶的
thetaStart	第一个分段的起始角度	默认为0。（three o’clock position）
thetaLength	圆锥底面圆扇区的中心角，通常被称为“θ”（西塔）	默认值是2*Pi，这使其成为一个完整的圆锥

var geometry = new THREE.ConeBufferGeometry( 5, 20, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var cone = new THREE.Mesh( geometry, material );
scene.add( cone );

6、圆锥几何体（ConeGeometry）

一个用于生成圆锥几何体的类。

ConeGeometry(radius : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float)

参数	描述	默认值
radius	圆锥底部的半径	1
height	圆锥的高度	1
radialSegments	圆锥侧面周围的分段数	8
heightSegments	圆锥侧面沿着其高度的分段数	1
openEnded	一个Boolean值，指明该圆锥的底面是开放的还是封顶的	false，即其底面默认是封顶的
thetaStart	第一个分段的起始角度	默认为0。（three o’clock position）
thetaLength	圆锥底面圆扇区的中心角，通常被称为“θ”（西塔）	默认值是2*Pi，这使其成为一个完整的圆锥

var geometry = new THREE.ConeGeometry( 5, 20, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var cone = new THREE.Mesh( geometry, material );
scene.add( cone );

7、圆柱缓冲几何体（CylinderBufferGeometry）

这是CylinderGeometry中的BufferGeometry接口。

CylinderBufferGeometry(radiusTop : Float, radiusBottom : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float)

参数	描述	默认值
radiusTop	圆柱的顶部半径	1
radiusBottom	圆柱的底部半径	1
height	圆柱的高度	1
radialSegments	圆柱侧面周围的分段数	8
heightSegments	圆柱侧面沿着其高度的分段数	1
openEnded	一个Boolean值，指明该圆锥的底面是开放的还是封顶的	false，即其底面默认是封顶的
thetaStart	第一个分段的起始角度	默认为0。（three o’clock position）
thetaLength	圆柱底面圆扇区的中心角，通常被称为“θ”（西塔）	默认值是2*Pi，这使其成为一个完整的圆柱

var geometry = new THREE.CylinderBufferGeometry( 5, 5, 20, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var cylinder = new THREE.Mesh( geometry, material );
scene.add( cylinder );

8、圆柱几何体（CylinderGeometry）

一个用于生成圆柱几何体的类

CylinderGeometry(radiusTop : Float, radiusBottom : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float)

参数	描述	默认值
radiusTop	圆柱的顶部半径	1
radiusBottom	圆柱的底部半径	1
height	圆柱的高度	1
radialSegments	圆柱侧面周围的分段数	8
heightSegments	圆柱侧面沿着其高度的分段数	1
openEnded	一个Boolean值，指明该圆锥的底面是开放的还是封顶的	false，即其底面默认是封顶的
thetaStart	第一个分段的起始角度	默认为0。（three o’clock position）
thetaLength	圆柱底面圆扇区的中心角，通常被称为“θ”（西塔）	默认值是2*Pi，这使其成为一个完整的圆柱

var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var cylinder = new THREE.Mesh( geometry, material );
scene.add( cylinder );

9、十二面缓冲几何体（DodecahedronBufferGeometry）

一个用于创建十二面几何体的类

DodecahedronBufferGeometry(radius : Float, detail : Integer)

参数	描述	默认值
radius	十二面体的半径	1
detail	将这个值设为一个大于0的数将会为它增加一些顶点，使其不再是一个十二面体	0

10、十二面几何体（DodecahedronGeometry）

用于生成十二面体几何图形的类。

DodecahedronGeometry(radius : Float, detail : Integer)

参数	描述	默认值
radius	十二面体的半径	1
detail	将这个值设为一个大于0的数将会为它增加一些顶点，使其不再是一个十二面体	0

var geometry = new THREE.DodecahedronGeometry( 2.5, 0 );
    var material = new THREE.MeshBasicMaterial( {color: 0x8feca3} );
    var dode = new THREE.Mesh( geometry, material );
    dode.position.x = 10
    dode.position.y = 0
    dode.position.z = 0
    scene.add( dode );

11、边缘几何体（EdgesGeometry）

这可以作为一个辅助对象来查看Geometry的边缘。

EdgesGeometry( geometry : Geometry, thresholdAngle : Integer )

参数	描述	默认值
geometry	任何一个几何体对象
thresholdAngle	仅当相邻面的法线之间的角度（单位为角度）超过这个值时，才会渲染边缘	1

var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
var edges = new THREE.EdgesGeometry( geometry );
var line = new THREE.LineSegments( edges, new THREE.LineBasicMaterial( { color: 0xffffff } ) );
scene.add( line );

12、挤压缓冲几何体（ExtrudeBufferGeometry）

从一个形状路径中，挤压出一个BufferGeometry。

ExtrudeBufferGeometry(shapes : Array, options : Object)

参数	描述	默认值
shapes	形状或者一个包含形状的数组
options	一个包含有下列参数的对象

options中的参数	描述	默认值
curveSegments	int，曲线上点的数量	12
steps	int，用于沿着挤出样条的深度细分的点的数量	1
depth	float，挤出的形状的深度	100
bevelEnabled	bool，对挤出的形状应用是否斜角	true
bevelThickness	float，设置原始形状上斜角的厚度	6
bevelSize	float。斜角与原始形状轮廓之间的延伸距离	默认值为bevelThickness-2
bevelOffset	float. 与倒角开始的形状轮廓的距离	0
bevelSegments	int。斜角的分段层数	3
extrudePath	THREE.Curve对象。一条沿着被挤出形状的三维样条线
UVGenerator	Object。提供了UV生成器函数的对象
该对象将一个二维形状挤出为一个三维几何体。

当使用这个几何体创建Mesh的时候，如果你希望分别对它的表面和它挤出的侧面使用单独的材质，你可以使用一个材质数组。 第一个材质将用于其表面；第二个材质则将用于其挤压出的侧面。

var length = 12, width = 8;

var shape = new THREE.Shape();
shape.moveTo( 0,0 );
shape.lineTo( 0, width );
shape.lineTo( length, width );
shape.lineTo( length, 0 );
shape.lineTo( 0, 0 );

var extrudeSettings = {
	steps: 2,
	depth: 16,
	bevelEnabled: true,
	bevelThickness: 1,
	bevelSize: 1,
	bevelOffset: 0,
	bevelSegments: 1
};

var geometry = new THREE.ExtrudeBufferGeometry( shape, extrudeSettings );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var mesh = new THREE.Mesh( geometry, material ) ;
scene.add( mesh );

13、挤压几何体（ExtrudeGeometry）

从一条形状路径中，挤压出一个Geometry。

ExtrudeGeometry(shapes : Array, options : Object)

参数	描述	默认值
shapes	形状或者一个包含形状的数组
options	一个包含有下列参数的对象

options中的参数	描述	默认值
curveSegments	int，曲线上点的数量	12
steps	int，用于沿着挤出样条的深度细分的点的数量	为1
depth	float，挤出的形状的深度	100
bevelEnabled	bool，对挤出的形状应用是否斜角	true
bevelThickness	float，设置原始形状上斜角的厚度	6
bevelSize	float。斜角与原始形状轮廓之间的延伸距离	bevelThickness-2
bevelOffset	float. 与倒角开始的形状轮廓的距离	0
bevelSegments	int。斜角的分段层数	3
extrudePath	THREE.Curve对象。一条沿着被挤出形状的三维样条线
UVGenerator	Object。提供了UV生成器函数的对象
该对象将一个二维形状挤出为一个三维几何体。

当使用这个几何体创建Mesh的时候，如果你希望分别对它的表面和它挤出的侧面使用单独的材质，你可以使用一个材质数组。 第一个材质将用于其表面；第二个材质则将用于其挤压出的侧面。

var length = 12, width = 8;

var shape = new THREE.Shape();
shape.moveTo( 0,0 );
shape.lineTo( 0, width );
shape.lineTo( length, width );
shape.lineTo( length, 0 );
shape.lineTo( 0, 0 );

var extrudeSettings = {
	steps: 2,
	depth: 16,
	bevelEnabled: true,
	bevelThickness: 1,
	bevelSize: 1,
	bevelOffset: 0,
	bevelSegments: 1
};

var geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var mesh = new THREE.Mesh( geometry, material ) ;
scene.add( mesh );

14、车削缓冲几何体（LatheBufferGeometry）

这是LatheGeometry中的BufferGeometry接口

LatheBufferGeometry(points : Array, segments : Integer, phiStart : Float, phiLength : Float)

参数	描述	默认值
points	一个Vector2对象数组。每个点的X坐标必须大于0
segments	要生成的车削几何体圆周分段的数量	12
phiStart	以弧度表示的起始角度	0
phiLength	车削部分的弧度（0-2PI）范围，2PI将是一个完全闭合的、完整的车削几何体，小于2PI是部分的车削	2PI

基于参数创建一个LatheGeometry。

var points = [];
for ( var i = 0; i < 10; i ++ ) {
	points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * 10 + 5, ( i - 5 ) * 2 ) );
}
var geometry = new THREE.LatheBufferGeometry( points );
var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
var lathe = new THREE.Mesh( geometry, material );
scene.add( lathe );

15、参数化缓冲几何体（ParametricBufferGeometry）

生成由参数表示其表面的几何体。

ParametricBufferGeometry(func : Function, slices : Integer, stacks : Integer)

参数	描述	默认值
func	一种函数，它接受0到1之间的u和v值，并修改第三个矢量3
slices	用于参数化函数的切片计数
stacks	用于参数化函数的堆栈计数

var geometry = new THREE.ParametricBufferGeometry( THREE.ParametricGeometries.klein, 25, 25 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var klein = new THREE.Mesh( geometry, material );
scene.add( klein );

16、文本缓冲几何体（TextBufferGeometry）

一个用于将文本生成为单一的几何体的类。 它是由一串给定的文本，以及由加载的Font（字体）和该几何体ExtrudeGeometry父类中的设置所组成的参数来构造的。 请参阅Font、FontLoader和Creating_Text页面来查看更多详细信息。

TextBufferGeometry(text : String, parameters : Object)

参数	描述	默认值
text	将要显示的文本
parameters	包含有下列参数的对象

parameters 中的参数	描述	默认值
font	THREE.Font的实例
size	Float。字体大小	100
height	Float。挤出文本的厚度	50
curveSegments	Integer。（表示文本的）曲线上点的数量	12
bevelEnabled	Boolean。是否开启斜角	false
bevelThickness	Float。文本上斜角的深度	20
bevelSize	Float。斜角与原始文本轮廓之间的延伸距离	8
bevelSegments	Integer。斜角的分段数	3

var loader = new THREE.FontLoader();

loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {

	var geometry = new THREE.TextBufferGeometry( 'Hello three.js!', {
		font: font,
		size: 80,
		height: 5,
		curveSegments: 12,
		bevelEnabled: true,
		bevelThickness: 10,
		bevelSize: 8,
		bevelSegments: 5
	} );
} );

五、材质texture

需求：让方块重复排放并添加到地板材质中

材质加载器： loader = new THREE.TextureLoader()

let palneTexture = (new THREE.TextureLoader()).load('/imgs/floor.png')
palneTexture.magFilter = THREE.NearestFilter // 默认THREE.LinearFilter
palneTexture.wrapS = THREE.RepeatWrapping
palneTexture.wrapT = THREE.RepeatWrapping
palneTexture.repeat.set(10, 10) // xy各重复10次

let plane = new THREE.Mesh(
    new THREE.PlaneGeometry(3, 3),
    new THREE.MeshBasicMaterial({
        color: 0xdddddd,
        side: THREE.DoubleSide,//双面赋材质
        map: palneTexture // 添加材质
    })
)
plane.rotation.x = -Math.PI/2

scene.add( plane)

六、添加投影

1. renderer开启阴影
2. 平面接收阴影
3. 设置物体投射阴影
4. 给光线设置投射阴影，并设置宽高，让阴影开起来更圆滑

/**
* 添加阴影 三种灯光支持阴影directionLight/SpotLight/PointLight
* 1.renderer.shadowMap.enabled = true
* 2.plane.receiveShadow = true//平面接收阴影
* 3.sphere.castShadow = true//照射物体
* 4.directLight.castShadow = true//光线
* 5.directLight.shadow.mapSize.width = 1024*2//设置宽高使阴影光滑
   directLight.shadow.mapSize.height = 1024*2
*/

七、绘制云朵

/**云朵 */
cloudGroup = new THREE.Group()
let cloudMaterial = new THREE.MeshBasicMaterial({color: 0xffffff})
let cloud1 = new THREE.Mesh(new THREE.SphereGeometry(.6),cloudMaterial)
let cloud2 = new THREE.Mesh(new THREE.SphereGeometry(.8),cloudMaterial)
let cloud3 = new THREE.Mesh(new THREE.SphereGeometry(1),cloudMaterial)
let cloud4 = new THREE.Mesh(new THREE.SphereGeometry(.7),cloudMaterial)
let cloud5 = new THREE.Mesh(new THREE.SphereGeometry(.5),cloudMaterial)
cloud1.position.set(-1.6, -0.05, 0)
cloud2.position.set(-1, -0.1, 0)
cloud4.position.set(1, 0, 0)
cloud5.position.set(1.4, 0, 0)
cloudGroup.add(cloud1, cloud2, cloud3, cloud4, cloud5)
cloudGroup.position.set(0, 3, -groundH/2-2)

scene.add( cloudGroup)

render中给云朵加漂浮动画

let clock = new THREE.Clock()
let time = clock.getElapsedTime()
cloudGroup.position.x = Math.sin(time*0.1) * 7

八、绘制小树，并克隆两排

/**树group */
treeGroup = new THREE.Group()
let leftTreeGroup = new THREE.Group()
let oneTreeGroup = new THREE.Group()

let treeTop = new THREE.Mesh(
   new THREE.ConeGeometry(0.2, 0.2, 5),
   new THREE.MeshStandardMaterial({color: 0x64a525})
)
let treeMiddle = new THREE.Mesh(
   new THREE.ConeGeometry(0.3, 0.3, 5),
   new THREE.MeshStandardMaterial({color: 0x64a525})
)
let treeBottom = new THREE.Mesh(//圆柱树干
   new THREE.CylinderGeometry(0.05, 0.05, 0.4),
   new THREE.MeshStandardMaterial({color: 0x7a5753})
)
let treeShadow = new THREE.Mesh(//树影子
   new THREE.CircleGeometry(0.3, 5),
   new THREE.MeshStandardMaterial({color: 0x3f662d})
)
treeTop.castShadow = true
treeMiddle.castShadow = true
treeBottom.castShadow = true

treeTop.position.y = 0.55
treeMiddle.position.y = 0.4
treeBottom.position.y = 0.2

treeShadow.rotation.x = -Math.PI/2
oneTreeGroup.add(treeTop, treeMiddle, treeBottom)
// oneTreeGroup.add(treeTop, treeMiddle, treeBottom, treeShadow)
oneTreeGroup.scale.set(.5, .5, .5)

let treeNum = 20
for(let i = 0; i<treeNum; i++){
   let group = oneTreeGroup.clone()
   group.position.z = -groundH/2 + i *0.5
   group.position.x = -1.2
   leftTreeGroup.add(group)
}
let rightTreeGroup = leftTreeGroup.clone()
rightTreeGroup.position.x = 1.2*2


treeGroup.add(leftTreeGroup, rightTreeGroup)
scene.add( treeGroup)