VR+看房

• 示例
• • CSS
  • JS

示例

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，角度转 PIconst 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()

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！