利用three.js七步實現VR看房

這裡我用的是vue框架：

首先下載安裝three.js => npm install three；然後import * as THREE from 'three'匯入元件中；接下來就可以在元件中編寫我們的three.js程式碼

1. 建立場景：
   const scene = new THREE.Scene()
2. 建立相機：
   const camera = new THREE.PerspectiveCamera(
   70, //視角度數
   window.innerWidth / window.innerHeight, //寬高比
   0.1, //近平面
   1000 //遠平面
   )

   //設定相機位置

   camera.position.z=-1
3. 建立渲染器及繫結渲染節點：

   const renderer = new THREE.WebGLRenderer();

   renderer.setSize(window.innerWidth,window.innerHeight)

   document.body.appendChild(renderer.domElement);
4. 建立幾何體（我這邊建立的是正方體）：
   const zhengfangxing = new THREE.BoxGeometry(10,10,10);
5. 建立軌道控制器以及設定阻尼
   const controls = new OrbitControls(camera,renderer.domElement)
   //設定帶有阻尼的慣性
   controls.enableDamping = true
   //設定阻尼的係數（阻尼越大，滑動越慢）
   controls.dampingFactor = 0.5
6. 貼圖（蔣正方體的六個面貼上對應的圖片)
   //匯入照片

   var arr = ['zuo','you','shang','xia','qian','hou']

   var tietu = []

   //載入圖片

   arr.forEach((item)=>{

   //紋理載入

   let img = new THREE.TextureLoader().load(`/src/assets/keting/${item}.jpg`,function(){

   renderer.render(scene,camera)

   })

   console.log(img,'-------------------------')

   //建立材質貼圖（new THREE.MeshBasicMaterial ==》設定正方體的材質）

   tietu.push(new THREE.MeshBasicMaterial({ map: img }))

   })
7. 建立網格：

   //將正方體和材質放入網格

   const cube = new THREE.Mesh(zhengfangxing,tietu)

   然後將網格新增到場景中

   scene.add(cube)

   最後定義animate函式渲染和更新

   function animate(){

   //請求每一幀函式

   requestAnimationFrame(animate)

   //渲染

   renderer.render(scene,camera)

   controls.update()

   }

   animate()

   註釋：如果大小效果不合適可以透過集合體的scale()方法縮放大小