利用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()方法缩放大小