Web3D基础概念以及项目中的应用

3D transform中主要包含这几个方法

• rotateX(angle) 绕X轴旋转

• rotateY(angle) 绕Y轴旋转

• rotateZ(angle) 绕Z轴旋转

• translateX(x) 沿X轴平移

• translateY(y) 沿Y轴平移

• trasnlateZ(z) 沿Z轴平移

• perspective 透视

3.基于three.js的web3d开发

3.1.three.js中的基础组件

场景

光

• 点光源PointLight
• 环境光AmbientLight
• 聚光灯光源SpotLight
• 方向光DirectionalLight

物体

• 几何体
• 材质： 表面各可视属性的结合，包括色彩、纹理、光滑度、透明度、反射率、折射率、发光度等
• 几何体 + 材质 = 网格
• 模型

相机

• 正相机
• 透视相机

渲染器

3.2.代码演示

• 创建场景、渲染器

async init () {
  let dom = document.querySelector('#box')
  this.scene = new THREE.Scene() //创建场景
  this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000) //创建相机
  this.renderer = new THREE.WebGLRenderer() //创建渲染器
  this.renderer.setClearColor(0xb9d3ff, 1)
  this.renderer.setSize(window.innerWidth, window.innerHeight)
  dom.appendChild(this.renderer.domElement) //页面挂载渲染器
  console.error('init')
},
复制代码

• 创建光效

addLight () {
  this.light = new THREE.PointLight(0xffffff) //创建点光源
  this.light.position.set(0, 0, 0)
  this.scene.add(this.light)
},
复制代码

• 导入模型

addModel () {
  let loader = new ColladaLoader()
  console.log(loader)
  loader.load('/static/3dfiles/ah.dae', res => {
    console.log(res)
    let textureLoader = new THREE.TextureLoader() //创建纹理加载器
    let texture = textureLoader.load('/static/3dfiles/ah.png') //加载纹理
    var material = new THREE.MeshBasicMaterial({
      map: texture  // 材质为纹理贴图
    })
    // 把材质给模型
    res.scene.traverse((child) => {
      if (child.type == 'Mesh') {
        console.log(child)
        child.material = material
      }

    })
    this.scene.add(res.scene)
  })
},
复制代码

• 渲染

render () {
  requestAnimationFrame(this.render)
  this.cube.rotation.x -= 0.01
  this.cube.rotation.y -= 0.01
  this.cube.position.x += 0.01
  this.cube.position.y += 0.01
  this.renderer.render(this.scene, this.camera)
},
复制代码

• 加入鼠标控制

mouseControl () {
  let orbitControls = new THREE.OrbitControls(this.camera, this.renderer.domElement) //加入鼠标控制
}
复制代码