From 142327d5f901db7737e9c14038be526a16d0b331 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@63.com>
Date: 星期六, 18 十二月 2021 13:28:35 +0800
Subject: [PATCH] #
---
static/js/app.js | 137 ++++++++++++++++++++--
static/js/common.js | 3
views/index.html | 2
static/js/lib/PointerLockControls.js | 162 +++++++++++++++++++++++++++
4 files changed, 290 insertions(+), 14 deletions(-)
diff --git a/static/js/app.js b/static/js/app.js
index 1763d19..457c884 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -1,10 +1,12 @@
import {OrbitControls} from './lib/OrbitControls.js';
+import { PointerLockControls } from './lib/PointerLockControls.js';
import Stats from './lib/stats.module.js';
import {MTLLoader} from './lib/MTLLoader.js';
import {OBJLoader} from './lib/OBJLoader.js';
import {StoreShelf} from './object/StoreShelf.js';
import {StoreCrn} from './object/StoreCrn.js';
import { Sky } from './object/Sky.js';
+
var APP = {
@@ -18,8 +20,15 @@
this.stats = null;
this.goodTypes=[];//瀛樺偍鎵�鏈夌殑搴撲綅绫诲瀷
this.crnTasks = [];// 鍫嗗灈鏈哄垪琛�
- this.time = 0;//鏍囪鍫嗗灈鏈鸿繍琛岀殑鏃堕棿
- this.progress = 0;
+ this.moveForward = false;//鏄惁鍚戝墠杩愯
+ this.moveBackward = false;//鏄惁鍚戝悗杩愯
+ this.moveLeft = false;//鏄惁鍚戝乏杩愯
+ this.moveRight = false;//鏄惁鍚戝彸杩愯
+ this.canJump = false;//鏄惁鍙互璺�
+ this.velocity = new THREE.Vector3();
+ this.direction = new THREE.Vector3();
+ this.raycaster = null;
+ this.prevTime = performance.now();//涓婁竴娆ender鐨勬椂闂�
this.start = function () {
this.initMain();
@@ -34,6 +43,7 @@
this.initStats();
this.initLight();
this.initReSize(this);
+ this.initPointLockControl(this);
this.initFloor();
this.initModel();
this.initStoreObjects(this);
@@ -43,6 +53,7 @@
this.stats.begin();
this.renderer.render(this.scene, this.camera);
this.stats.end();
+ this.firstPersonMove();
this.queryCrn();
this.crnMove();
}
@@ -176,6 +187,117 @@
object.camera.updateProjectionMatrix();
object.renderer.setSize(window.innerWidth, window.innerHeight);
}, false);
+ }
+ this.initPointLockControl = function(object){
+ this.controls = new PointerLockControls( this.camera, document.body );
+ this.raycaster = new THREE.Raycaster( new THREE.Vector3(), new THREE.Vector3( 0, - 1, 0 ), 0, 10 );
+
+ const onKeyDown = function ( event ) {
+ switch ( event.code ) {
+ case 'ArrowUp':
+ case 'KeyW':
+ object.moveForward = true;
+ break;
+ case 'ArrowLeft':
+ case 'KeyA':
+ object.moveLeft = true;
+ break;
+ case 'ArrowDown':
+ case 'KeyS':
+ object.moveBackward = true;
+ break;
+ case 'ArrowRight':
+ case 'KeyD':
+ object.moveRight = true;
+ break;
+ case 'Space':
+ if ( object.canJump === true ) object.velocity.y += 350;
+ object.canJump = false;
+ break;
+ }
+ };
+
+ const onKeyUp = function ( event ) {
+ switch ( event.code ) {
+ case 'ArrowUp':
+ case 'KeyW':
+ object.moveForward = false;
+ break;
+ case 'ArrowLeft':
+ case 'KeyA':
+ object.moveLeft = false;
+ break;
+ case 'ArrowDown':
+ case 'KeyS':
+ object.moveBackward = false;
+ break;
+ case 'ArrowRight':
+ case 'KeyD':
+ object.moveRight = false;
+ break;
+ }
+ };
+
+ document.addEventListener( 'keydown', onKeyDown );
+ document.addEventListener( 'keyup', onKeyUp );
+
+
+ this.addObject( this.controls.getObject() );
+ }
+ this.firstPersonMove=function(){
+ if ( this.controls.isLocked === true ) {
+
+ this.raycaster.ray.origin.copy( this.controls.getObject().position );
+ this.raycaster.ray.origin.y -= 10;
+
+ const intersections = this.raycaster.intersectObjects( this.objects, false );
+
+ const onObject = intersections.length > 0;
+ var time = performance.now();
+ const delta = ( time - this.prevTime ) / 1000;
+
+ this.velocity.x -= this.velocity.x * 10.0 * delta;
+ this.velocity.z -= this.velocity.z * 10.0 * delta;
+
+ this.velocity.y -= 9.8 * 100.0 * delta; // 100.0 = mass
+
+ this.direction.z = Number( this.moveForward ) - Number( this.moveBackward );
+ this.direction.x = Number( this.moveRight ) - Number( this.moveLeft );
+ this.direction.normalize(); // this ensures consistent movements in all directions
+
+ if ( this.moveForward || this.moveBackward ) this.velocity.z -= this.direction.z * 400.0 * delta;
+ if ( this.moveLeft || this.moveRight ) this.velocity.x -= this.direction.x * 400.0 * delta;
+
+ if ( onObject === true ) {
+
+ this.velocity.y = Math.max( 0, this.velocity.y );
+ this.canJump = true;
+
+ }
+
+ this.controls.moveRight( - this.velocity.x * delta );
+ this.controls.moveForward( - this.velocity.z * delta );
+
+ this.controls.getObject().position.y += ( this.velocity.y * delta ); // new behavior
+
+ if ( this.controls.getObject().position.y < 10 ) {
+
+ this.velocity.y = 0;
+ this.controls.getObject().position.y = 10;
+
+ this.canJump = true;
+
+ }
+ this.prevTime = time;
+ }
+ }
+ this.lockControl = function () {
+ this.camera.position.y = 100;
+ this.camera.lookAt(0,100,0);
+ this.controls.getObject().position.x =0;
+ this.controls.getObject().position.y =100;
+ this.controls.getObject().position.z =580;
+ this.controls.lock();
}
this.removeObject = function (nameorid) {
for (let i = 0; i < this.objects.length; i++) {
@@ -313,17 +435,6 @@
// that.addObject( object );
// }, null, null );
// });
- }
- this.initModelMove = function () {
- console.log(this.crnTasks)
- // for (var wrkMast of this.wrkTasks) {
- // this.crnBody = getArrVal(this.objects, "name", wrkMast.crnNo + "-body");
- // // 鍙栬揣鐐瑰畾浣�
- // let sourceLocPosition = getBinPosition(wrkMast.sourceLocNo);
- // let points = [new THREE.Vector3(this.crnBody.position.x, this.crnBody.position.y, this.crnBody.position.z), sourceLocPosition];
- // this.curve = new Route(points);
- // }
-
}
this.crnMove = function (object) {
for (let crnTask of this.crnTasks) {
diff --git a/static/js/common.js b/static/js/common.js
index 9799df8..12c1943 100644
--- a/static/js/common.js
+++ b/static/js/common.js
@@ -1,4 +1,7 @@
+function CommonFunction() {
+
+}
/**
* 鍒ゆ柇褰撳墠瀵硅薄鏄惁涓虹┖瀵硅薄
*/
diff --git a/static/js/lib/PointerLockControls.js b/static/js/lib/PointerLockControls.js
new file mode 100644
index 0000000..42c809e
--- /dev/null
+++ b/static/js/lib/PointerLockControls.js
@@ -0,0 +1,162 @@
+import {
+ Euler,
+ EventDispatcher,
+ Vector3
+} from '../three.module.js';
+
+const _euler = new Euler( 0, 0, 0, 'YXZ' );
+const _vector = new Vector3();
+
+const _changeEvent = { type: 'change' };
+const _lockEvent = { type: 'lock' };
+const _unlockEvent = { type: 'unlock' };
+
+const _PI_2 = Math.PI / 2;
+
+class PointerLockControls extends EventDispatcher {
+
+ constructor( camera, domElement ) {
+
+ super();
+
+ if ( domElement === undefined ) {
+
+ console.warn( 'THREE.PointerLockControls: The second parameter "domElement" is now mandatory.' );
+ domElement = document.body;
+
+ }
+
+ this.domElement = domElement;
+ this.isLocked = false;
+
+ // Set to constrain the pitch of the camera
+ // Range is 0 to Math.PI radians
+ this.minPolarAngle = 0; // radians
+ this.maxPolarAngle = Math.PI; // radians
+
+ const scope = this;
+
+ function onMouseMove( event ) {
+
+ if ( scope.isLocked === false ) return;
+
+ const movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
+ const movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;
+
+ _euler.setFromQuaternion( camera.quaternion );
+
+ _euler.y -= movementX * 0.002;
+ _euler.x -= movementY * 0.002;
+
+ _euler.x = Math.max( _PI_2 - scope.maxPolarAngle, Math.min( _PI_2 - scope.minPolarAngle, _euler.x ) );
+
+ camera.quaternion.setFromEuler( _euler );
+
+ scope.dispatchEvent( _changeEvent );
+
+ }
+
+ function onPointerlockChange() {
+
+ if ( scope.domElement.ownerDocument.pointerLockElement === scope.domElement ) {
+
+ scope.dispatchEvent( _lockEvent );
+
+ scope.isLocked = true;
+
+ } else {
+
+ scope.dispatchEvent( _unlockEvent );
+
+ scope.isLocked = false;
+
+ }
+
+ }
+
+ function onPointerlockError() {
+
+ console.error( 'THREE.PointerLockControls: Unable to use Pointer Lock API' );
+
+ }
+
+ this.connect = function () {
+
+ scope.domElement.ownerDocument.addEventListener( 'mousemove', onMouseMove );
+ scope.domElement.ownerDocument.addEventListener( 'pointerlockchange', onPointerlockChange );
+ scope.domElement.ownerDocument.addEventListener( 'pointerlockerror', onPointerlockError );
+
+ };
+
+ this.disconnect = function () {
+
+ scope.domElement.ownerDocument.removeEventListener( 'mousemove', onMouseMove );
+ scope.domElement.ownerDocument.removeEventListener( 'pointerlockchange', onPointerlockChange );
+ scope.domElement.ownerDocument.removeEventListener( 'pointerlockerror', onPointerlockError );
+
+ };
+
+ this.dispose = function () {
+
+ this.disconnect();
+
+ };
+
+ this.getObject = function () { // retaining this method for backward compatibility
+
+ return camera;
+
+ };
+
+ this.getDirection = function () {
+
+ const direction = new Vector3( 0, 0, - 1 );
+
+ return function ( v ) {
+
+ return v.copy( direction ).applyQuaternion( camera.quaternion );
+
+ };
+
+ }();
+
+ this.moveForward = function ( distance ) {
+
+ // move forward parallel to the xz-plane
+ // assumes camera.up is y-up
+
+ _vector.setFromMatrixColumn( camera.matrix, 0 );
+
+ _vector.crossVectors( camera.up, _vector );
+
+ camera.position.addScaledVector( _vector, distance );
+
+ };
+
+ this.moveRight = function ( distance ) {
+
+ _vector.setFromMatrixColumn( camera.matrix, 0 );
+
+ camera.position.addScaledVector( _vector, distance );
+
+ };
+
+ this.lock = function () {
+
+ this.domElement.requestPointerLock();
+
+ };
+
+ this.unlock = function () {
+
+ scope.domElement.ownerDocument.exitPointerLock();
+
+ };
+
+ this.connect();
+
+ }
+
+}
+
+export { PointerLockControls };
diff --git a/views/index.html b/views/index.html
index a5e1f43..cbed46b 100644
--- a/views/index.html
+++ b/views/index.html
@@ -82,7 +82,7 @@
document.getElementById("print").addEventListener('click', function () {
console.log(player.objects);
- player.initModelMove();
+ player.lockControl();
}, false);
</script>
--
Gitblit v1.9.1