From 3b06e28a50df252b22890aebd706fa0b61b3c74c Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@63.com>
Date: 星期六, 18 十二月 2021 13:41:52 +0800
Subject: [PATCH] #
---
static/js/app.js | 233 +++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 175 insertions(+), 58 deletions(-)
diff --git a/static/js/app.js b/static/js/app.js
index ed4eedc..dcf21ef 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -1,9 +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 = {
@@ -16,10 +19,16 @@
this.firstTime = 1;
this.stats = null;
this.goodTypes=[];//瀛樺偍鎵�鏈夌殑搴撲綅绫诲瀷
- this.wrkTasks = [];// 浠诲姟鍒楄〃
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();
@@ -33,6 +42,8 @@
this.initBackground();
this.initStats();
this.initLight();
+ this.initReSize(this);
+ this.initPointLockControl(this);
this.initFloor();
this.initModel();
this.initStoreObjects(this);
@@ -41,6 +52,7 @@
requestAnimationFrame(this.animate.bind(this));
this.stats.begin();
this.renderer.render(this.scene, this.camera);
+ this.firstPersonMove();
this.stats.end();
this.queryCrn();
this.crnMove();
@@ -70,14 +82,21 @@
}
this.initRenderer = function () {
this.renderer = new THREE.WebGLRenderer();
- // this.renderer.physicallyCorrectLights = true;
+
+ // this.renderer.outputEncoding = THREE.sRGBEncoding;
+ // this.renderer.toneMapping = THREE.ACESFilmicToneMapping;
+ // this.renderer.toneMappingExposure = 0.5;
+
// this.renderer.outputEncoding = THREE.sRGBEncoding;
// this.renderer.shadowMap.enabled = true;
// this.renderer.toneMapping = THREE.ReinhardToneMapping;
+ //
this.renderer.setPixelRatio( window.devicePixelRatio );
this.renderer.setSize( window.innerWidth, window.innerHeight );
this.dom = document.getElementById("container");
this.dom.appendChild( this.renderer.domElement );
+
+
}
this.initLight = function () {
@@ -97,41 +116,21 @@
pointLight2.position.set(500, 200, 0);
this.addObject(pointLight2);
- // ---
- // var bulbLight = new THREE.PointLight( 0xffee88, 1, 2000, 2 );
- // bulbLight.position.set( 600, 600, 500 );
- // bulbLight.castShadow = true;
- // bulbLight.power = 100;
- // this.addObject(bulbLight);
- // ---
- // var bulbLight1 = new THREE.PointLight( 0xffee88, 1, 2000, 2 );
- // bulbLight1.position.set( -600, 600, 500 );
- // bulbLight1.castShadow = true;
- // bulbLight1.power = 100;
- // this.addObject(bulbLight1);
- // // ---
- // var bulbLight2 = new THREE.PointLight( 0xffee88, 1, 2000, 2 );
- // bulbLight2.position.set( 600, 600, -500 );
- // bulbLight2.castShadow = true;
- // bulbLight2.power = 100;
- // this.addObject(bulbLight2);
- // // ---
- // var bulbLight3 = new THREE.PointLight( 0xffee88, 1, 2000, 2 );
- // bulbLight3.position.set( -600, 600, -500 );
- // bulbLight3.castShadow = true;
- // bulbLight3.power = 100;
- // this.addObject(bulbLight3);
- // // ---
- // var hemiLight = new THREE.HemisphereLight( 0xddeeff, 0x0f0e0d, 0.02 );
- // hemiLight.intensity = 0.0001;
- // this.addObject(hemiLight);
-
- // const ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
- // this.addObject( ambientLight );
+ // const bulbGeometry = new THREE.SphereGeometry( 0.02, 16, 8 );
+ // var bulbLight = new THREE.PointLight( 0xffee88, 1, 100, 2 );
//
- // const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.6 );
- // directionalLight.position.set( - 1, 1, 1 );
- // this.addObject( directionalLight );
+ // var bulbMat = new THREE.MeshStandardMaterial( {
+ // emissive: 0xffffee,
+ // emissiveIntensity: 1,
+ // color: 0x000000
+ // } );
+ // bulbLight.add( new THREE.Mesh( bulbGeometry, bulbMat ) );
+ // bulbLight.position.set( -500, 22, 0 );
+ // bulbLight.castShadow = true;
+ // this.addObject( bulbLight );
+ //
+ // var hemiLight = new THREE.HemisphereLight( 0xddeeff, 0x0f0e0d, 0.02 );
+ // this.addObject( hemiLight );
}
this.initOrbitControl = function () {
this.orbitControl = new OrbitControls(this.camera, this.renderer.domElement);
@@ -149,14 +148,141 @@
// this.dom.appendChild( this.stats.dom );
}
this.initBackground = function () {
- const cubeTextureLoader = new THREE.CubeTextureLoader();
- cubeTextureLoader.setPath( '../static/img/background/' );
- this.scene.background = cubeTextureLoader.load([
- "posx.jpg", "negx.jpg",
- "posy.jpg", "negy.jpg",
- "posz.jpg", "negz.jpg"
- ]);
+ // const cubeTextureLoader = new THREE.CubeTextureLoader();
+ // cubeTextureLoader.setPath( '../static/img/skybox/' );
+ // this.scene.background = cubeTextureLoader.load([
+ // "px.jpg", "nx.jpg",
+ // "py.jpg", "ny.jpg",
+ // "pz.jpg", "nz.jpg"
+ // ]);
this.scene.background = new THREE.Color( 0xf0f0f0 );
+
+ // 澶槼
+ // let sky = new Sky();
+ // sky.scale.setScalar( 450000 );
+ // this.addObject( sky );
+ // let sun = new THREE.Vector3();
+ // const effectController = {
+ // turbidity: 10,
+ // rayleigh: 3,
+ // mieCoefficient: 0.005,
+ // mieDirectionalG: 0.7,
+ // elevation: 2,
+ // azimuth: 180,
+ // exposure: this.renderer.toneMappingExposure
+ // };
+ // const uniforms = sky.material.uniforms;
+ // uniforms[ 'turbidity' ].value = effectController.turbidity;
+ // uniforms[ 'rayleigh' ].value = effectController.rayleigh;
+ // uniforms[ 'mieCoefficient' ].value = effectController.mieCoefficient;
+ // uniforms[ 'mieDirectionalG' ].value = effectController.mieDirectionalG;
+ // const phi = THREE.MathUtils.degToRad( 90 - effectController.elevation );
+ // const theta = THREE.MathUtils.degToRad( effectController.azimuth );
+ // sun.setFromSphericalCoords( 1, phi, theta );
+ // uniforms[ 'sunPosition' ].value.copy( sun );
+ }
+ this.initReSize = function(object){
+ window.addEventListener('resize', function () {
+ object.camera.aspect = window.innerWidth / window.innerHeight;
+ 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(){
+ const time = performance.now();
+ 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;
+ 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++) {
@@ -179,13 +305,16 @@
// plane.position.y = - 200;
// plane.receiveShadow = true;
// this.addObject(plane);
- //
+
// const helper = new THREE.PolarGridHelper( 2000, 100 );
+
const helper = new THREE.GridHelper( 8000, 300 );
helper.position.y = - 0;
helper.material.opacity = 0.25;
helper.material.transparent = true;
this.addObject( helper );
+
+ // this.addObject(new Floor({position: {}}))
}
this.initStoreObjects = function (object) {
if (this.firstTime === 1) {
@@ -212,7 +341,6 @@
}
}
-
}
}
}
@@ -292,17 +420,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) {
--
Gitblit v1.9.1