直接上代码

CameraControls.js相机控制器

import * as THREE from 'three';function CameraControls(object, domElement, cb, update) {this.object = object;this.domElement = domElement !== undefined ? domElement : document;this.enabled = true;this.lookSpeed = 0.1;this.activeLook = true;this.cameraFov = object.fov;this.minPolarAngle = 0; // radiansthis.maxPolarAngle = Math.PI; // radiansthis.minAzimuthAngle = -Infinity; // radiansthis.maxAzimuthAngle = Infinity; // radiansconst lookDirection = new THREE.Vector3();const target = new THREE.Vector3();const near = 40; //最小范围const far = object.fov; //最大范围// 只要无状态和旋转的两个状态。const STATE = {NONE: -1,ROTATE: 0,};let state = STATE.NONE;const rotateStart = new THREE.Vector2();const rotateEnd = new THREE.Vector2();const rotateDelta = new THREE.Vector2();const spherical = new THREE.Spherical();const sphericalDelta = new THREE.Spherical(); // 球面function rotateLeft(angle) {sphericalDelta.theta -= angle;}function rotateUp(angle) {sphericalDelta.phi += angle;}this.handleMouseDownRotate = function (event) {rotateStart.set(event.clientX, event.clientY);};this.handleMouseMoveRotate = function (event) {rotateEnd.set(event.clientX, event.clientY);rotateDelta.subVectors(rotateEnd, rotateStart).multiplyScalar(this.lookSpeed);const element = this.domElement === document ? this.domElement.body : this.domElement;rotateLeft((2 * Math.PI * rotateDelta.x) / element.clientHeight); // yes, heightrotateUp((2 * Math.PI * rotateDelta.y) / element.clientHeight);rotateStart.copy(rotateEnd);if (cb) cb();this.update();};//鼠标按下执行的事件this.onMouseDown = function (event) {if (this.enabled === false) return;event.preventDefault();event.stopPropagation();if (this.domElement !== document) {this.domElement.focus();} else {window.focus();}if (this.activeLook && event.button === 0) {this.handleMouseDownRotate(event);state = STATE.ROTATE;}if (state !== STATE.NONE) {document.addEventListener('mousemove', _onMouseMove, false);document.addEventListener('mouseup', _onMouseUp, false);}};this.onMouseUp = function (event) {if (this.enabled === false) return;event.preventDefault();event.stopPropagation();document.removeEventListener('mousemove', _onMouseMove, false);document.removeEventListener('mouseup', _onMouseUp, false);state = STATE.NONE;};this.onMouseMove = function (event) {if (this.enabled === false) return;event.preventDefault();event.stopPropagation();if (state === STATE.ROTATE) {this.handleMouseMoveRotate(event);}};this.onMouseWheel = function (event) {if (this.enabled === false) return;event.preventDefault();event.stopPropagation();if (event.wheelDelta) {if (event.wheelDelta < 0) {this.cameraFov -= near < this.cameraFov ? 2 : 0;}if (event.wheelDelta > 0) {this.cameraFov += this.cameraFov < far ? 2 : 0;}} else if (event.detail) {if (event.detail < 0) {this.cameraFov -= near < this.cameraFov ? 2 : 0;}if (event.detail > 0) {this.cameraFov += this.cameraFov < far ? 2 : 0;}}this.object.fov = this.cameraFov;this.object.updateProjectionMatrix();};this.lookAt = function (x, y, z) {if (x.isVector3) {target.copy(x);} else {target.set(x, y, z);}this.object.lookAt(target);setOrientation(this);return this;};this.update = (function () {const targetPosition = new THREE.Vector3();return function update() {if (this.enabled === false) return;spherical.theta -= sphericalDelta.theta;spherical.phi -= sphericalDelta.phi;spherical.theta = Math.max(this.minAzimuthAngle,Math.min(this.maxAzimuthAngle, spherical.theta));spherical.phi = Math.max(this.minPolarAngle,Math.min(this.maxPolarAngle, spherical.phi));spherical.makeSafe();const { position } = this.object;targetPosition.setFromSphericalCoords(1, spherical.phi, spherical.theta).add(position);this.object.lookAt(targetPosition);this.object.target = targetPosition;sphericalDelta.set(0, 0, 0);return false;};})();function contextmenu(event) {event.preventDefault();}this.dispose = function () {this.domElement.removeEventListener('contextmenu', contextmenu, false);this.domElement.removeEventListener('mousedown', _onMouseDown, false);this.domElement.removeEventListener('mousewheel', _onMouseWheel, false);document.removeEventListener('mousemove', _onMouseMove, false);document.removeEventListener('mouseup', _onMouseUp, false);};const _onMouseMove = bind(this, this.onMouseMove);const _onMouseDown = bind(this, this.onMouseDown);const _onMouseUp = bind(this, this.onMouseUp);const _onMouseWheel = bind(this, this.onMouseWheel);this.domElement.addEventListener('contextmenu', contextmenu, false);this.domElement.addEventListener('mousedown', _onMouseDown, false);this.domElement.addEventListener('mousewheel', _onMouseWheel, false);document.addEventListener('mousemove', _onMouseMove, false);document.addEventListener('mouseup', _onMouseUp, false);function bind(scope, fn) {return function () {fn.apply(scope, arguments);};}function setOrientation(controls) {const { quaternion } = controls.object;lookDirection.set(0, 0, -1).applyQuaternion(quaternion);spherical.setFromVector3(lookDirection);}setOrientation(this);
}THREE.CameraControls = CameraControls;

