【threejs】创建FPS相机

原理说明

控制器是一个很麻烦的东西，需要创建更多的类来管理相机行为，并且可自定义性差，所以将部分控制器的功能绑定到相机上，可以解决这些问题，所以我以 FlyControls为例，将控制器功能绑定到相机上，然后可以通过直接给相机发送命令控制其行为，并可以根据业务自定义业务。

相机代码

控制器的核心其实没有什么业务，只有几个简单的函数，并且都是没有实际行为的 ，所以我们直接继承想用的相机到我们的相机class上，再添加控制器事件到里面就行了

import { PerspectiveCamera, Quaternion, Vector3 } from "three";
const _changeEvent: any = { type: 'change' };const _EPS = 0.0001;export default class FlyCamera extends PerspectiveCamera {domElement: null | HTMLElement;_tmpQuaternion: Quaternion;enabled: boolean;state: number;keys: {};mouseButtons: { LEFT: null; MIDDLE: null; RIGHT: null; };touches: { ONE: null; TWO: null; };movementSpeed: number;rollSpeed: number;dragToLook: boolean;autoForward: boolean;_moveState: { up: number; down: number; left: number; right: number; forward: number; back: number; pitchUp: number; pitchDown: number; yawLeft: number; yawRight: number; rollLeft: number; rollRight: number; };_moveVector: Vector3;_rotationVector: Vector3;_lastQuaternion: Quaternion;_lastPosition: Vector3;_status: number;_onKeyDown: (event: { altKey: any; code: any; }) => void;_onKeyUp: (event: { code: any; }) => void;_onPointerMove: (event: { pageX: number; pageY: number; }) => void;_onPointerDown: (event: { button: any; }) => void;_onPointerUp: (event: { button: any; }) => void;_onPointerCancel: (this: any) => void;_onContextMenu: (event: { preventDefault: () => void; }) => void;constructor(fov: number | undefined, aspect: number | undefined, near: number | undefined, far: number | undefined) {super(fov, aspect, near, far)this.domElement = nullthis._tmpQuaternion = new Quaternion();this.enabled = true;this.state = - 1;this.keys = {};this.mouseButtons = { LEFT: null, MIDDLE: null, RIGHT: null };this.touches = { ONE: null, TWO: null };this.movementSpeed = 1.0;this.rollSpeed =.1;this.dragToLook = false;this.autoForward = false;// internalsthis._moveState = { up: 0, down: 0, left: 0, right: 0, forward: 0, back: 0, pitchUp: 0, pitchDown: 0, yawLeft: 0, yawRight: 0, rollLeft: 0, rollRight: 0 };this._moveVector = new Vector3(0, 0, 0);this._rotationVector = new Vector3(0, 0, 0);this._lastQuaternion = new Quaternion();this._lastPosition = new Vector3();this._status = 0;// event listenersthis._onKeyDown = onKeyDown.bind(this);this._onKeyUp = onKeyUp.bind(this);this._onPointerMove = onPointerMove.bind(this);this._onPointerDown = onPointerDown.bind(this);this._onPointerUp = onPointerUp.bind(this);this._onPointerCancel = onPointerCancel.bind(this);this._onContextMenu = onContextMenu.bind(this);}connect(domElement: HTMLCanvasElement) {this.domElement = domElementwindow.addEventListener('keydown', this._onKeyDown);window.addEventListener('keyup', this._onKeyUp);this.domElement.addEventListener('pointermove', this._onPointerMove);this.domElement.addEventListener('pointerdown', this._onPointerDown);this.domElement.addEventListener('pointerup', this._onPointerUp);this.domElement.addEventListener('pointercancel', this._onPointerCancel);this.domElement.addEventListener('contextmenu', this._onContextMenu);}disconnect() {window.removeEventListener('keydown', this._onKeyDown);window.removeEventListener('keyup', this._onKeyUp);if (this.domElement) {this.domElement.removeEventListener('pointermove', this._onPointerMove);this.domElement.removeEventListener('pointerdown', this._onPointerDown);this.domElement.removeEventListener('pointerup', this._onPointerUp);this.domElement.removeEventListener('pointercancel', this._onPointerCancel);this.domElement.removeEventListener('contextmenu', this._onContextMenu);this.domElement = null}}dispose() {this.disconnect();}update(delta: number) {if (this.enabled === false) return;const object = this;const moveMult = delta * this.movementSpeed;const rotMult = delta * this.rollSpeed;object.translateX(this._moveVector.x * moveMult);object.translateY(this._moveVector.y * moveMult);object.translateZ(this._moveVector.z * moveMult);this._tmpQuaternion.set(this._rotationVector.x * rotMult, this._rotationVector.y * rotMult, this._rotationVector.z * rotMult, 1).normalize();object.quaternion.multiply(this._tmpQuaternion);if (this._lastPosition.distanceToSquared(object.position) > _EPS ||8 * (1 - this._lastQuaternion.dot(object.quaternion)) > _EPS) {this.dispatchEvent(_changeEvent);this._lastQuaternion.copy(object.quaternion);this._lastPosition.copy(object.position);}console.log('update');}// private_updateMovementVector() {const forward = (this._moveState.forward || (this.autoForward && !this._moveState.back)) ? 1 : 0;this._moveVector.x = (- this._moveState.left + this._moveState.right);this._moveVector.y = (- this._moveState.down + this._moveState.up);this._moveVector.z = (- forward + this._moveState.back);//console.log( 'move:', [ this._moveVector.x, this._moveVector.y, this._moveVector.z ] );}_updateRotationVector() {this._rotationVector.x = (- this._moveState.pitchDown + this._moveState.pitchUp);this._rotationVector.y = (- this._moveState.yawRight + this._moveState.yawLeft);this._rotationVector.z = (- this._moveState.rollRight + this._moveState.rollLeft);//console.log( 'rotate:', [ this._rotationVector.x, this._rotationVector.y, this._rotationVector.z ] );}_getContainerDimensions() {if (!this.domElement) return// 类型保护if (this.domElement instanceof HTMLElement && this.domElement === document.body) {return {size: [this.domElement.offsetWidth, this.domElement.offsetHeight],offset: [this.domElement.offsetLeft, this.domElement.offsetTop]};} else {return {size: [window.innerWidth, window.innerHeight],offset: [0, 0]};}}
}function onKeyDown(this: any, event: { altKey: any; code: any; }) {if (event.altKey || this.enabled === false) {return;}switch (event.code) {case 'ShiftLeft':case 'ShiftRight': this.movementSpeedMultiplier = .1; break;case 'KeyW': this._moveState.forward = 1; break;case 'KeyS': this._moveState.back = 1; break;case 'KeyA': this._moveState.left = 1; break;case 'KeyD': this._moveState.right = 1; break;case 'KeyR': this._moveState.up = 1; break;case 'KeyF': this._moveState.down = 1; break;case 'ArrowUp': this._moveState.pitchUp = 1; break;case 'ArrowDown': this._moveState.pitchDown = 1; break;case 'ArrowLeft': this._moveState.yawLeft = 1; break;case 'ArrowRight': this._moveState.yawRight = 1; break;case 'KeyQ': this._moveState.rollLeft = 1; break;case 'KeyE': this._moveState.rollRight = 1; break;}this._updateMovementVector();this._updateRotationVector();}function onKeyUp(this: any, event: { code: any; }) {if (this.enabled === false) return;switch (event.code) {case 'ShiftLeft':case 'ShiftRight': this.movementSpeedMultiplier = 1; break;case 'KeyW': this._moveState.forward = 0; break;case 'KeyS': this._moveState.back = 0; break;case 'KeyA': this._moveState.left = 0; break;case 'KeyD': this._moveState.right = 0; break;case 'KeyR': this._moveState.up = 0; break;case 'KeyF': this._moveState.down = 0; break;case 'ArrowUp': this._moveState.pitchUp = 0; break;case 'ArrowDown': this._moveState.pitchDown = 0; break;case 'ArrowLeft': this._moveState.yawLeft = 0; break;case 'ArrowRight': this._moveState.yawRight = 0; break;case 'KeyQ': this._moveState.rollLeft = 0; break;case 'KeyE': this._moveState.rollRight = 0; break;}this._updateMovementVector();this._updateRotationVector();}function onPointerDown(this: any, event: { button: any; }) {if (this.enabled === false) return;if (this.dragToLook) {this._status++;} else {switch (event.button) {case 0: this._moveState.forward = 1; break;case 2: this._moveState.back = 1; break;}this._updateMovementVector();}}function onPointerMove(this: any, event: { pageX: number; pageY: number; }) {if (this.enabled === false) return;if (!this.dragToLook || this._status > 0) {const container = this._getContainerDimensions();const halfWidth = container.size[0] / 2;const halfHeight = container.size[1] / 2;this._moveState.yawLeft = - ((event.pageX - container.offset[0]) - halfWidth) / halfWidth;this._moveState.pitchDown = ((event.pageY - container.offset[1]) - halfHeight) / halfHeight;this._updateRotationVector();}}function onPointerUp(this: any, event: { button: any; }) {if (this.enabled === false) return;if (this.dragToLook) {this._status--;this._moveState.yawLeft = this._moveState.pitchDown = 0;} else {switch (event.button) {case 0: this._moveState.forward = 0; break;case 2: this._moveState.back = 0; break;}this._updateMovementVector();}this._updateRotationVector();}function onPointerCancel(this: any) {if (this.enabled === false) return;if (this.dragToLook) {this._status = 0;this._moveState.yawLeft = this._moveState.pitchDown = 0;} else {this._moveState.forward = 0;this._moveState.back = 0;this._updateMovementVector();}this._updateRotationVector();}function onContextMenu(this: any, event: { preventDefault: () => void; }) {if (this.enabled === false) return;event.preventDefault();}

相机使用

	import { BoxGeometry, Clock, EventDispatcher, Mesh, MeshNormalMaterial, PerspectiveCamera, Scene, WebGLRenderer } from "three";
import FlyCamera from "../Cameras/FlyCamera";export default class Engine extends EventDispatcher {scene: Scenecamera: FlyCamera;renderer: WebGLRendererdom: HTMLElementclock: Clockconstructor(dom: HTMLElement) {super()this.dom = domlet w = dom.offsetWidthlet h = dom.offsetHeightlet scene = new Scene();let camera = new FlyCamera(75, w / h, 0.1, 1000);let renderer = new WebGLRenderer();renderer.setSize(w, h);camera.connect(renderer.domElement)//这是将鼠标互动的dom元素绑定到上面，如果不用这个dom的话，可以用其他div做成类似控制面板的东西（比如绑定触摸摇杆控件）dom.appendChild(renderer.domElement);const geometry = new BoxGeometry();const material = new MeshNormalMaterial();const cube = new Mesh(geometry, material);scene.add(cube);camera.position.set(0,0,5)camera.lookAt(0, 0, 0)dom.addEventListener('resize', this.resize)this.scene = scenethis.camera = camerathis.renderer = rendererthis.clock = new Clock()this.animate();}resize = () => {let dom = this.domlet w = dom.offsetWidthlet h = dom.offsetHeightthis.camera.aspect = w / hthis.renderer.setSize(w, h);}animate() {requestAnimationFrame(this.animate.bind(this));this.render();}render() {this.renderer.render(this.scene, this.camera);const delta = this.clock.getDelta();this.camera.update(delta)}
}

关于自定义

这里我用js代码演示，绑定的任然是flyControl

import { Clock, PerspectiveCamera, Quaternion, Vector3 } from "three";export default class FPSCamera extends PerspectiveCamera {constructor(fov, aspect, near, far, domElement = null) {super(fov, aspect, near, far)this.domElement = nullthis._tmpQuaternion = new Quaternion();this.enabled = true;this.state = - 1;this.keys = {};this.mouseButtons = { LEFT: null, MIDDLE: null, RIGHT: null };this.touches = { ONE: null, TWO: null };this.movementSpeed = 1.0;this.rollSpeed = 0.2;this.dragToLook = false;this.autoForward = false;// internalsthis._moveState = { up: 0, down: 0, left: 0, right: 0, forward: 0, back: 0, pitchUp: 0, pitchDown: 0, yawLeft: 0, yawRight: 0, rollLeft: 0, rollRight: 0 };this._moveVector = new Vector3(0, 0, 0);this._rotationVector = new Vector3(0, 0, 0);this._lastQuaternion = new Quaternion();this._lastPosition = new Vector3();this._status = 0;// event listenersthis._onKeyDown = onKeyDown.bind(this);this._onKeyUp = onKeyUp.bind(this);this._onPointerMove = onPointerMove.bind(this);this._onPointerDown = onPointerDown.bind(this);this._onPointerUp = onPointerUp.bind(this);this._onPointerCancel = onPointerCancel.bind(this);this._onContextMenu = onContextMenu.bind(this);// animatethis._clock = new Clock()this.active = falseif (domElement) this.connect(domElement)}connect(domElement) {console.log('FPSCAMERA CONNECT', domElement);this.domElement = domElementwindow.addEventListener('keydown', this._onKeyDown);window.addEventListener('keyup', this._onKeyUp);this.domElement.addEventListener('pointermove', this._onPointerMove);this.domElement.addEventListener('pointerdown', this._onPointerDown);this.domElement.addEventListener('pointerup', this._onPointerUp);this.domElement.addEventListener('pointercancel', this._onPointerCancel);this.domElement.addEventListener('contextmenu', this._onContextMenu);}disconnect() {window.removeEventListener('keydown', this._onKeyDown);window.removeEventListener('keyup', this._onKeyUp);this.domElement.removeEventListener('pointermove', this._onPointerMove);this.domElement.removeEventListener('pointerdown', this._onPointerDown);this.domElement.removeEventListener('pointerup', this._onPointerUp);this.domElement.removeEventListener('pointercancel', this._onPointerCancel);this.domElement.removeEventListener('contextmenu', this._onContextMenu);this.domElement = null}dispose() {this.disconnect();}update(delta) {const _EPS = 0.000001;if (this.enabled === false) return;const object = this;const moveMult = delta * this.movementSpeed;const rotMult = delta * this.rollSpeed;object.translateX(this._moveVector.x * moveMult);object.translateY(this._moveVector.y * moveMult);object.translateZ(this._moveVector.z * moveMult);this._tmpQuaternion.set(this._rotationVector.x * rotMult, this._rotationVector.y * rotMult, this._rotationVector.z * rotMult, 1).normalize();object.quaternion.multiply(this._tmpQuaternion);if (this._lastPosition.distanceToSquared(object.position) > _EPS ||8 * (1 - this._lastQuaternion.dot(object.quaternion)) > _EPS) {this.dispatchEvent({ type: 'change' });this._lastQuaternion.copy(object.quaternion);this._lastPosition.copy(object.position);}// console.log('update');}// startstart() {let loop = () => {if (this.active)requestAnimationFrame(loop)else returnlet delta = this._clock.getDelta()this.update(delta)}this.active = trueloop()}end() {this.active = false}// private_updateMovementVector() {const forward = (this._moveState.forward || (this.autoForward && !this._moveState.back)) ? 1 : 0;this._moveVector.x = (- this._moveState.left + this._moveState.right);this._moveVector.y = (- this._moveState.down + this._moveState.up);this._moveVector.z = (- forward + this._moveState.back);//console.log( 'move:', [ this._moveVector.x, this._moveVector.y, this._moveVector.z ] );}_updateRotationVector() {this._rotationVector.x = (- this._moveState.pitchDown + this._moveState.pitchUp);this._rotationVector.y = (- this._moveState.yawRight + this._moveState.yawLeft);this._rotationVector.z = (- this._moveState.rollRight + this._moveState.rollLeft);//console.log( 'rotate:', [ this._rotationVector.x, this._rotationVector.y, this._rotationVector.z ] );}_getContainerDimensions() {if (this.domElement != document) {return {size: [this.domElement.offsetWidth, this.domElement.offsetHeight],offset: [this.domElement.offsetLeft, this.domElement.offsetTop]};} else {return {size: [window.innerWidth, window.innerHeight],offset: [0, 0]};}}
}function onKeyDown(event) {if (event.altKey || this.enabled === false) {return;}switch (event.code) {case 'ShiftLeft':case 'ShiftRight': this.movementSpeedMultiplier = .1; break;case 'KeyW': this._moveState.forward = 1; break;case 'KeyS': this._moveState.back = 1; break;case 'KeyA': this._moveState.left = 1; break;case 'KeyD': this._moveState.right = 1; break;case 'KeyR': this._moveState.up = 1; break;case 'KeyF': this._moveState.down = 1; break;case 'ArrowUp': this._moveState.pitchUp = 1; break;case 'ArrowDown': this._moveState.pitchDown = 1; break;case 'ArrowLeft': this._moveState.yawLeft = 1; break;case 'ArrowRight': this._moveState.yawRight = 1; break;case 'KeyQ': this._moveState.rollLeft = 1; break;case 'KeyE': this._moveState.rollRight = 1; break;}this._updateMovementVector();this._updateRotationVector();}function onKeyUp(event) {if (this.enabled === false) return;switch (event.code) {case 'ShiftLeft':case 'ShiftRight': this.movementSpeedMultiplier = 1; break;case 'KeyW': this._moveState.forward = 0; break;case 'KeyS': this._moveState.back = 0; break;case 'KeyA': this._moveState.left = 0; break;case 'KeyD': this._moveState.right = 0; break;case 'KeyR': this._moveState.up = 0; break;case 'KeyF': this._moveState.down = 0; break;case 'ArrowUp': this._moveState.pitchUp = 0; break;case 'ArrowDown': this._moveState.pitchDown = 0; break;case 'ArrowLeft': this._moveState.yawLeft = 0; break;case 'ArrowRight': this._moveState.yawRight = 0; break;case 'KeyQ': this._moveState.rollLeft = 0; break;case 'KeyE': this._moveState.rollRight = 0; break;}this._updateMovementVector();this._updateRotationVector();}function onPointerDown(event) {if (this.enabled === false) return;if (this.dragToLook) {this._status++;} else {switch (event.button) {case 0: this._moveState.forward = 1; break;case 2: this._moveState.back = 1; break;}this._updateMovementVector();}}function onPointerMove(event) {if (this.enabled === false) return;if (!this.dragToLook || this._status > 0) {const container = this._getContainerDimensions();const halfWidth = container.size[0] / 2;const halfHeight = container.size[1] / 2;this._moveState.yawLeft = - ((event.pageX - container.offset[0]) - halfWidth) / halfWidth;this._moveState.pitchDown = ((event.pageY - container.offset[1]) - halfHeight) / halfHeight;this._updateRotationVector();}}function onPointerUp(event) {if (this.enabled === false) return;if (this.dragToLook) {this._status--;this._moveState.yawLeft = this._moveState.pitchDown = 0;} else {switch (event.button) {case 0: this._moveState.forward = 0; break;case 2: this._moveState.back = 0; break;}this._updateMovementVector();}this._updateRotationVector();}function onPointerCancel() {if (this.enabled === false) return;if (this.dragToLook) {this._status = 0;this._moveState.yawLeft = this._moveState.pitchDown = 0;} else {this._moveState.forward = 0;this._moveState.back = 0;this._updateMovementVector();}this._updateRotationVector();}function onContextMenu(event) {if (this.enabled === false) return;event.preventDefault();}

这里我添加了start和end方法来暂停和启动它，而在之前ts的版本中，我直接再渲染动画帧中调用了update方法

原版

这是一个最纯净的js版本

import { PerspectiveCamera, Quaternion, Vector3 } from "three";
const _changeEvent = { type: 'change' };export default class FlyCamera extends PerspectiveCamera {constructor(fov, aspect, near, far, domElement = null) {super(fov, aspect, near, far)this.domElement = nullthis._tmpQuaternion = new Quaternion();this.enabled = true;this.state = - 1;this.keys = {};this.mouseButtons = { LEFT: null, MIDDLE: null, RIGHT: null };this.touches = { ONE: null, TWO: null };this.movementSpeed = 1.0;this.rollSpeed = 0.005;this.dragToLook = false;this.autoForward = false;// internalsthis._moveState = { up: 0, down: 0, left: 0, right: 0, forward: 0, back: 0, pitchUp: 0, pitchDown: 0, yawLeft: 0, yawRight: 0, rollLeft: 0, rollRight: 0 };this._moveVector = new Vector3(0, 0, 0);this._rotationVector = new Vector3(0, 0, 0);this._lastQuaternion = new Quaternion();this._lastPosition = new Vector3();this._status = 0;// event listenersthis._onKeyDown = onKeyDown.bind(this);this._onKeyUp = onKeyUp.bind(this);this._onPointerMove = onPointerMove.bind(this);this._onPointerDown = onPointerDown.bind(this);this._onPointerUp = onPointerUp.bind(this);this._onPointerCancel = onPointerCancel.bind(this);this._onContextMenu = onContextMenu.bind(this);if (domElement) this.connect(domElement)}connect(domElement) {this.domElement = domElementwindow.addEventListener('keydown', this._onKeyDown);window.addEventListener('keyup', this._onKeyUp);this.domElement.addEventListener('pointermove', this._onPointerMove);this.domElement.addEventListener('pointerdown', this._onPointerDown);this.domElement.addEventListener('pointerup', this._onPointerUp);this.domElement.addEventListener('pointercancel', this._onPointerCancel);this.domElement.addEventListener('contextmenu', this._onContextMenu);}disconnect() {window.removeEventListener('keydown', this._onKeyDown);window.removeEventListener('keyup', this._onKeyUp);this.domElement.removeEventListener('pointermove', this._onPointerMove);this.domElement.removeEventListener('pointerdown', this._onPointerDown);this.domElement.removeEventListener('pointerup', this._onPointerUp);this.domElement.removeEventListener('pointercancel', this._onPointerCancel);this.domElement.removeEventListener('contextmenu', this._onContextMenu);this.domElement = null}dispose() {this.disconnect();}update(delta) {const _EPS = 0.000001;if (this.enabled === false) return;const object = this;const moveMult = delta * this.movementSpeed;const rotMult = delta * this.rollSpeed;object.translateX(this._moveVector.x * moveMult);object.translateY(this._moveVector.y * moveMult);object.translateZ(this._moveVector.z * moveMult);this._tmpQuaternion.set(this._rotationVector.x * rotMult, this._rotationVector.y * rotMult, this._rotationVector.z * rotMult, 1).normalize();object.quaternion.multiply(this._tmpQuaternion);if (this._lastPosition.distanceToSquared(object.position) > _EPS ||8 * (1 - this._lastQuaternion.dot(object.quaternion)) > _EPS) {this.dispatchEvent({ type: 'change' });this._lastQuaternion.copy(object.quaternion);this._lastPosition.copy(object.position);}console.log('update');}// private_updateMovementVector() {const forward = (this._moveState.forward || (this.autoForward && !this._moveState.back)) ? 1 : 0;this._moveVector.x = (- this._moveState.left + this._moveState.right);this._moveVector.y = (- this._moveState.down + this._moveState.up);this._moveVector.z = (- forward + this._moveState.back);//console.log( 'move:', [ this._moveVector.x, this._moveVector.y, this._moveVector.z ] );}_updateRotationVector() {this._rotationVector.x = (- this._moveState.pitchDown + this._moveState.pitchUp);this._rotationVector.y = (- this._moveState.yawRight + this._moveState.yawLeft);this._rotationVector.z = (- this._moveState.rollRight + this._moveState.rollLeft);//console.log( 'rotate:', [ this._rotationVector.x, this._rotationVector.y, this._rotationVector.z ] );}_getContainerDimensions() {if (this.domElement != document) {return {size: [this.domElement.offsetWidth, this.domElement.offsetHeight],offset: [this.domElement.offsetLeft, this.domElement.offsetTop]};} else {return {size: [window.innerWidth, window.innerHeight],offset: [0, 0]};}}
}function onKeyDown(event) {if (event.altKey || this.enabled === false) {return;}switch (event.code) {case 'ShiftLeft':case 'ShiftRight': this.movementSpeedMultiplier = .1; break;case 'KeyW': this._moveState.forward = 1; break;case 'KeyS': this._moveState.back = 1; break;case 'KeyA': this._moveState.left = 1; break;case 'KeyD': this._moveState.right = 1; break;case 'KeyR': this._moveState.up = 1; break;case 'KeyF': this._moveState.down = 1; break;case 'ArrowUp': this._moveState.pitchUp = 1; break;case 'ArrowDown': this._moveState.pitchDown = 1; break;case 'ArrowLeft': this._moveState.yawLeft = 1; break;case 'ArrowRight': this._moveState.yawRight = 1; break;case 'KeyQ': this._moveState.rollLeft = 1; break;case 'KeyE': this._moveState.rollRight = 1; break;}this._updateMovementVector();this._updateRotationVector();}function onKeyUp(event) {if (this.enabled === false) return;switch (event.code) {case 'ShiftLeft':case 'ShiftRight': this.movementSpeedMultiplier = 1; break;case 'KeyW': this._moveState.forward = 0; break;case 'KeyS': this._moveState.back = 0; break;case 'KeyA': this._moveState.left = 0; break;case 'KeyD': this._moveState.right = 0; break;case 'KeyR': this._moveState.up = 0; break;case 'KeyF': this._moveState.down = 0; break;case 'ArrowUp': this._moveState.pitchUp = 0; break;case 'ArrowDown': this._moveState.pitchDown = 0; break;case 'ArrowLeft': this._moveState.yawLeft = 0; break;case 'ArrowRight': this._moveState.yawRight = 0; break;case 'KeyQ': this._moveState.rollLeft = 0; break;case 'KeyE': this._moveState.rollRight = 0; break;}this._updateMovementVector();this._updateRotationVector();}function onPointerDown(event) {if (this.enabled === false) return;if (this.dragToLook) {this._status++;} else {switch (event.button) {case 0: this._moveState.forward = 1; break;case 2: this._moveState.back = 1; break;}this._updateMovementVector();}}function onPointerMove(event) {if (this.enabled === false) return;if (!this.dragToLook || this._status > 0) {const container = this._getContainerDimensions();const halfWidth = container.size[0] / 2;const halfHeight = container.size[1] / 2;this._moveState.yawLeft = - ((event.pageX - container.offset[0]) - halfWidth) / halfWidth;this._moveState.pitchDown = ((event.pageY - container.offset[1]) - halfHeight) / halfHeight;this._updateRotationVector();}}function onPointerUp(event) {if (this.enabled === false) return;if (this.dragToLook) {this._status--;this._moveState.yawLeft = this._moveState.pitchDown = 0;} else {switch (event.button) {case 0: this._moveState.forward = 0; break;case 2: this._moveState.back = 0; break;}this._updateMovementVector();}this._updateRotationVector();}function onPointerCancel() {if (this.enabled === false) return;if (this.dragToLook) {this._status = 0;this._moveState.yawLeft = this._moveState.pitchDown = 0;} else {this._moveState.forward = 0;this._moveState.back = 0;this._updateMovementVector();}this._updateRotationVector();}function onContextMenu(event) {if (this.enabled === false) return;event.preventDefault();}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/63866.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【Oracle11g SQL详解】创建与管理视图：`CREATE VIEW`、`ALTER VIEW` 和 `DROP VIEW`

【Oracle11g SQL详解】创建与管理视图：`CREATE VIEW`、`ALTER VIEW` 和 `DROP VIEW`

创建与管理视图：CREATE VIEW、ALTER VIEW 和 DROP VIEW 视图（View）是 SQL 中的一种虚拟表，是从数据库中一个或多个表的查询结果创建的。它不存储实际数据，而是存储查询的定义，用户可以像使用表一样使用视图…
阅读更多...
JPG 转 PDF：免费好用的在线图片转 PDF 工具

JPG 转 PDF：免费好用的在线图片转 PDF 工具

JPG 转 PDF：免费好用的在线图片转 PDF 工具 在日常工作和生活中，我们经常需要将图片转换为 PDF 格式。无论是制作电子文档、准备演示材料，还是整理照片集，将图片转换为 PDF 都是一个常见的需求。今天为大家介绍一款完全免费、无需…
阅读更多...
C++ webrtc开发（非原生开发，linux上使用libdatachannel库）

C++ webrtc开发（非原生开发，linux上使用libdatachannel库）

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言一、libdatachannel库的下载和build二、开始使用 1.2.引入库3.开始使用 总结 前言 使用c开发webrtc在互联网上留下的资料甚少，经过我一段时间的探…
阅读更多...
深入理解 Apache Shiro：安全框架全解析

深入理解 Apache Shiro：安全框架全解析

亲爱的小伙伴们😘，在求知的漫漫旅途中，若你对深度学习的奥秘、JAVA 、PYTHON与SAP 的奇妙世界，亦或是读研论文的撰写攻略有所探寻🧐，那不妨给我一个小小的关注吧🥰。我会精心筹备，在…
阅读更多...
Coturn 实战指南：WebRTC 中的 NAT 穿透利器

Coturn 实战指南：WebRTC 中的 NAT 穿透利器

1. 什么是 Coturn？ Coturn 是一种开源的 TURN(Traversal Using Relays around NAT)服务器，用于解决 NAT 穿透问题。它帮助客户端在受限网络环境(例如防火墙或 NAT 后面)中实现双向通信，常用于 WebRTC 应用、VoIP、在线游戏等场景。 2. Cotur…
阅读更多...
React的局限性是什么？

React的局限性是什么？

性能： 虚拟 DOM 虽然提高了渲染性能，但在某些情况下可能会造成性能瓶颈，尤其是在处理大量数据或复杂更新时。对于非UI任务（如计算密集型操作），React 本身并不擅长。 学习曲线： 对于初学者来说&a…
阅读更多...
生信技能65 - SRA数据库公共数据自动化下载及SRA批量自动化拆分

生信技能65 - SRA数据库公共数据自动化下载及SRA批量自动化拆分

根据NCBI Metadata数据表，实现SRA数据库公共数据自动化下载及SRA批量自动化拆分。 1. 程序逻辑 根据SraRunTable.csv自动从公共数据库下载SRA文件 ；模式0（默认）为下载模式，模式1为拆分模式，拆分支持进度显示；提取Metadata关键信息数据，重新写入新的文本文件。2. 运行示…
阅读更多...
美化和定制你的Django Admin：使用SimpleUI

美化和定制你的Django Admin：使用SimpleUI

SimpleUI是一个简洁、美观的Django后台管理界面，它可以让你的Django Admin更加直观和易用。本文将指导你如何安装和配置SimpleUI，并进行自定义配置。 目录 安装Django创建Django项目创建Django app安装SimpleUI测试安装是否成功数据库迁移注册超级管理员登录验证自定义配置 …
阅读更多...
python学习笔记—7—变量拼接

python学习笔记—7—变量拼接

1. 字符串的拼接 print(var_1 var_2) print("supercarry" "doinb") name "doinb" sex "man" score "100" print("sex:" sex " name:" name " score:" score) 注意： …
阅读更多...
datahub-postgres 连接

datahub-postgres 连接

1、postgres 远程TCP/IP连接 1、修改postgres配置 /opt/homebrew/var/postgresql14/postgresql.conf #listen_addresses localhost, 127.0.0.1 # what IP address(es) to listen on;listen_addresses * # 增加这一条 2、修改/opt/homebrew/var/postgresql14/pg_hba.…
阅读更多...
ElasticSearch 搜索、排序、分页功能

ElasticSearch 搜索、排序、分页功能

一、DSL 查询文档 ElasticSearch 的查询依然是基于 json 风格的 DSL 来实现的。 官方文档：https://www.elastic.co/guide/en/elasticsearch/reference/8.15/query-dsl.html 1.1 DSL 查询分类 常见的查询类型包括： 查询所有：查询出所有数…
阅读更多...
Unreal Engine 5 (UE5) 中“变换“（Transform）类型变量

Unreal Engine 5 (UE5) 中“变换“（Transform）类型变量

在 Unreal Engine 5 (UE5) 中，"变换"（Transform）类型变量是一个非常常见和重要的数据类型，它用于表示 对象的位置（Location）、旋转（Rotation） 和 缩放（Scale&a…
阅读更多...
PyTorch 切片运算 (Slice Operator)

PyTorch 切片运算 (Slice Operator)

PyTorch 切片运算 {Slice Operator} 1. [:, -1, :]2. [:, [-1], :]References 1. [:, -1, :] https://github.com/karpathy/llama2.c/blob/master/model.py import torchlogits torch.arange(1, 16) print("logits.shape:", logits.shape) print("logits:\n&…
阅读更多...
2025系统架构师（一考就过）：选择题基础知识二

2025系统架构师（一考就过）：选择题基础知识二

考点14：知识产权和标准化 真题1：甲软件公司受乙企业委托安排公司软件设计师开发了信息系统管理软件，由于在委托开发合同中未对软件著作权归属作出明确的约定，所以该信息系统管理软件的著作权由(甲) 享有。 真题2：根据…
阅读更多...
【ubuntu18.04】ubuntu18.04安装EasyCwmp操作说明

【ubuntu18.04】ubuntu18.04安装EasyCwmp操作说明

参考链接 Tutorial – EasyCwmphttps://easycwmp.org/tutorial/ EasyCwmp 介绍 EasyCwmp 设计包括 2 个部分： EasyCwmp 核心：它包括 TR069 CWMP 引擎，负责与 ACS 服务器的通信。它是用 C 语言开发的。EasyCwmp DataModel：它包…
阅读更多...
Jenkins流水线初体验（六）

Jenkins流水线初体验（六）

DevOps之安装和配置 Jenkins (一) DevOps 之 CI/CD入门操作 (二) Sonar Qube介绍和安装（三） Harbor镜像仓库介绍&安装 （四） Jenkins容器使用宿主机Docker（五） Jenkins流水线初体验（六） 一、Jenkins流水线任务介绍 之前采用Jenkins的自由风格构建的项目，每个步骤…
阅读更多...
CentOS 7.9 更换 YUM：解决宝塔安装困境的探索之旅

CentOS 7.9 更换 YUM：解决宝塔安装困境的探索之旅

在进行网站搭建工作时，我满怀期待地准备安装宝塔面板，然而却遭遇了安装失败的挫折。经过一番排查与思考，我将目光聚焦到了系统的 YUM 上，怀疑它可能是导致问题的“罪魁祸首”。于是，我毅然决定对 CentOS 7.9 的 YUM 进…
阅读更多...
如何解决垂直越权与水平越权问题

如何解决垂直越权与水平越权问题

大家好，我是G探险者。 关于权限管理我们可能都了解过基于角色的访问控制RBAC技术。 但是关于水平越权和垂直越权的问题可能了解不多。 今天我们来聊聊垂直越权和水平越权的问题。 现在的Web应用和系统里，权限管理是确保数据安全和防止滥用的关键。垂直…
阅读更多...
（SAST检测规则-8）连接字符串中的硬编码密码

（SAST检测规则-8）连接字符串中的硬编码密码

严重等级：高危 缺陷详解： 在构建数据驱动的应用程序时，开发者通常需要通过数据库连接字符串与数据库进行交互。将敏感信息（如密码、服务器IP地址或加密密钥）硬编码在源代码中会带来以下风险： 信息暴露&a…
阅读更多...
Spring Boot整合 RabbitMQ

Spring Boot整合 RabbitMQ

文章目录 一. 引入依赖二. 添加配置三. Work Queue(工作队列模式)声明队列生产者消费者 四. Publish/Subscribe(发布订阅模式)声明队列和交换机生产者消费者 五. Routing(路由模式)声明队列和交换机生产者消费者 六. Topics(通配符模式)声明队列和交换机生产者消费者 一. 引入依…
阅读更多...
最新文章

Copyright @ 2022~2023