vue3專案中使用three.js的操作步驟

2023-01-16 14:00:13

前言

在vue3專案中，通過three.js使用了一段短小但完整的程式碼實現了實際的三維效果圖。

一、three.js是什麼？

Three.js是一個輕量級，跨平臺的Javascript庫，可以在瀏覽器上結合HTML5的canvas,SVG或者WebGL，建立和展示3D模型和動畫。
Three.js允許我們在不依賴任何瀏覽器外掛的情況下，建立一個GPU加速的3D動畫場景。

二、vue3中下載與安裝three.js

1.利用npm安裝three.js：

npm install three

2.npm安裝軌道控制元件外掛：

npm install three-orbit-controls

3.安裝載入.obj和.mtl檔案的外掛：

npm i --save three-obj-mtl-loader

4.安裝渲染器外掛：

npm i --save three-css2drender

安裝好後在需要呼叫的vue檔案中參照：

import * as Three from 'three'

三、操作步驟

場景——相機——渲染器是在Three.js中必不可少的三要素，只有以上三者結合才能渲染出可見的內容。

1.建立場景

	//建立一個三維場景
    const scene = new THREE.Scene();

2.建立物體

    const geometry = new THREE.BoxGeometry(100, 100, 100);//長寬高都是100的立方體
    // const geometry = new THREE.SphereGeometry(60,40,40);//半徑是60的圓
    //widthSegments, heightSegments：水平方向和垂直方向上分段數。widthSegments最小值為3，預設值為8。heightSegments最小值為2，預設值為6。
    //建立材質（外觀）
    const material = new THREE.MeshLambertMaterial({
        // color: 0x0000ff,//設定材質顏色(藍色)
        color: 0x00ff00,//(綠色)
        transparent: true,//開啟透明度
        opacity: 0.5 //設定透明度
    });
    //建立一個網格模型物件
    const mesh = new THREE.Mesh(geometry, material);//網路模型物件Mesh
    //把網格模型新增到三維場景
    scene.add(mesh);//網路模型新增到場景中

3.新增光源

    //新增光源 //會照亮場景裡的全部物體（氛圍燈），前提是物體是可以接受燈光的，這種燈是無方向的，即不會有陰影。
    const ambient = new THREE.AmbientLight(0xffffff, 0.4);
    const light = new THREE.PointLight(0xffffff, 1);//點光源，color:燈光顏色，intensity:光照強度

4.新增相機

    //建立一個透視相機，視窗寬度，視窗高度
    const width = window.innerWidth, height = window.innerHeight;
    const camera = new THREE.PerspectiveCamera(45, width/height, 1, 1000);
    //設定相機位置
    camera.position.set(300,300,300);
    //設定相機方向
    camera.lookAt(0,0,0);

5.開始渲染

    //建立一個WebGL渲染器
    const renderer = new THREE.WebGLRenderer()
    renderer.setSize(width,height)//設定渲染區尺寸
    renderer.render(scene,camera)//執行渲染操作、指定場景、相機作為引數

四、myThree.vue原始碼

說了這麼多，現奉上myThree.vue原始碼：

<template>
    <div id="my-three"></div>
</template>

<script lang='ts' setup>
    import * as THREE from 'three'
    import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
    import { onMounted  } from 'vue'

    //建立一個三維場景
    const scene = new THREE.Scene();
    //建立一個物體（形狀）
    const geometry = new THREE.BoxGeometry(100, 100, 100);//長寬高都是100的立方體
    // const geometry = new THREE.SphereGeometry(60,40,40);//半徑是60的圓
    //widthSegments, heightSegments：水平方向和垂直方向上分段數。widthSegments最小值為3，預設值為8。heightSegments最小值為2，預設值為6。
    //建立材質（外觀）
    const material = new THREE.MeshLambertMaterial({
        // color: 0x0000ff,//設定材質顏色(藍色)
        color: 0x00ff00,//(綠色)
        transparent: true,//開啟透明度
        opacity: 0.5 //設定透明度
    });
    //建立一個網格模型物件
    const mesh = new THREE.Mesh(geometry, material);//網路模型物件Mesh
    //把網格模型新增到三維場景
    scene.add(mesh);//網路模型新增到場景中

    // 新增多個模型（新增圓形）
    // const  geometry2 = new THREE.SphereGeometry(60, 40, 40);
    // const  material2 = new THREE.MeshLambertMaterial({
    //     color: 0xffff00
    // });
    // const mesh2 = new THREE.Mesh(geometry2, material2); //網格模型物件Mesh
    // // mesh3.translateX(120); //球體網格模型沿Y軸正方向平移120
    // mesh2.position.set(120,0,0);//設定mesh3模型物件的xyz座標為120,0,0
    // scene.add(mesh2);

    //新增光源 //會照亮場景裡的全部物體（氛圍燈），前提是物體是可以接受燈光的，這種燈是無方向的，即不會有陰影。
    const ambient = new THREE.AmbientLight(0xffffff, 0.4);
    const light = new THREE.PointLight(0xffffff, 1);//點光源，color:燈光顏色，intensity:光照強度

    scene.add(ambient);
    light.position.set(200,300,400);
    scene.add(light);

    //建立一個透視相機，視窗寬度，視窗高度
    const width = window.innerWidth, height = window.innerHeight;
    const camera = new THREE.PerspectiveCamera(45, width/height, 1, 1000);
    //設定相機位置
    camera.position.set(300,300,300);
    //設定相機方向
    camera.lookAt(0,0,0);

    //建立輔助座標軸
    const axesHelper = new THREE.AxesHelper(200);//引數200標示座標系大小，可以根據場景大小去設定
    scene.add(axesHelper);

    //建立一個WebGL渲染器
    const renderer = new THREE.WebGLRenderer()
    renderer.setSize(width,height)//設定渲染區尺寸
    renderer.render(scene,camera)//執行渲染操作、指定場景、相機作為引數

    const controls = new OrbitControls(camera, renderer.domElement)//建立控制元件物件
    controls.addEventListener('change',()=>{
        renderer.render(scene, camera)//監聽滑鼠，鍵盤事件
    })
    onMounted(()=>{
        document.getElementById('my-three')?.appendChild(renderer.domElement)
    })
</script>

<style lang='scss'>
    body{
        margin: 0;
        padding: 0;
    }
</style>