vue3中如何用threejs畫一些簡單的幾何體
更新時間：2022年03月14日 16:46:27 作者：阿鋒凌凌漆
最近學(xué)習(xí)threejs有些時間了,就想著著手做些東西,下面這篇文章主要給大家介紹了關(guān)于vue3中如何用threejs畫一些簡單的幾何體的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
前言
在vue3中使用threejs畫了幾個最簡單的幾何體,自動旋轉(zhuǎn)的立方體,圓柱體,球體,并且加入了光照,幾何體影陰部分即光沒照到的地方,成果如下,感興趣的可以看看具體實現(xiàn)過程~
threejs簡述
- Three.js是基于原生WebGL封裝運行的三維引擎
- 程序結(jié)構(gòu)->場景——相機(jī)——渲染器
場景Scene
場景是一個容器，用來放置幾何體
相機(jī)Camera
相機(jī)是用來拍攝的工具，通過控制相機(jī)的位置和方向可以獲取不同角度的圖像。
渲染器Renderer
渲染器利用場景和相機(jī)進(jìn)行渲染，渲染過程好比攝影師拍攝圖像，如果只渲染一次就是靜態(tài)的圖像，如果連續(xù)渲染就能得到動態(tài)的畫面。在JS中可以使用requestAnimationFrame實現(xiàn)高效的連續(xù)渲染。
[注] 涉及到幾何體,材質(zhì)等具體API沒有做很具體的說明,需要可自行查閱CylinderGeometry – three.js中文文檔 (webgl3d.cn)
依賴包版本
"vite": "^2.8.0", "three": "^0.138.0", "vue": "^3.2.25"
vue3操作DOM
-threejs底層是對webgl的封裝,最終是利用canvas做圖形渲染,所以第一步是做操作dom的工作
- 如下,在steup函數(shù)中使用ref定義一個響應(yīng)式常量dom后暴露給template使用,把ref掛載到具體的元素上
- 在initThree中做具體繪制的工作
<template>
<div>
demo
</div>
<div class="demo-main" ref="dom"></div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
export default defineComponent({
setup() {
const dom = ref<HTMLElement | null>(null);
onMounted(() => {
initThree(dom.value);
});
function initThree(instance: HTMLElement | null) {
//dosomething
}
return { dom };
},
});
</script>
<style scoped>
.demo-main {
height:500px;
padding: 9px 14px;
margin-bottom: 14px;
background-color: #f7f7f9;
border: 1px solid #e1e1e8;
border-radius: 4px;
}
</style>創(chuàng)建場景,相機(jī),渲染器 本節(jié)及后續(xù)都在initThree方法中寫
- 如下我們創(chuàng)建了threejs最基礎(chǔ)的一些東西
var hetght = instance.clientHeight - 25;
var width = instance.clientWidth - 25;
// 創(chuàng)建場景對象Scene
var scene = new THREE.Scene();
// 創(chuàng)建相機(jī)對象
var camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
// 創(chuàng)建渲染器對象
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, hetght);
instance.append(renderer.domElement);
renderer.render(scene, camera);
camera.position.z = 5;
renderer.setClearColor(0xeeeeee, 1.0);立方體
// 立方體網(wǎng)格模型
var cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
//材質(zhì)對象Material
//材質(zhì)決定了幾何圖形中的表面是如何畫的。如果幾何圖形是骨架，定義了形狀，那么材質(zhì)就是皮膚。three.js 中有許多不同種類的材質(zhì)，他們擁有不同的屬性，像反光，紋理映射，調(diào)整透明度。
var cubeMaterial = new THREE.MeshLambertMaterial({
color: 0xff0000,
opacity: 0.7,
transparent: true,
});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
scene.add(cube);球體
// 球體網(wǎng)格模型
var sphereGeometry = new THREE.SphereGeometry(1, 20, 20);
var sphereMaterial = new THREE.MeshLambertMaterial({
color: 0xff00ff,
specular: 0x4488ee,
shininess: 12,
});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); //網(wǎng)格模型對象Mesh
sphere.translateY(120); //球體網(wǎng)格模型沿Y軸正方向平移120
sphere.position.set(0, 0, 5);
scene.add(sphere);圓柱體
// 圓柱網(wǎng)格模型
var cylinderGeometry = new THREE.CylinderGeometry(1, 1, 5, 32);
var cylinderMaterial = new THREE.MeshLambertMaterial({
color: 0xffff00,
});
var cylinder = new THREE.Mesh(cylinderGeometry, cylinderMaterial); //網(wǎng)格模型對象Mesh
cylinder.position.set(10, 0, 0); //設(shè)置cylinder模型對象的xyz坐標(biāo)為10,0,0
scene.add(cylinder); 坐標(biāo)系
// 輔助坐標(biāo)系 參數(shù)400表示坐標(biāo)系大小，可以根據(jù)場景大小去設(shè)置
var axisHelper = new THREE.AxisHelper(20);
scene.add(axisHelper);點光源
//點光源
var point = new THREE.PointLight(0xffffff);
point.position.set(0, 0, 0);
scene.add(point); //點光源添加到場景中
// 點光源2 位置和point關(guān)于原點對稱
var point2 = new THREE.PointLight(0xffffff);
point2.position.set(-400, -200, -300); //點光源位置
scene.add(point2); //點光源添加到場景中鼠標(biāo)操作旋轉(zhuǎn),縮放
//鼠標(biāo)操作旋轉(zhuǎn)、縮放,OrbitControls需要單獨引入
new OrbitControls(camera, renderer.domElement);球體,立方體自動旋轉(zhuǎn)
var animate = function () {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
sphere.rotation.x += 0.01;
sphere.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();initThree完整代碼
function initThree(instance: HTMLElement | null) {
var hetght = instance.clientHeight - 25;
var width = instance.clientWidth - 25;
// 創(chuàng)建場景對象Scene
var scene = new THREE.Scene();
// 創(chuàng)建相機(jī)對象
var camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
// 創(chuàng)建渲染器對象
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, hetght);
instance.append(renderer.domElement);
renderer.render(scene, camera);
camera.position.z = 5;
renderer.setClearColor(0xeeeeee, 1.0);
// 立方體網(wǎng)格模型
var cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
//材質(zhì)對象Material
var cubeMaterial = new THREE.MeshLambertMaterial({
color: 0xff0000,
opacity: 0.7,
transparent: true,
});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
scene.add(cube);
// 球體網(wǎng)格模型
var sphereGeometry = new THREE.SphereGeometry(1, 20, 20);
var sphereMaterial = new THREE.MeshLambertMaterial({
color: 0xff00ff,
specular: 0x4488ee,
shininess: 12,
});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); //網(wǎng)格模型對象Mesh
sphere.translateY(120); //球體網(wǎng)格模型沿Y軸正方向平移120
sphere.position.set(0, 0, 5);
scene.add(sphere);
// 圓柱網(wǎng)格模型
var cylinderGeometry = new THREE.CylinderGeometry(1, 1, 5, 32);
var cylinderMaterial = new THREE.MeshLambertMaterial({
color: 0xffff00,
});
var cylinder = new THREE.Mesh(cylinderGeometry, cylinderMaterial); //網(wǎng)格模型對象Mesh
cylinder.position.set(10, 0, 0); //設(shè)置cylinder模型對象的xyz坐標(biāo)為10,0,0
scene.add(cylinder);
// 輔助坐標(biāo)系 參數(shù)400表示坐標(biāo)系大小，可以根據(jù)場景大小去設(shè)置
var axisHelper = new THREE.AxisHelper(20);
scene.add(axisHelper);
//點光源
var point = new THREE.PointLight(0xffffff);
point.position.set(0, 0, 0);
scene.add(point); //點光源添加到場景中
// 點光源2 位置和point關(guān)于原點對稱
var point2 = new THREE.PointLight(0xffffff);
point2.position.set(-400, -200, -300); //點光源位置
scene.add(point2); //點光源添加到場景中
//鼠標(biāo)操作旋轉(zhuǎn)、縮放
new OrbitControls(camera, renderer.domElement);
var animate = function () {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
sphere.rotation.x += 0.01;
sphere.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
}總結(jié)
到此這篇關(guān)于vue3中如何用threejs畫一些簡單幾何體的文章就介紹到這了,更多相關(guān)vue3用threejs畫幾何體內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vuejs通過filterBy、orderBy實現(xiàn)搜索篩選、降序排序數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了vuejs通過filterBy、orderBy實現(xiàn)搜索篩選、降序排序數(shù)據(jù)實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要介紹了electron踩坑之dialog中的callback解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
這篇文章主要給大家分享將 prop 限制為類型列表、默認(rèn)內(nèi)容和擴(kuò)展點、使用引號觀察嵌套值、知道何時使用 v-if、單作用域 slot 的簡寫、有條件地渲染slot等25 個Vue 技巧，下文是下相關(guān)資料,需要的朋友可以參考一下2021-11-11
vue的axios請求改變content-type為form-data問題
這篇文章主要介紹了vue的axios請求改變content-type為form-data問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家詳細(xì)介紹了vue日期時間工具類，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
基于vue,vue-router, vuex及addRoutes進(jìn)行權(quán)限控制問題
這篇文章主要介紹了基于vue，vue-router, vuex及addRoutes進(jìn)行權(quán)限控制問題,需要的朋友可以參考下2018-05-05
這篇文章主要介紹了vue 防止頁面加載時看到花括號的解決操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
ElementUI是一套基于VUE2.0的桌面端組件庫,ElementUI提供了豐富的組件幫助開發(fā)人員快速構(gòu)建功能強(qiáng)大、風(fēng)格統(tǒng)一的頁面,本文給大家分享elementui簡易介紹,感興趣的朋友一起看看吧2024-01-01
這篇文章主要介紹了vue循環(huán)語句v-for中的元素綁定值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
vue-router實現(xiàn)tab標(biāo)簽頁（單頁面）詳解
這篇文章主要為大家詳細(xì)介紹了vue-router實現(xiàn)tab標(biāo)簽頁的相關(guān)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10