阅读 322

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

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) //加入鼠标控制
}
复制代码
文章分类
前端
文章标签