在vue中如何使用three.js

這篇文章主要講解了“在vue中如何使用three.js”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“在vue中如何使用three.js”吧！

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

npm install three

在你需要的頁面內引入three.js

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

前邊這個名字是自己定義的

2.在頁面內寫入three.js

首先寫過three.js基礎的要分為幾部分：

01：創建場景

const scene = new THREE.Scene()

02.創建相機

代表著相機：角度、寬高比、近看、遠

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.創建一個幾何體

這是一個正方體

const Geometry = new THREE.BoxGeometry(1, 1, 1)

// 幾何體材質
const texture = new THREE.MeshBasicMaterial({
  color: 0xffff
})

// 將幾何體和材質創建成物體
const mesh = new THREE.Mesh(Geometry, texture)
// 將幾何體添加到場景中
scene.add(mesh)

04.創建渲染器

// 設置渲染器的大小
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、創建相機場景

我用的是最原始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.創建物體

我這里邊創建的是一個比較大的模型，用的貼圖紋理，也可以創建正方體之類的，上面有介紹到

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.軌道控制器

 // 創建軌道控制器 相機圍繞模型看到的角度
      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()
      // 創建球
      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);



      // 創建軌道控制器 相機圍繞模型看到的角度
      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這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！