threejs学习笔记（仅供学习参考）

已于 2023-05-24 16:42:59 修改
阅读量1.8k 收藏 7
点赞数 2
分类专栏： threejs 文章标签： three.js
于 2022-01-13 16:21:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/c_qianxia5040/article/details/122453572
版权

demo
物联网粮仓3D可视化案例 沙发在线预览 服装在线预览 洗衣机在线交互预览 中国GDP在线预览 蛋白质结构可视化 分子结构可视化
更多案例

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会按照透视投影算法自动计算几何体的投影结果。

OrthographicCamera和PerspectiveCamera的区别 参考文档：讲的比较详细，图文结合

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 )

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

参数描述默认值
widthX轴上面的宽度1
heightY轴上面的高度1
depthZ轴上面的深度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)

参数描述默认值
widthX轴上面的宽度1
heightY轴上面的高度1
depthZ轴上面的深度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分段（三角面）的数量，最小值为38
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分段（三角面）的数量，最小值为38
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中的参数描述默认值
curveSegmentsint，曲线上点的数量12
stepsint，用于沿着挤出样条的深度细分的点的数量1
depthfloat，挤出的形状的深度100
bevelEnabledbool，对挤出的形状应用是否斜角true
bevelThicknessfloat，设置原始形状上斜角的厚度6
bevelSizefloat。斜角与原始形状轮廓之间的延伸距离默认值为bevelThickness-2
bevelOffsetfloat. 与倒角开始的形状轮廓的距离0
bevelSegmentsint。斜角的分段层数3
extrudePathTHREE.Curve对象。一条沿着被挤出形状的三维样条线
UVGeneratorObject。提供了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中的参数描述默认值
curveSegmentsint，曲线上点的数量12
stepsint，用于沿着挤出样条的深度细分的点的数量为1
depthfloat，挤出的形状的深度100
bevelEnabledbool，对挤出的形状应用是否斜角true
bevelThicknessfloat，设置原始形状上斜角的厚度6
bevelSizefloat。斜角与原始形状轮廓之间的延伸距离bevelThickness-2
bevelOffsetfloat. 与倒角开始的形状轮廓的距离0
bevelSegmentsint。斜角的分段层数3
extrudePathTHREE.Curve对象。一条沿着被挤出形状的三维样条线
UVGeneratorObject。提供了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 中的参数描述默认值
fontTHREE.Font的实例
sizeFloat。字体大小100
heightFloat。挤出文本的厚度50
curveSegmentsInteger。（表示文本的）曲线上点的数量12
bevelEnabledBoolean。是否开启斜角false
bevelThicknessFloat。文本上斜角的深度20
bevelSizeFloat。斜角与原始文本轮廓之间的延伸距离8
bevelSegmentsInteger。斜角的分段数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)

在这里插入图片描述
在这里插入图片描述
跳一跳完整案例找到了一个demo，上传至资源里了

