VR+看房（Showings）

更多有趣示例 尽在 小红砖社区

示例

CSS

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

JS

const PREFIX = 'https://vrlab-image.ljcdn.com/release/auto3dhd/e61cd08df96ab6a2dce7f8cd2aa83379/images/high_cube/0/df4325d6f15cdf18551f7f88cf4ba44c/';


var imageArr = {
  'up': '0_u.jpg.q_70.jpg',
  'down': '0_d.jpg.q_70.jpg',
  'left': '0_l.jpg.q_70.jpg',
  'right': '0_r.jpg.q_70.jpg',
  'front': '0_f.jpg.q_70.jpg',
  'back': '0_b.jpg.q_70.jpg'
};


class VRController {
  constructor() {
    this.renderer = null;
    this.scene = null;
    this.camera = null;
    this.vrEvent = null;
    
    this.init();
    this.animate();
  }
  
  init() {
    // 渲染器
    this.renderer = new THREE.WebGLRenderer({ antialias: true });
    this.renderer.setPixelRatio(window.devicePixelRatio);
    this.renderer.setSize(window.innerWidth, window.innerHeight);


    // 照相机
    this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, .1, 1000);


    // 场景
    this.scene = new THREE.Scene();
    document.body.appendChild(this.renderer.domElement);


    this.setSceneBg();
    
    this.vrEvent = new VREvent(this.renderer, this.camera);
  }
  
  setSceneBg() {
    const urls = [];
    const posMap = {0: 'right', 1: 'left', 2: 'up', 3: 'down', 4: 'front', 5: 'back'};
    
    for (var i = 0; i < 6; i++) {
      const pos = posMap[i];
      urls.push(imageArr[pos]);
    }
    
    const textureCube = new THREE.CubeTextureLoader()
      .setPath(PREFIX)
      .load(urls);
    
    this.scene.background = textureCube;
  }
  
  animate() {
    requestAnimationFrame(() => this.animate());


    // -85 到 85 度之间
    const lat = Math.max(-85, Math.min(85, this.vrEvent.lat));
 
    // degToRad，角度转 PI
    const phi = THREE.Math.degToRad(lat);
    const theta = THREE.Math.degToRad(this.vrEvent.lon);
    
    this.camera.lookAt(new THREE.Vector3(
      1 * Math.cos(phi) * Math.cos(theta),
      1 * Math.sin(phi),
      1 * Math.cos(phi) * Math.sin(theta)
    ));
    this.renderer.render(this.scene, this.camera);
  }
}


class VREvent {
  constructor(renderer, camera) {
    this.renderer = renderer;
    this.camera = camera;
    
    this.onPointerDownPointerX = 0;
    this.onPointerDownPointerY = 0;
    this.onPointerDownLon = 0;
    this.onPointerDownLat = 0;
    
    this.lon = 0;
    this.lat = 0;
    
    this.onWindowResized = this.onWindowResized.bind(this);
    this.onDocumentMouseDown = this.onDocumentMouseDown.bind(this);
    this.onDocumentMouseWheel = this.onDocumentMouseWheel.bind(this);
    
    window.addEventListener('resize', this.onWindowResized, false);
    document.addEventListener('mousedown', this.onDocumentMouseDown, false);
    document.addEventListener('wheel', this.onDocumentMouseWheel, false);
  }
  
  onWindowResized(event) {
    this.renderer.setSize(window.innerWidth, window.innerHeight);
    this.camera.aspect = window.innerWidth / window.innerHeight;
    this.camera.updateProjectionMatrix();
  }
  
  onDocumentMouseDown(event) {
    event.preventDefault();
    this.onPointerDownPointerX = event.clientX;
    this.onPointerDownPointerY = event.clientY;
    this.onPointerDownLon = this.lon;
    this.onPointerDownLat = this.lat;
    
    this.onDocumentMouseMove = this.onDocumentMouseMove.bind(this);
    this.onDocumentMouseUp = this.onDocumentMouseUp.bind(this);
    document.addEventListener('mousemove', this.onDocumentMouseMove, false);
    document.addEventListener('mouseup', this.onDocumentMouseUp, false);
  }
  
  onDocumentMouseMove(event) {
    var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
    var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;
    this.lon -= movementX * 0.1;
    this.lat += movementY * 0.1;
  }
  
  onDocumentMouseUp(event) {
    document.removeEventListener('mousemove', this.onDocumentMouseMove, false);
    document.removeEventListener('mouseup', this.onDocumentMouseUp, false);
  }
  
  onDocumentMouseWheel(event) {
    var fov = this.camera.fov + event.deltaY * 0.05;
    this.camera.fov = THREE.Math.clamp(fov, 10, 75);
    this.camera.updateProjectionMatrix();
  }
}
new VRController()