前言：
最近公司計划做一個關於計測方面的案子，希望可以以3d的方式去直觀的展示測量目標本體以及測量工位等信息。先后決定從達索，華天sview，HOOPS等web3d方案解決商去選取，經過調研之后發現這三款庫價格且比較昂貴，並且有的開發文檔全英文，有的不詳細，反正就是開發上困難不小，加上開始案子都不重視，導致后面趕進度，發現一堆問題。之后技術總監建議去研究使用three.js。於是被迫去擴充自己的技能包。。。 哈哈
准備：
開始去看threejs的官網以及api，發現真的繁多，於是轉而去百度，看別人是怎么用的，去借鑒模仿【搬磚】。總結出一套完整的流程為：
1.引入three.js,
【不使用vue等框架，直接以script 方式引入<script src="js/three.js"></script>】
【vue： npm i three => import * as THREE from 'three' 】
2.自己畫模型還是引入模型，如果是引入外部模型，就需要去找對應的加載器
以導入外部.mtl模型為例， 就需要用到 ·MTLLoader·
【<script src="js/MTLLoader.js"></script> 】
【import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js', npm安裝后，直接引入即可
】
3.初始化操作，包括創建場景,創建光源，創建相機，創建渲染器，創建控件對象，加載模型【如果引入外部模型的話】，最后渲染-render
總結如上。
下面是結合vue使用的demo【demo來自 點燃火柴， 導入的STL模型，MTL原理和STL一樣通用】:
【不知道是不是 three.js 版本更新的緣故，我直接使用會報錯， 百度查閱 需要將場景和scene全局話，不能直接放到 data屬性中，這里需要注意！！！】
<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { STLLoader } from 'three/examples/jsm/loaders/STLLoader.js'
let scene, mesh // 全局化 scene 和 mesh
export default {
data() {
return {
camera: null,
scene: null,
renderer: null,
controls: null
}
},
mounted() {
this.init()
// console.log(this.mesh)
},
methods: {
// 初始化
init() {
this.createScene() // 創建場景
this.loadSTL() // 加載STL模型
this.createLight() // 創建光源
this.createCamera() // 創建相機
this.createRender() // 創建渲染器
this.createControls() // 創建控件對象
this.render() // 渲染
},
// 創建場景
createScene() {
this.scene = new THREE.Scene()
},
// 加載STL模型
loadSTL() {
const THIS = this
const loader = new STLLoader()
loader.load(
`/model/Back_door.stl`,
geometry => {
// 創建材質
const material = new THREE.MeshLambertMaterial({ color: 0x7777ff })
this.mesh = new THREE.Mesh(geometry, material)
this.mesh.rotation.x = -0.5 * Math.PI
this.mesh.scale.set(0.6, 0.6, 0.6)
this.scene.add(this.mesh)
}
)
},
// 創建光源
createLight() {
// 環境光
const ambientLight = new THREE.AmbientLight(0xffffff, 0.1) // 創建環境光
this.scene.add(ambientLight) // 將環境光添加到場景
const spotLight = new THREE.SpotLight(0xffffff) // 創建聚光燈
spotLight.position.set(150, 150, 150)
spotLight.castShadow = true
this.scene.add(spotLight)
},
// 創建相機
createCamera() {
const element = document.getElementById('container')
const width = element.clientWidth // 窗口寬度
const height = element.clientHeight // 窗口高度
const k = width / height // 窗口寬高比
// PerspectiveCamera( fov, aspect, near, far )
this.camera = new THREE.PerspectiveCamera(35, k, 0.1, 1000)
this.camera.position.set(250, 250, 150) // 設置相機位置
this.camera.lookAt(new THREE.Vector3(10, 40, 0)) // 設置相機方向
this.scene.add(this.camera)
},
// 創建渲染器
createRender() {
const element = document.getElementById('container')
this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
this.renderer.setSize(element.clientWidth, element.clientHeight) // 設置渲染區域尺寸
this.renderer.shadowMap.enabled = true // 顯示陰影
this.renderer.shadowMap.type = THREE.PCFSoftShadowMap
this.renderer.setClearColor(0x3f3f3f, 1) // 設置背景顏色
element.appendChild(this.renderer.domElement)
},
render() {
if (this.mesh) {
// this.mesh.rotation.z += 0.006
}
this.renderer.render(this.scene, this.camera)
requestAnimationFrame(this.render)
},
// 創建控件對象
createControls() {
this.controls = new OrbitControls(this.camera, this.renderer.domElement)
}
}
}
</script>
<template>
<div class="main" id="container"></div>
</template>
<style scoped lang="scss">
.main {
width: 100%;
height: 100%;
position: absolute;
}
</style>
附上demo展示圖：
