demo
物联网粮仓3D可视化案例 沙发在线预览 服装在线预览 洗衣机在线交互预览 中国GDP在线预览 蛋白质结构可视化 分子结构可视化
更多案例
Threejs github地址
OpenGl基础
Three.JS基础

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

        <script></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.1far距离相机多远的位置截止渲染，如果设置的值偏小小，会有部分场景看不到。 默认值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度45aspectaspect表示渲染窗口的长宽比，如果一个网页上只有一个全屏的canvas画布且画布上只有一个窗口，那么aspect的值就是网页窗口客户区的宽高比window.innerWidth/window.innerHeightnearnear属性表示的是从距离相机多远的位置开始渲染，一般情况会设置一个很小的值0.1farfar属性表示的是距离相机多远的位置截止渲染，如果设置的值偏小小，会有部分场景看不到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数值0xffffffintensity(参数可选)光照的强度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进制表示光照颜色0xffffffintensity(可选参数) 光照的强度1distance这个距离表示从光源到光照强度为0的位置。 当设置为0时，光永远不会消失(距离无穷大)0decay沿着光照距离的衰退量缺省值为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(可选参数) 光照强度1distance从光源发出光的最大距离，其强度根据光源的距离线性衰减angle光线散射角度，最大为Math.PI/2penumbra聚光锥的半影衰减百分比。在0和1之间的值0decay沿着光照距离的衰减量

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进制表示光的颜色0xffffffintensity(可选参数) 光照的强度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轴上面的宽度1heightY轴上面的高度1depthZ轴上面的深度1widthSegments（可选）宽度的分段数1heightSegments（可选）宽度的分段数1depthSegments（可选）宽度的分段数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轴上面的宽度1heightY轴上面的高度1depthZ轴上面的深度1widthSegments（可选）宽度的分段数1heightSegments（可选）宽度的分段数1depthSegments（可选）宽度的分段数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圆形的半径1segments分段（三角面）的数量，最小值为38thetaStart第一个分段的起始角度默认为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圆形的半径1segments分段（三角面）的数量，最小值为38thetaStart第一个分段的起始角度默认为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圆锥底部的半径1height圆锥的高度1radialSegments圆锥侧面周围的分段数8heightSegments圆锥侧面沿着其高度的分段数1openEnded一个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圆锥底部的半径1height圆锥的高度1radialSegments圆锥侧面周围的分段数8heightSegments圆锥侧面沿着其高度的分段数1openEnded一个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圆柱的顶部半径1radiusBottom圆柱的底部半径1height圆柱的高度1radialSegments圆柱侧面周围的分段数8heightSegments圆柱侧面沿着其高度的分段数1openEnded一个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圆柱的顶部半径1radiusBottom圆柱的底部半径1height圆柱的高度1radialSegments圆柱侧面周围的分段数8heightSegments圆柱侧面沿着其高度的分段数1openEnded一个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十二面体的半径1detail将这个值设为一个大于0的数将会为它增加一些顶点，使其不再是一个十二面体010、十二面几何体（DodecahedronGeometry）

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

   DodecahedronGeometry(radius : Float, detail : Integer)
  参数描述默认值radius十二面体的半径1detail将这个值设为一个大于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，曲线上点的数量12stepsint，用于沿着挤出样条的深度细分的点的数量1depthfloat，挤出的形状的深度100bevelEnabledbool，对挤出的形状应用是否斜角truebevelThicknessfloat，设置原始形状上斜角的厚度6bevelSizefloat。斜角与原始形状轮廓之间的延伸距离默认值为bevelThickness-2bevelOffsetfloat. 与倒角开始的形状轮廓的距离0bevelSegmentsint。斜角的分段层数3extrudePathTHREE.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，曲线上点的数量12stepsint，用于沿着挤出样条的深度细分的点的数量为1depthfloat，挤出的形状的深度100bevelEnabledbool，对挤出的形状应用是否斜角truebevelThicknessfloat，设置原始形状上斜角的厚度6bevelSizefloat。斜角与原始形状轮廓之间的延伸距离bevelThickness-2bevelOffsetfloat. 与倒角开始的形状轮廓的距离0bevelSegmentsint。斜角的分段层数3extrudePathTHREE.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坐标必须大于0segments要生成的车削几何体圆周分段的数量12phiStart以弧度表示的起始角度0phiLength车削部分的弧度（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值，并修改第三个矢量3slices用于参数化函数的切片计数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。字体大小100heightFloat。挤出文本的厚度50curveSegmentsInteger。（表示文本的）曲线上点的数量12bevelEnabledBoolean。是否开启斜角falsebevelThicknessFloat。文本上斜角的深度20bevelSizeFloat。斜角与原始文本轮廓之间的延伸距离8bevelSegmentsInteger。斜角的分段数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
        } );
} );
复制代码

跳一跳完整案例找到了一个demo，上传至资源里了

来源：SketchUpBBS
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

扫一扫

好帖，来顶下

找到好贴不容易，我顶你了，谢了

支持楼主发帖！

帖子对我很有帮助，谢谢楼主！

不错不错，楼主您辛苦了。。。

拓展了知识面，谢谢！

支持一下

支持一下