threejs学习笔记-初识threejs

three.js其实是使用WebGL来绘制三维效果的

渲染器 - Renderer

将一个`场景(Scene)`和一个`摄像机(Camera)`传入到`渲染器(Renderer)`中，然后它会将摄像机视椎体中的三维场景渲染成一个二维图片显示在画布上。

定义方式div(<div id="container"></div>)

const container = document.getElementById('container')
this.renderer = new Three.WebGLRenderer({ antialias: true })
this.renderer.setClearColor(new Three.Color(0xF7F2F1))
this.renderer.setSize(container.clientWidth, container.clientHeight)
this.renderer.shadowMap.enabled = true
container.appendChild(this.renderer.domElement)
复制代码

或者直接用canavas(<canvas id="c"></canvas>)

const canvas = document.querySelector('#c');
this.renderer = new THREE.WebGLRenderer({canvas});
复制代码

场景 - Scene

是所有物体的容器。 ``` this.scene = new Three.Scene() ```

• 网格(Mesh)对象可以理解为用一种特定的材质(Material)来绘制的一个特定的几何体(Geometry)。

  const geometry = new THREE.BoxGeometry(1, 1, 1) const material = new THREE.MeshPhongMaterial({ color: 0x44aa88 }) const cube = new THREE.Mesh(geometry, material) this.scene.add(cube); 复制代码

• 几何体(Geometry)对象顾名思义代表一些几何体，如球体、立方体、平面、狗、猫、人、树、建筑等物体的顶点信息。Three.js内置了许多基本几何体 。你也可以创建自定义几何体或从文件中加载几何体。

• 材质(Material)对象代表绘制几何体的表面属性，包括使用的颜色，和光亮程度。一个材质(Material)可以引用一个或多个纹理(Texture)，这些纹理可以用来，打个比方，将图像包裹到几何体的表面。

• 纹理(Texture)对象通常表示一幅要么从文件中加载，要么在画布上生成，要么由另一个场景渲染出的图像。

  const loader = new THREE.TextureLoader(); // 6个面使用同一种纹理 const material = new THREE.MeshBasicMaterial({ map: loader.load('threejs.org/manual/exam…'), }); 复制代码

• 光源(Light)对象代表不同种类的光。

  const color = 0xFFFFFF const intensity = 1 const light = new THREE.DirectionalLight(color, intensity) light.position.set(-1, 2, 4) this.scene.add(light) 复制代码

相机 - Camera

相机决定了场景中那个角度的景色会显示出来

this.camera = new Three.PerspectiveCamera(5, container.clientWidth / container.clientHeight, 0.1, 1000)
复制代码

最后渲染

this.renderer.render(this.scene, this.camera);
复制代码

效果图： threejs.org/manual/exam…

完整代码

<template>
  <canvas id="c"></canvas>
</template>

<script>
import * as THREE from 'three'

export default {
  name: "test5",
  data() {
    return {
      renderer: null,
      scene: null,
      camera: null
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      const canvas = document.querySelector('#c');
      // 渲染器
      this.renderer = new THREE.WebGLRenderer({canvas, antialias: true });

      const fov = 75
      const aspect = 2  // the canvas default
      const near = 0.1
      const far = 5
      // 相机
      this.camera = new THREE.PerspectiveCamera(fov, aspect, near, far)
      this.camera.position.z = 2

      // 场景
      this.scene = new THREE.Scene()

      const color = 0xFFFFFF
      const intensity = 1
      // 灯光
      const light = new THREE.DirectionalLight(color, intensity)
      light.position.set(-1, 2, 4)
      this.scene.add(light)

      const boxWidth = 1
      const boxHeight = 1
      const boxDepth = 1
      // 几何体
      const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth)

      // 材质
      const material = new THREE.MeshPhongMaterial({color: 0x44aa88})  // greenish blue

      // 立方体
      const cube = new THREE.Mesh(geometry, material)
      this.scene.add(cube)

      // 旋转
      let render = (time) => {
        time *= 0.001;  // convert time to seconds

        cube.rotation.x = time
        cube.rotation.y = time

        this.renderer.render(this.scene, this.camera)

        requestAnimationFrame(render)
      }

      requestAnimationFrame(render)
    }
  }
}
</script>

<style scoped>
</style>