vue3項(xiàng)目中使用three.js的操作步驟

更新時(shí)間：2023年01月15日 16:28:10 作者：犬萊八荒

最近在學(xué)習(xí)Three.js相關(guān)的技術(shù),恰逢Vue 3.0正式版也已推出,下面這篇文章主要給大家介紹了關(guān)于vue3項(xiàng)目中使用three.js的操作步驟,文中通過圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

在vue3項(xiàng)目中，通過three.js使用了一段短小但完整的代碼實(shí)現(xiàn)了實(shí)際的三維效果圖。

一、three.js是什么？

Three.js是一個(gè)輕量級(jí)，跨平臺(tái)的Javascript庫，可以在瀏覽器上結(jié)合HTML5的canvas,SVG或者WebGL，創(chuàng)建和展示3D模型和動(dòng)畫。
Three.js允許我們?cè)诓灰蕾嚾魏螢g覽器插件的情況下，創(chuàng)建一個(gè)GPU加速的3D動(dòng)畫場(chǎng)景。

二、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

安裝好后在需要調(diào)用的vue文件中引用：

import * as Three from 'three'

三、操作步驟

場(chǎng)景——相機(jī)——渲染器是在Three.js中必不可少的三要素，只有以上三者結(jié)合才能渲染出可見的內(nèi)容。

1.創(chuàng)建場(chǎng)景

	//創(chuàng)建一個(gè)三維場(chǎng)景
    const scene = new THREE.Scene();

2.創(chuàng)建物體

    const geometry = new THREE.BoxGeometry(100, 100, 100);//長(zhǎng)寬高都是100的立方體
    // const geometry = new THREE.SphereGeometry(60,40,40);//半徑是60的圓
    //widthSegments, heightSegments：水平方向和垂直方向上分段數(shù)。widthSegments最小值為3，默認(rèn)值為8。heightSegments最小值為2，默認(rèn)值為6。
    //創(chuàng)建材質(zhì)（外觀）
    const material = new THREE.MeshLambertMaterial({
        // color: 0x0000ff,//設(shè)置材質(zhì)顏色(藍(lán)色)
        color: 0x00ff00,//(綠色)
        transparent: true,//開啟透明度
        opacity: 0.5 //設(shè)置透明度
    });
    //創(chuàng)建一個(gè)網(wǎng)格模型對(duì)象
    const mesh = new THREE.Mesh(geometry, material);//網(wǎng)絡(luò)模型對(duì)象Mesh
    //把網(wǎng)格模型添加到三維場(chǎng)景
    scene.add(mesh);//網(wǎng)絡(luò)模型添加到場(chǎng)景中

3.添加光源

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

4.添加相機(jī)

    //創(chuàng)建一個(gè)透視相機(jī)，窗口寬度，窗口高度
    const width = window.innerWidth, height = window.innerHeight;
    const camera = new THREE.PerspectiveCamera(45, width/height, 1, 1000);
    //設(shè)置相機(jī)位置
    camera.position.set(300,300,300);
    //設(shè)置相機(jī)方向
    camera.lookAt(0,0,0);

5.開始渲染

    //創(chuàng)建一個(gè)WebGL渲染器
    const renderer = new THREE.WebGLRenderer()
    renderer.setSize(width,height)//設(shè)置渲染區(qū)尺寸
    renderer.render(scene,camera)//執(zhí)行渲染操作、指定場(chǎng)景、相機(jī)作為參數(shù)

四、myThree.vue源代碼

說了這么多，現(xiàn)奉上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'

    //創(chuàng)建一個(gè)三維場(chǎng)景
    const scene = new THREE.Scene();
    //創(chuàng)建一個(gè)物體（形狀）
    const geometry = new THREE.BoxGeometry(100, 100, 100);//長(zhǎng)寬高都是100的立方體
    // const geometry = new THREE.SphereGeometry(60,40,40);//半徑是60的圓
    //widthSegments, heightSegments：水平方向和垂直方向上分段數(shù)。widthSegments最小值為3，默認(rèn)值為8。heightSegments最小值為2，默認(rèn)值為6。
    //創(chuàng)建材質(zhì)（外觀）
    const material = new THREE.MeshLambertMaterial({
        // color: 0x0000ff,//設(shè)置材質(zhì)顏色(藍(lán)色)
        color: 0x00ff00,//(綠色)
        transparent: true,//開啟透明度
        opacity: 0.5 //設(shè)置透明度
    });
    //創(chuàng)建一個(gè)網(wǎng)格模型對(duì)象
    const mesh = new THREE.Mesh(geometry, material);//網(wǎng)絡(luò)模型對(duì)象Mesh
    //把網(wǎng)格模型添加到三維場(chǎng)景
    scene.add(mesh);//網(wǎng)絡(luò)模型添加到場(chǎng)景中

    // 添加多個(gè)模型（添加圓形）
    // const  geometry2 = new THREE.SphereGeometry(60, 40, 40);
    // const  material2 = new THREE.MeshLambertMaterial({
    //     color: 0xffff00
    // });
    // const mesh2 = new THREE.Mesh(geometry2, material2); //網(wǎng)格模型對(duì)象Mesh
    // // mesh3.translateX(120); //球體網(wǎng)格模型沿Y軸正方向平移120
    // mesh2.position.set(120,0,0);//設(shè)置mesh3模型對(duì)象的xyz坐標(biāo)為120,0,0
    // scene.add(mesh2);

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

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

    //創(chuàng)建一個(gè)透視相機(jī)，窗口寬度，窗口高度
    const width = window.innerWidth, height = window.innerHeight;
    const camera = new THREE.PerspectiveCamera(45, width/height, 1, 1000);
    //設(shè)置相機(jī)位置
    camera.position.set(300,300,300);
    //設(shè)置相機(jī)方向
    camera.lookAt(0,0,0);

    //創(chuàng)建輔助坐標(biāo)軸
    const axesHelper = new THREE.AxesHelper(200);//參數(shù)200標(biāo)示坐標(biāo)系大小，可以根據(jù)場(chǎng)景大小去設(shè)置
    scene.add(axesHelper);

    //創(chuàng)建一個(gè)WebGL渲染器
    const renderer = new THREE.WebGLRenderer()
    renderer.setSize(width,height)//設(shè)置渲染區(qū)尺寸
    renderer.render(scene,camera)//執(zhí)行渲染操作、指定場(chǎng)景、相機(jī)作為參數(shù)

    const controls = new OrbitControls(camera, renderer.domElement)//創(chuàng)建控件對(duì)象
    controls.addEventListener('change',()=>{
        renderer.render(scene, camera)//監(jiān)聽鼠標(biāo)，鍵盤事件
    })
    onMounted(()=>{
        document.getElementById('my-three')?.appendChild(renderer.domElement)
    })
</script>
?
<style lang='scss'>
    body{
        margin: 0;
        padding: 0;
    }
</style>