vue3項目中使用three.js的操作步驟

Posted on by

前言

在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>

五、效果圖

1.單個模型

2.多個模型

總結

在vue3項目中，通過three.js實現瞭實際的三維效果demo，未來會繼續深入研究，總之3D渲染圖形是一個很好玩的東西，歡迎大傢一起交流。

到此這篇關於vue3項目中使用three.js的文章就介紹到這瞭,更多相關vue3使用three.js內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：