爱吃烧鸭蛋的叶安
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
THREEJS实战6_加载fbx模型
编程知识分享，主打前端
04-19 4万+
加载fbx模型原理 3D模型 模型由面构成，面包括三角形、四边形与多边形，轻量级的优秀模型面数一般都是三角形，面又由多条边构成，边由多个顶点构成。 这里我做了一个简单模型 烘培导出fbx模式 ok，没问题！ threejs加载fbx原理 顶点数据 顶点位置 顶点颜色 顶点法向量数据 geometry.attributes position color normal 顶点法向量与...
Three.js加载FBX并解析骨骼动画
热门推荐
u014291990的博客
12-03 1万+
加载FBX并解析骨骼动画 本文是Three.js电子书的14.4节 通过Threejs先加载一个.FBX格式的三维模型文件，然后解析该文件中的骨骼动画信息。 加载器FBXLoader.js 引入FBX加载器相关文件 <!-- 引入fbx模型加载库FBXLoader --> <script src="http://www.yanhuangxueyuan.com/versions/...
three.js官方案例webgl_loader_fbx.html学习
最新发布
hemiaoyuan1989的专栏
05-27 1043
先创建必要的场景scene,相机camera，渲染器webrenderer，控制器controls和灯光DirectionalLight. 性能检测stars， 地面， 网格。-（可选）一个表示颜色的 Color 的实例、字符串或数字，默认为一个白色（0xffffff）的。-（可选）一个表示颜色的 Color 的实例、字符串或数字，默认为一个白色（0xffffff）的。针对后缀的anim的动画文件，目前是需要这么解决。这里模型加载进去小，所以进行了放大100。加上这个光后，模型明显变量了。
小程序使用threejs第三篇—介绍几种几何模型
WeiHan_Seven的博客
02-26 5801
在上一篇[小程序使用threejs第二篇—立方体展示并自动旋转与手势旋转](https://blog.csdn.net/WeiHan_Seven/article/details/104493821)中，我们还遗留了一个小问题，就是展示的立方体如何随手势旋转缩放，当我们处理了这个问题，接下来介绍几种几何模型，大家可以试着把他们添加到场景下再渲染出来...
three.js 学习笔记
好好学习天天向上
01-07 1112
渲染器执行render方法的时候会读取相机对象的投影矩阵属性projectionMatrix，但是不会每渲染一帧，都通过相机的属性计算投影矩阵(节约计算资源)。比如相机的位置属性，改变相机位置也可以改变相机拍照场景中模型的角度，实现模型的360度旋转预览效果，改变透视投影相机距离模型的距离，就可以改变相机能看到的视野范围。没有特定方向，整体改变场景的光照，会均匀的照亮场景中的所有物体。(物体表面)的影响，如果使用受光照影响的材质，在不开灯的情况下是看不见的。反射的光线越多，光越亮，反射的光线越少光越暗。
threeJS与模型交互
weixin_42077503的博客
11-18 1862
threeJS与模型交互
threeJs学习笔记（一）
m0_72270036的博客
11-04 233
目的：一个 x，y，z 方向的坐标轴辅助对象 ，帮我们理解物体在世界坐标系中位移，缩放，渲染等效果，可以辅助我们开发和调试。目的：使摄像机围绕目标进行轨道运动，可以右键拖动，左键旋转，滚轮拉进，拉远摄像机。2.摄像机：类似人眼，可调位置，角度等信息，展示不同画面。3. 创建网格物体对象，传入图形和材质（网格物体对象）参数1：关联 DOM 对象，JS 对象，3D 物体对象。角度：视野垂直范围，越大看到越多，物体越小。目的：调整轨道控制器属性，影响摄像机细节。目的：浏览器窗口，尺寸改变时，画布自适应。
Three.js 学习笔记
qq_37758122的博客
10-05 250
Three.js学习
js- react个人学习笔记 仅供本人参考
06-15
js- react个人学习笔记 仅供本人参考
JS 学习笔记 防止发生命名冲突
12-10
就想 Js代码 代码如下: ziggy_js=function(){} ziggy_js.ui=function(){} ziggy_js.ui.alerts=function(){} ziggy_js.ui.alerts.showErrorAlert=function(){ alert(“An error occurred”); } ziggy_js.ui....
DWR util.js 学习笔记 整理
10-30
DWR util.js 学习笔记整理 DWR util.js 是一个功能强大的 JavaScript 库，它提供了许多有用的函数，可以帮助开发者在客户端页面上实现各种操作。下面是对 DWR util.js 的学习笔记整理。 1. $() 函数 DWRUtil 中的...
threejs_fbx.zip
09-06
three.js引入建模软件导出fbx格式文件，实现动画例子。
CloudsJS是一款非常简单的云彩飘动效果jQuery插件
08-10
CloudsJS是一款非常简单的云彩飘动效果jQuery插件。通过该插件你可以制作出多层云彩水平飘动的效果，它使用简单，可以为你的网站添加一些观赏性。
WebGL学习教程之Three.js学习笔记(第一篇)
10-17
Three.js是一个js的开源框架，它把webgl的所有东西都封装好了，我们不再需要去了解webgl那些比较麻烦的细节，直接在此框架上进行开发，既方便，又快捷，而且很容易就能学习,感兴趣的朋友跟随小编一起看看吧
Node.js学习笔记1-快速开始
01-07
我计划用一个月时间快速学习Node.js。这是第一篇学习笔记。主要内容： Hello World. 天下武功，唯快不破。 介绍 这篇笔记主要包含的内容： 安装环境 创建项目 创建并运行程序 小结 安装环境 在mac下安装node.js环境...
ThreeJS FBXLoader 加载3D文件，材质消失，已解决
qq_44393166的博客
08-16 4683
ThreeJS FBXLoader 加载3D文件，材质消失，已解决ThreeJS FBXLoader 加载3D文件，材质消失直接贴代码 ThreeJS FBXLoader 加载3D文件，材质消失 直接贴代码 请修改源码 examples/jsm/loaders/FBXLoader.js const texture = textureMap.get( id ); if ( texture !== undefined && texture.image !== undefined ) {
【three.js】threejs学习笔记（一）
不忘初心，坚定道路！
09-10 1306
前言 这个技术我已经觊觎很久了，我一开始在createjs与threejs中犹豫到底学哪个好，后来想到createjs 3D做起来还是比较少见，而且看案例感觉更多的是动画处理或者配合animatecc进行生成，而现实中有很多乱七八糟需求都是要搞个3d的，并且threejs生态比较好，所以决定搞threejs。 官网 https://github.com/mrdoob/three.js/releases 安装 可以发现很多中文教程让你去引入threejs的js或者cdn，我一开始以为只有这么用thr
three.js学习笔记(十三)——真实渲染
hongsir的博客
12-18 8416
初始场景 只有一个测试白球和gui面板 设置 把球体材质改为标准网格材质MeshStandardMaterial，再添加平行光 const directionalLight = new THREE.DirectionalLight('#ffffff',1) directionalLight.position.set(0.25,3,-2.25) scene.add(directionalLight) gui.add(directionalLight, 'intensity').min(0).max(10)
我的threejs学习笔记（九）---平行光
chenqiong1991的博客
03-27 2179
写在前面今天没出作品。效果不太满意。明早还得早起。先睡吧。明天再仔细研究平行光。代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>平行光</title> <script src="../three.js-master/three.js"></script> <script s

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值