Player.js 最终导出的api

import * as THREE from 'three';import './CameraControls';class Player {scene = null;camera = null;renderer = null;controls = null;parentDom = null;panoramaMesh = null;clientWidth = 0;clientHeight = 0;cameraFov = 80;T0 = new Date();constructor(config) {const { parentDom, cameraFov } = config;if (cameraFov) {if (cameraFov <= 40) {this.cameraFov = 40;} else if (cameraFov >= 120) {this.cameraFov = 120;} else {this.cameraFov = cameraFov;}} else {this.cameraFov = 80;}this.parentDom = parentDom || document.body;this.clientWidth = this.parentDom.clientWidth;this.clientHeight = this.parentDom.clientHeight;this.init();}init() {this.initScene();this.initRenderer();this.initCamera();this.initLight();this.initControls();this.animate();}initScene() {this.scene = new THREE.Scene();}initControls() {this.controls = new THREE.CameraControls(this.camera,this.renderer.domElement);this.controls.lookSpeed = 0.2; // 鼠标移动查看的速度// this.controls.minPolarAngle = Math.PI / 6; // radians// this.controls.maxPolarAngle = (Math.PI / 6) * 5; // radians}updateFov() {console.log(1);}initCamera() {this.camera = new THREE.PerspectiveCamera(this.cameraFov,this.clientWidth / this.clientHeight,1,10000);this.camera.position.x = 0;this.camera.position.y = 0;this.camera.position.z = 0;}initRenderer() {this.renderer = new THREE.WebGLRenderer();this.renderer.setSize(this.clientWidth, this.clientHeight);this.parentDom.appendChild(this.renderer.domElement);}initLight() {const ambientLight = new THREE.AmbientLight(0xffffff);ambientLight.name = 'ambientLight';const directionalLight = new THREE.DirectionalLight(0xffffff);// 把平行光放在y轴正方向上的无穷远处directionalLight.position.set(0, 1, 0);directionalLight.name = 'directionalLight';// 把平行光加到场景中this.scene.add(ambientLight);this.scene.add(directionalLight);}animate = () => {requestAnimationFrame(this.animate);this.renderer && this.renderer.render(this.scene, this.camera);};createPanorama = imageUrl => {const geometry = new THREE.SphereGeometry(100, 64, 32);geometry.scale(-1, 1, 1);const material = new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load(imageUrl), // 加载一整张纹理图片});this.panoramaMesh = new THREE.Mesh(geometry, material);this.scene.add(this.panoramaMesh);};changePanorama = imageUrl => {if (!this.panoramaMesh) {this.createPanorama(imageUrl);return;}this.panoramaMesh.material.map.dispose();this.panoramaMesh.material.dispose();this.panoramaMesh.material.map = new THREE.TextureLoader().load(imageUrl);};clearRenderer = () => {this.renderer.clear();this.renderer.dispose();this.renderer.forceContextLoss();this.renderer.domElement.remove();this.renderer = null;};dispose() {this.controls.dispose();this.clearRenderer();this.scene.children.forEach(c => c.dispose && c.dispose());this.scene.clear();}
}export default Player;

使用方法

//<div id="app"></div>
const parentDom = document.getElementById('app');
const app = new Player({parentDom});
app.createPanorama('https://img.zcool.cn/community/019d425a5c4793a8012113c7dac382.jpg@1280w_1l_2o_100sh.jpg')

效果图