手把手教你在vue中使用three.js
更新時間：2023年03月01日 10:55:00 作者：繁星如夢&
最近在vue3項目中通過three.js實現(xiàn)了實際的三維效果demo,下面這篇文章主要給大家介紹了關于在vue中使用three.js的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
在vue中使用three.js
下面我會介紹three.js的基礎寫法，和在vue中寫入three.js的寫法。
three在vue中使用的時候，用到紋理圖片、模型加載不出來的時候的解決辦法，在下面會具體體現(xiàn)出來。
效果展示：vr看房效果
1.首先安裝three.js、引入
npm install three
在你需要的頁面內(nèi)引入three.js
//import * as THREE from 'three' import * as Three from 'three'
前邊這個名字是自己定義的
2.在頁面內(nèi)寫入three.js
首先寫過three.js基礎的要分為幾部分：
01：創(chuàng)建場景
const scene = new THREE.Scene()
02.創(chuàng)建相機
代表著相機：角度、寬高比、近看、遠
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
這代表相機的位置：x y z
camera.position.set(0, 0, 10)
把相機添加到場景中
scene.add(camera)
03.創(chuàng)建一個幾何體
這是一個正方體
const Geometry = new THREE.BoxGeometry(1, 1, 1)
// 幾何體材質(zhì)
const texture = new THREE.MeshBasicMaterial({
color: 0xffff
})
// 將幾何體和材質(zhì)創(chuàng)建成物體
const mesh = new THREE.Mesh(Geometry, texture)
// 將幾何體添加到場景中
scene.add(mesh)
04.創(chuàng)建渲染器
// 設置渲染器的大小 render.setSize(window.innerWidth, window.innerHeight) // 將渲染器添加到頁面 將webgl渲染的canves添加到body document.body.appendChild(render.domElement)
下邊是把three.js寫入vue2中：
上面介紹了three.js的基礎寫法，下邊是vue2的寫法
01.引入
軌道控制器為了讓模型顯示的更為自然
import * as Three from 'three'
// 導入軌道控制器
import {
OrbitControls
} from 'three/examples/jsm/controls/OrbitControls'
// import {RGBELoader} from 'three/examples/jsm/loaders/RGBELoader'
let scene = null,
camera=null,
renderer=null,
mesh=null
02.頁面div的承載
<template> <div id="container"> </div> </template>
03.js中獲取div、創(chuàng)建相機場景
我用的是最原始js獲取的，在vue中可以使用ref
let container = document.getElementById('container');
// 添加相機
camera = new Three.PerspectiveCamera(70, container.clientWidth/container.clientHeight, 0.01, 1000);
// 相機的位置
camera.position.z = 0.1
// 場景
scene = new Three.Scene()
04.創(chuàng)建物體
我這里邊創(chuàng)建的是一個比較大的模型，用的貼圖紋理，也可以創(chuàng)建正方體之類的，上面有介紹到
let geometry=new Three.SphereBufferGeometry(5,32,32)
let a=new Three.TextureLoader().load(`static/image/8.jpg`)
let material = new Three.MeshBasicMaterial({map: a });
mesh = new Three.Mesh(geometry, material);
mesh.geometry.scale(1, 1, -1);
scene.add(mesh);
05.初始化渲染器
// 初始化渲染器
renderer = new Three.WebGLRenderer({antialias:true});
// 渲染器的大小
renderer.setSize(container.clientWidth,container.clientHeight);
// 將渲染器添加到頁面
container.appendChild(renderer.domElement);
06.軌道控制器
// 創(chuàng)建軌道控制器 相機圍繞模型看到的角度
const OrbitControl = new OrbitControls(camera, renderer.domElement)
// 設置軌道自然
OrbitControl.enableDamping = true
// 設置慣性
OrbitControl.update()
07.瀏覽器自動渲染
animate(){
// 瀏覽器自動渲染下一幀
requestAnimationFrame(this.animate);
// 渲染到頁面
renderer.render(scene,camera);
}
以上是three.js在vue的寫法，是要放到事件里邊的，下面我會吧完整代碼拿出來
遇到的問題：圖片的位置具體原因我前邊的文章提到過，要把圖片放到publice下面
<!-- -->
<template>
<div id="container">
</div>
</template>
<script>
import * as Three from 'three'
// 導入軌道控制器
import {
OrbitControls
} from 'three/examples/jsm/controls/OrbitControls'
// import {RGBELoader} from 'three/examples/jsm/loaders/RGBELoader'
let scene = null,
camera=null,
renderer=null,
mesh=null
export default {
data () {
return {
};
},
methods:{
init(){
let container = document.getElementById('container');
// 添加相機
camera = new Three.PerspectiveCamera(70, container.clientWidth/container.clientHeight, 0.01, 1000);
// 相機的位置
camera.position.z = 0.1
// 場景
scene = new Three.Scene()
// 創(chuàng)建球
let geometry=new Three.SphereBufferGeometry(5,32,32)
let a=new Three.TextureLoader().load(`static/image/8.jpg`)
let material = new Three.MeshBasicMaterial({map: a });
mesh = new Three.Mesh(geometry, material);
mesh.geometry.scale(1, 1, -1);
scene.add(mesh);
// 初始化渲染器
renderer = new Three.WebGLRenderer({antialias:true});
// 渲染器的大小
renderer.setSize(container.clientWidth,container.clientHeight);
// 將渲染器添加到頁面
container.appendChild(renderer.domElement);
// 創(chuàng)建軌道控制器 相機圍繞模型看到的角度
const OrbitControl = new OrbitControls(camera, renderer.domElement)
// 設置軌道自然
OrbitControl.enableDamping = true
// 設置慣性
OrbitControl.update()
},
animate(){
// 瀏覽器自動渲染下一幀
requestAnimationFrame(this.animate);
// 渲染到頁面
renderer.render(scene,camera);
}
},
mounted(){
this.init()
this.animate()
}
}
</script>
<style scoped>
#container{
width: 100vw;
height: 100vh;
}
</style>總結
到此這篇關于在vue中使用three.js的文章就介紹到這了,更多相關vue使用three.js內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
如何為vuex實現(xiàn)帶參數(shù)的 getter和state.commit
這篇文章主要介紹了如何為vuex實現(xiàn)帶參數(shù)的getter和state.commit，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要為大家詳細介紹了如何在你的Vue項目中實現(xiàn)累加動畫，文中的示例代碼簡潔易懂，具有一定的參考價值，感興趣的小伙伴可以了解一下2023-06-06
這篇文章主要介紹了vue使用動態(tài)組件實現(xiàn)TAB切換效果的方法，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下2021-05-05
vue addRoutes實現(xiàn)動態(tài)權限路由菜單的示例
本篇文章主要介紹了vue addRoutes實現(xiàn)動態(tài)權限路由菜單的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
Vue中使用this.$set()如何新增數(shù)據(jù),更新視圖
這篇文章主要介紹了Vue中使用this.$set()實現(xiàn)新增數(shù)據(jù),更新視圖方式。具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
在開發(fā)前端應用時,地圖選擇器是一個非常常見的需求,本文將一步步展示如何使用?Vue?3?和?Element?Plus?來實現(xiàn)一個百度地圖位置選擇器組件,有需要的可以參考一下2025-04-04
這篇文章主要介紹了vue.js實現(xiàn)條件渲染的實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
element-ui 關于獲取select 的label值方法
今天小編就為大家分享一篇element-ui 關于獲取select 的label值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
關于elementUi表格合并行數(shù)據(jù)并展示序號
這篇文章主要介紹了關于elementUi表格合并行數(shù)據(jù)并展示序號,通過給table傳入span-method方法可以實現(xiàn)合并行或列，方法的參數(shù)是一個對象,感興趣的朋友可以學習一下2023-04-04
這篇文章主要介紹了vue的滾動條插件實現(xiàn)代碼,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09