初识three.js

简单介绍：three.js是可以用来开发三维产品的库，基于Web-GL，可以应用于各种三维项目，包括 3D游戏、3维模型展示、3D可视化平台等等。

初始化一个简单的三维应用

npm i three

<template>
  <div class="init-three-container">
    <div id="initThree-container" class="initThree-container" />
  </div>
</template>

<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' //导入控制器
export default {
  data() {
    return {
      
    }
  },
  mounted() {
    this.initThree()
  },
  methods: {
    initThree() {
    const dom = document.getElementById('initThree-container')
     // 初始化webgl
    const renderer = new THREE.WebGLRenderer({ antialias: true }) // 抗锯齿
    renderer.setPixelRatio(dom.clientWidth / dom.clientHeight) // 设置设备像素比 window.devicePixelRatio
    renderer.setSize(dom.clientWidth, dom.clientHeight) // 输出canvas的大小
    document.getElementById(id).appendChild(renderer.domElement)
    // 初始化相机
    const camera = new THREE.PerspectiveCamera(45, dom.clientWidth / dom.clientHeight, 1, 1000)
    camera.position.set(0, 10, 5)
    // 初始化场景
    const scene = new THREE.Scene()
    // 渲染器 渲染场景和相机
	renderer.render(scene, camera)
	// 初始化控制器
    const control = new OrbitControls(camera, renderer.domElement)
    }
  }
}
</script>

<style lang="scss">
.init-three-container {
  width: 100%;
  height: calc(100vh - 50px);
  display: flex;
  .initThree-container {
      width: 100%;
      height: 100%;
  }
}
</style>

这样就初始化了一个简单的three
浏览器中查看 是一个 canvas 标签
默认是黑色的

给场景添加一个物体

...
 methods: {
    initThree() {
		...
		// 添加物体
    	// 几何体
    	const cubeGeometry = new THREE.BoxGeometry(1, 1, 1)
    	// 材质
    	const cubeMaterial = new THREE.MeshBasicMaterial({ color: '#fff' })
    	// 生成物体
    	const cubeMesh = new THREE.Mesh(cubeGeometry, cubeMaterial)
    	// 添加到场景中
    	scene.add(cube)
	}
}

效果如图

至此一个简单的three.js三维应用就完成了。

本节要点

• 生产一个三维场景的重要因素有哪些？
  scene-场景、camera-相机、renderer-渲染器以及control控制器
• 各个要素的作用
  scene：向上述例子中的物体可以添加到场景中，之后还会学到的灯光、模型等，都需要添加到场景中才能展现
  camera：可以让我们看到场景及其中的内容，一般情况下我们使用透视相机（PerspectiveCamera） 这一投影模式被用来模拟人眼所看到的景象，它是3D场景的渲染中使用得最普遍的投影模式。
  renderer：就是用来将 scene、camera等渲染输出为一个canvas，展现给用户
  control：用来控制相机，像上述例子中使用的轨道控制器（OrbitControls） 可以使得相机围绕目标进行轨道运动
• 添加物体的要素
  geometry-几何体 three官网提供了更多的几何体
  material-材质
  mesh-物体
  【注意】物体创建完，需要添加到 scene场景中，才会有效

本节参考

three.js官网