1.引入
yarn add three
2.vue頁面引入
<div id="container"></div>
import * as THREE from 'three' import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js' import { createMultiMaterialObject } from 'three/examples/jsm/utils/SceneUtils.js'
<style lang="less" scoped>
#container {
width: 100vw;
height: 400px;
}
</style>
3.初始化方法
data() {
return {
properties: {
width: {
name: 'width',
value: 0.5,
min: 0,
max: 1,
step: 0.01
},
height: {
name: 'height',
value: 0.5,
min: 0,
max: 1,
step: 0.01
},
depth: {
name: 'depth',
value: 0.5,
min: 0,
max: 1,
step: 0.01
},
widthSegments: {
name: 'widthments',
value: 8,
min: 0,
max: 40,
step: 1
},
heightSegments: {
name: 'heightments',
value: 8,
min: 0,
max: 40,
step: 1
},
depthSegments: {
name: 'depthments',
value: 8,
min: 0,
max: 40,
step: 1
}
},
camera: null,
scene: null,
renderer: null,
mesh: null
}
},
mounted() { this.initThree() }, methods: { initThree() { this.createScene() // 建立場景 this.createMesh() // 建立網格模型 this.createLight() // 建立光源 this.createCamera() // 建立相機 this.createRender() // 建立渲染器 this.createControls() // 建立控制元件物件 this.render() // 渲染 }, }
// 建立場景 createScene() { this.scene = new THREE.Scene() }, // 建立網格模型 createMesh() { // //建立圖形 let geometry = new THREE.BoxGeometry( this.properties.width.value, this.properties.height.value, this.properties.depth.value, Math.round(this.properties.widthSegments.value), Math.round(this.properties.heightSegments.value), Math.round(this.properties.depthSegments.value) ); // 建立材質 const meshMaterial = new THREE.MeshNormalMaterial({ side: THREE.DoubleSide }) const wireFrameMat = new THREE.MeshBasicMaterial({ wireframe: true }) // 新增組合材質 this.mesh = createMultiMaterialObject(geometry, [ meshMaterial, wireFrameMat ]) this.scene.add(this.mesh); }, // 建立光源 createLight() { }, // 建立相機 createCamera() { let container = document.getElementById('container'); this.camera = new THREE.PerspectiveCamera(70, container.clientWidth/container.clientHeight, 0.01, 10); this.camera.position.z = 1; }, // 建立渲染器 createRender() { let container = document.getElementById('container'); this.renderer = new THREE.WebGLRenderer({antialias: true}); //setSize 設定大小 this.renderer.setSize(container.clientWidth, container.clientHeight); container.appendChild(this.renderer.domElement); }, // 建立控制元件物件 createControls() { this.controls = new OrbitControls(this.camera, this.renderer.domElement) }, // 渲染 render() { this.updateFun() this.renderer.render(this.scene, this.camera) requestAnimationFrame(this.render) }, // 更新屬性 updateFun() { const tempRotationY = this.mesh.rotation.y this.scene.remove(this.mesh) this.createMesh() this.mesh.rotation.y += tempRotationY + 0.01 },