ThreeJS-VR看房（二十五）

 素材：

六面图

https://www.aliyundrive.com/s/ana5vocK53x

点击链接保存，或者复制本段内容，打开「阿里云盘」APP ，无需下载极速在线查看，视频原画倍速播放。

hdr文件

链接: https://pan.baidu.com/s/1r9OUJWb_hPcJhG7erNIUhg

提取码: 6c6z

复制这段内容后打开百度网盘手机App，操作更方便哦

VR看房案例一

关键代码：

//创建一个半径为1，经纬度分段数位20的球
    const boxBufferGeometry = new THREE.BoxBufferGeometry(5, 5, 5);
    //纹理加载器
    let textureLoader = new THREE.TextureLoader();
    const pngs = [
      '4_l.jpg',
      '4_r.jpg',
      '4_u.jpg',
      '4_d.jpg',
      '4_b.jpg',
      '4_f.jpg'
    ];
    
    let materials = [];
    pngs.forEach((item, index) => {
        let cubeTextureLoader =  textureLoader.load(`three/VR/${item}`);
        if(index == 3 || index == 2){
            cubeTextureLoader.rotation= Math.PI;
            cubeTextureLoader.center = new THREE.Vector2(0.5,0.5)
        }
        materials.push(new THREE.MeshStandardMaterial({map: cubeTextureLoader}))
    })

完整代码：

  
 
  

  

效果图：

VR看房案例二

关键代码：

    //创建一个半径为1，经纬度分段数位20的球
    const boxBufferGeometry = new THREE.SphereBufferGeometry(5, 50, 50);
    //纹理加载器
    let rgbeLoader = new RGBELoader();
    rgbeLoader.load('three/VR/Living.hdr', loader => {
        //纹理加载器加载图片
        const material = new THREE.MeshStandardMaterial({
            map: loader
        });
        //根据几何体和材质创建物体
        const mesh = new THREE.Mesh(boxBufferGeometry, material);
        mesh.geometry.scale(1,1,-1);
        //将物体加入到场景
        scene.add(mesh);
    })

完整代码：

  
 
  

  

效果图：