vue3項(xiàng)目中使用three.js的操作步驟
前言
在vue3項(xiàng)目中,通過(guò)three.js使用了一段短小但完整的代碼實(shí)現(xiàn)了實(shí)際的三維效果圖。
一、three.js是什么?
Three.js是一個(gè)輕量級(jí),跨平臺(tái)的Javascript庫(kù),可以在瀏覽器上結(jié)合HTML5的canvas,SVG或者WebGL,創(chuàng)建和展示3D模型和動(dòng)畫(huà)。
Three.js允許我們?cè)诓灰蕾?lài)任何瀏覽器插件的情況下,創(chuàng)建一個(gè)GPU加速的3D動(dòng)畫(huà)場(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é)合才能渲染出可見(jiàn)的內(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ì)(外觀(guān)) const material = new THREE.MeshLambertMaterial({ // color: 0x0000ff,//設(shè)置材質(zhì)顏色(藍(lán)色) color: 0x00ff00,//(綠色) transparent: true,//開(kāi)啟透明度 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)景里的全部物體(氛圍燈),前提是物體是可以接受燈光的,這種燈是無(wú)方向的,即不會(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.開(kāi)始渲染
//創(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源代碼
說(shuō)了這么多,現(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ì)(外觀(guān)) const material = new THREE.MeshLambertMaterial({ // color: 0x0000ff,//設(shè)置材質(zhì)顏色(藍(lán)色) color: 0x00ff00,//(綠色) transparent: true,//開(kāi)啟透明度 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)景里的全部物體(氛圍燈),前提是物體是可以接受燈光的,這種燈是無(wú)方向的,即不會(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)聽(tīng)鼠標(biāo),鍵盤(pán)事件 }) onMounted(()=>{ document.getElementById('my-three')?.appendChild(renderer.domElement) }) </script> ? <style lang='scss'> body{ margin: 0; padding: 0; } </style>
五、效果圖
1.單個(gè)模型
2.多個(gè)模型
總結(jié)
在vue3項(xiàng)目中,通過(guò)three.js實(shí)現(xiàn)了實(shí)際的三維效果demo,未來(lái)會(huì)繼續(xù)深入研究,總之3D渲染圖形是一個(gè)很好玩的東西,歡迎大家一起交流。
到此這篇關(guān)于vue3項(xiàng)目中使用three.js的文章就介紹到這了,更多相關(guān)vue3使用three.js內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue?eventBus事件總線(xiàn)封裝后再用的方式
EventBus稱(chēng)為事件總線(xiàn),當(dāng)兩個(gè)組件屬于不同的兩個(gè)組件分支,或者兩個(gè)組件沒(méi)有任何聯(lián)系的時(shí)候,不想使用Vuex這樣的庫(kù)來(lái)進(jìn)行數(shù)據(jù)通信,就可以通過(guò)事件總線(xiàn)來(lái)進(jìn)行通信,這篇文章主要給大家介紹了關(guān)于Vue?eventBus事件總線(xiàn)封裝后再用的相關(guān)資料,需要的朋友可以參考下2022-06-06使用Vue-Awesome-Swiper實(shí)現(xiàn)旋轉(zhuǎn)疊加輪播效果&平移輪播效果
這篇文章主要介紹了用Vue-Awesome-Swiper實(shí)現(xiàn)旋轉(zhuǎn)疊加輪播效果&平移輪播效果,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值需要的朋友可以參考下2019-08-08vue限制輸入框只能輸入8位整數(shù)和2位小數(shù)的代碼
這篇文章主要介紹了vue限制輸入框只能輸入8位整數(shù)和2位小數(shù),文中我們使用v-model加watch 實(shí)現(xiàn)這一個(gè)功能,代碼簡(jiǎn)單易懂,需要的朋友可以參考下2019-11-11探索Vue中組合式API和選項(xiàng)式API的用法與比較
Vue3為我們開(kāi)發(fā)提供了兩種組件邏輯實(shí)現(xiàn)方式:選項(xiàng)式API和組合式API,本文將嘗試為大家分析什么是選項(xiàng)式API和組合式API,以及兩種API的優(yōu)缺點(diǎn),希望對(duì)大家有所幫助2023-12-12Vue基礎(chǔ)之MVVM,模板語(yǔ)法和數(shù)據(jù)綁定
這篇文章主要為大家介紹了Vue之MVVM,模板語(yǔ)法和數(shù)據(jù)綁定,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2021-12-12