初识three.js _构建一个基本场景背景随着审美的提升，大屏类可视化页面已经不仅仅局限于2D的样式交互展示；为了更

背景

随着审美的提升，大屏类可视化页面已经不仅仅局限于2D的样式交互展示；为了更美观的交互效果进而需引入更生动的2.5D,3D交互如WebGL和基于原生WebGL封装运行的三维引擎 Three.js。作为一个久经沙场的CV工程师而言学习 Three.js 成本较小😂 ；

本专栏将记录本人学习Three.js的过程。

Three.js

three主要的程序结构是 : 以场景（sceen），相机(camera)，渲染器(render)为主，具体结构如下：

场景场景即为一个容器/画布，用来放置几何物体的容器。
相机用来成像的工具，通过控制相机的位置与角度来获取不同的图像。
渲染器渲染器利用场景和相机进行渲染成像，如果只渲染一次就是静态的图像，如果连续渲染就能得到动态的画面。在JS中可以使用requestAnimationFrame实现高效的连续渲染。

如何构建一个基本场景？（以在vue2中使用Three.js为例）

1.引入Three.js库

npm install three

2.使用其中的构造方法

全量引入Three.js方式在使用的组件中 ：
import * as three from 'three'

按需引入方式在使用的组件中：
import { Scene, WebGLRenderer, PerspectiveCamera, BoxGeometry, MeshBasicMaterial, Mesh} from 'three

www.webgl3d.cn/Three.js/

3.构建场景，为场景添加相机

前提为我们已在data里定义值，装three实例的对象；便于后续交互中使用。
data(){
return:{
scene:null，
renderer：null,
cube:null
}
}

 this.scene = new Three.Scene() //构建场景
 
  var camera = new Three.PerspectiveCamera(
        45,
        window.innerWidth / window.innerHeight,
        0.1,
        2000
      )

在three.js使用正投影相机[OrthographicCamera]和透视投影相机[PerspectiveCamera] 对于只想学会怎么站稳在巨人的我就只需要知道怎么修改配置即可😂

在此demo中使用的透视相机PerspectiveCamera对象，这种投影模式被用来模拟人眼所看到的景象。透视模式常用属性如下：

PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )

fov — 摄像机视锥体垂直视野角度（对于垂直于场景的偏转角度）eg:人像特写or氛围感照片（刘亚仁那张图）
aspect — 摄像机视锥体长宽比（光照对应的范围长宽比1:1,3:4 一般直接取场景的长宽比）
near — 摄像机视锥体近端面 (相机距离物体最近距离)
far — 摄像机视锥体远端面(相机距离物体最远距离)
near，far这两个参数决定照片是微距or全景图。

4.初始化渲染器

 //  创建渲染器
      var renderer = new Three.WebGLRenderer()
      // 渲染器初始颜色 eg：设置照片底色
      renderer.setClearColor(new Three.Color(0x000000))
      // 输出画面大小 eg：设置照片裁剪大小
      renderer.setSize(window.innerWidth, window.innerHeight) //两个参数  宽，长
      this.renderer = renderer //赋值给定义渲染器便于后续交互

5.给场景添加网格元素

var geometry = new Three.BoxBufferGeometry(2, 2, 2)
      var material = new Three.MeshLambertMaterial({
        color: 0xff00ff,
        specular: 0x4488ee,
        shininess: 2,
      })

      var cube = new Three.Mesh(geometry, material)
      cube.position.x = 10
      cube.position.y = 15
      cube.position.z = 10
      this.cube = cube //
      this.scene.add(this.cube)

5.1 构造一个物体这里选的是立体缓冲模型BoxBufferGeometry

5.2给物体添加材质

材质分为几大类

1.基础材质MeshBasicMaterial，渲染后物体的颜色始终为该材质的颜色，而不会由于光照产生明暗、阴影效果。如果没有指定材质的颜色，它的颜色就是随机的。

深度材质MeshDepthMateria，根据网格到相机的距离，该材质决定如何给网格染色，根据物体上每一点到摄像机的远近来显示颜色，远的显示黑色，近的显示白色。 3.法向材质MeshNormalMaterial，根据物体表面的法向量计算颜色 ,决定光的发射方向、在计算光照、阴影时提供信息、为物体表面上色。法向量所指的方向决定每个面从MeshNormalMaterial材质获取的颜色。在平面上添加表示法向量的箭头：使用THREE.ArrowHelper。

4.朗伯材质MeshLambertMaterial，考虑光照的影响，可以创建颜色暗淡，不光亮的物体。 5.面材质MeshFaceMaterial，这是一种容器，可以在该容器中为物体的各个表面上设置不同的颜色。等大概7种材质类型。。在此次入门实践中使用到的是MeshLambertMaterial基础材质

6.设置相机的位置，设置光源，渲染场景


      //  定位相机 指向场景中心
      camera.position.set(-30, 40, 30) //设置相机位置
      camera.lookAt(this.scene.position) //设置相机方向(指向的场景对象)
      this.camera = camera
      document.getElementById('contanier').appendChild(this.renderer.domElement)
      var pointLight = new Three.PointLight(0xffffff)
      pointLight.position.set(-60, 100, 100)
      this.scene.add(pointLight)
      
    },
    animate() {
      // 使用动画效果，浏览器全新的动画效果
      window.requestAnimationFrame(this.animate)
      // 设置网格的坐标

      //
      this.cube.rotation.x += 0.01
      this.cube.rotation.y += 0.01

   
    },