手把手教你在vue中使用three.js

更新時(shí)間：2023年03月01日 10:55:00 作者：繁星如夢(mèng)&

最近在vue3項(xiàng)目中通過(guò)three.js實(shí)現(xiàn)了實(shí)際的三維效果demo,下面這篇文章主要給大家介紹了關(guān)于在vue中使用three.js的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

在vue中使用three.js

下面我會(huì)介紹three.js的基礎(chǔ)寫(xiě)法，和在vue中寫(xiě)入three.js的寫(xiě)法。

three在vue中使用的時(shí)候，用到紋理圖片、模型加載不出來(lái)的時(shí)候的解決辦法，在下面會(huì)具體體現(xiàn)出來(lái)。

效果展示：vr看房效果

1.首先安裝three.js、引入

npm install three

在你需要的頁(yè)面內(nèi)引入three.js

//import * as THREE from 'three' 
import * as Three from 'three'

前邊這個(gè)名字是自己定義的

2.在頁(yè)面內(nèi)寫(xiě)入three.js

首先寫(xiě)過(guò)three.js基礎(chǔ)的要分為幾部分：

01：創(chuàng)建場(chǎng)景

const scene = new THREE.Scene()

02.創(chuàng)建相機(jī)

代表著相機(jī)：角度、寬高比、近看、遠(yuǎn)

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)

這代表相機(jī)的位置：x y z

camera.position.set(0, 0, 10)

把相機(jī)添加到場(chǎng)景中

scene.add(camera)

03.創(chuàng)建一個(gè)幾何體

這是一個(gè)正方體

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)
// 將幾何體添加到場(chǎng)景中
scene.add(mesh)

04.創(chuàng)建渲染器

// 設(shè)置渲染器的大小
render.setSize(window.innerWidth, window.innerHeight)

// 將渲染器添加到頁(yè)面 將webgl渲染的canves添加到body
document.body.appendChild(render.domElement)

下邊是把three.js寫(xiě)入vue2中：

上面介紹了three.js的基礎(chǔ)寫(xiě)法，下邊是vue2的寫(xiě)法

01.引入

軌道控制器為了讓模型顯示的更為自然

import * as Three from 'three'
// 導(dǎo)入軌道控制器
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.頁(yè)面div的承載

<template>
  <div id="container">
   
  </div>
</template>

03.js中獲取div、創(chuàng)建相機(jī)場(chǎng)景

我用的是最原始js獲取的，在vue中可以使用ref

let container = document.getElementById('container');

      // 添加相機(jī)
      camera = new Three.PerspectiveCamera(70, container.clientWidth/container.clientHeight, 0.01, 1000);
      // 相機(jī)的位置
      camera.position.z = 0.1

      // 場(chǎng)景
      scene = new Three.Scene()

04.創(chuàng)建物體

我這里邊創(chuàng)建的是一個(gè)比較大的模型，用的貼圖紋理，也可以創(chuàng)建正方體之類(lèi)的，上面有介紹到

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);
      // 將渲染器添加到頁(yè)面
      container.appendChild(renderer.domElement);

06.軌道控制器

 // 創(chuàng)建軌道控制器 相機(jī)圍繞模型看到的角度
      const OrbitControl = new OrbitControls(camera, renderer.domElement)
      // 設(shè)置軌道自然
      OrbitControl.enableDamping = true
      // 設(shè)置慣性
      OrbitControl.update()

07.瀏覽器自動(dòng)渲染

animate(){
      // 瀏覽器自動(dòng)渲染下一幀
      requestAnimationFrame(this.animate);
     
      // 渲染到頁(yè)面
      renderer.render(scene,camera); 
    }

以上是three.js在vue的寫(xiě)法，是要放到事件里邊的，下面我會(huì)吧完整代碼拿出來(lái)

遇到的問(wèn)題：圖片的位置具體原因我前邊的文章提到過(guò)，要把圖片放到publice下面

<!--  -->
<template>
  <div id="container">
   
  </div>
</template>

<script>
import * as Three from 'three'
// 導(dǎo)入軌道控制器
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');

      // 添加相機(jī)
      camera = new Three.PerspectiveCamera(70, container.clientWidth/container.clientHeight, 0.01, 1000);
      // 相機(jī)的位置
      camera.position.z = 0.1

      // 場(chǎng)景
      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);
      // 將渲染器添加到頁(yè)面
      container.appendChild(renderer.domElement);



      // 創(chuàng)建軌道控制器 相機(jī)圍繞模型看到的角度
      const OrbitControl = new OrbitControls(camera, renderer.domElement)
      // 設(shè)置軌道自然
      OrbitControl.enableDamping = true
      // 設(shè)置慣性
      OrbitControl.update()


    },
    animate(){
      // 瀏覽器自動(dòng)渲染下一幀
      requestAnimationFrame(this.animate);
     
      // 渲染到頁(yè)面
      renderer.render(scene,camera); 
    }
  },
  mounted(){
      this.init()
      this.animate()
  }

}

</script>
<style scoped>
#container{
    width: 100vw;
    height: 100vh;
}
</style>