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 = {
|
|
Player: function () {
|
this.dom = null;
|
this.scene = null;//场景
|
this.camera = null;//相机
|
this.renderer = null;//渲染器
|
this.objects = [];//场景中所有对象的集合
|
this.firstTime = 1;
|
this.stats = null;
|
this.goodTypes=[];//存储所有的库位类型
|
this.crnTasks = [];// 堆垛机列表
|
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();//上一次render的时间
|
this.backgroundType = false;
|
|
this.start = function () {
|
this.initMain();
|
this.animate();
|
}
|
this.initMain = function () {
|
this.initScene();
|
this.initCamera();
|
this.initRenderer();
|
this.initOrbitControl();
|
this.initBackground();
|
this.initStats();
|
this.initLight();
|
this.initReSize(this);
|
this.initPointLockControl(this);
|
this.initFloor();
|
}
|
this.animate = function () {
|
requestAnimationFrame(this.animate.bind(this));
|
this.stats.begin();
|
this.renderer.render(this.scene, this.camera);
|
this.firstPersonMove();
|
this.initStoreObjects(this);
|
this.stats.end();
|
this.queryCrn();
|
this.crnMove();
|
}
|
this.initScene = function () {
|
this.scene = new THREE.Scene();
|
}
|
this.initCamera = function () {
|
if (this.camera === null) {
|
//声明一个透视相机，
|
// 视角：60，
|
// 纵横比aspect:全屏，使用的是浏览器的宽度/高度
|
//近平面near：0.1
|
//远平面视角far:10000
|
this.camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 50000);
|
/*
|
设置相机位置，注意threejs中的坐标系采用的是右手坐标系
|
*/
|
// this.camera.position.x = 0;
|
// this.camera.position.y = 1000;
|
// this.camera.position.z = 600;
|
// //相机的朝向
|
// this.camera.lookAt(0, 0, 0);
|
this.camera.position.set( - 350, 1070, 1550 );
|
this.camera.lookAt( this.scene.position );
|
//将相机放到场景中
|
this.scene.add(this.camera);
|
} else {
|
this.camera.position.set( - 350, 1070, 1550 );
|
this.camera.lookAt( this.scene.position );
|
}
|
}
|
this.initRenderer = function () {
|
this.renderer = new THREE.WebGLRenderer();
|
|
// 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 () {
|
|
//首先添加个环境光
|
let ambient = new THREE.AmbientLight(0xffffff, 1); //AmbientLight,影响整个场景的光源
|
ambient.position.set(0, 0, 0);
|
this.addObject(ambient);
|
//添加平行光,平行光类似于太阳光
|
let directionalLight = new THREE.DirectionalLight(0xffffff, 0.3);//模拟远处类似太阳的光源
|
directionalLight.position.set(0, 200, 0);
|
this.addObject(directionalLight);
|
//设置点光源
|
let pointLight1 = new THREE.PointLight(0xffffff, 0.3);
|
pointLight1.position.set(-500, 200, 0);
|
this.addObject(pointLight1);
|
let pointLight2 = new THREE.PointLight(0xffffff, 0.3);
|
pointLight2.position.set(500, 200, 0);
|
this.addObject(pointLight2);
|
|
// const bulbGeometry = new THREE.SphereGeometry( 0.02, 16, 8 );
|
// var bulbLight = new THREE.PointLight( 0xffee88, 1, 100, 2 );
|
//
|
// 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);
|
this.orbitControl.enableDamping = true;
|
this.orbitControl.dampingFactor = 0.5;
|
// 视角最小距离
|
this.orbitControl.minDistance = 0;
|
// 视角最远距离
|
this.orbitControl.maxDistance = 10000;
|
// 最大角度
|
//this.orbitControl.maxPolarAngle = Math.PI / 2.2;
|
}
|
this.initStats = function () {
|
this.stats = new Stats();
|
this.dom.appendChild( this.stats.dom );
|
this.stats.domElement.style.display = 'none';
|
}
|
this.initBackground = function () {
|
if (this.backgroundType) {
|
this.scene.background = new THREE.Color( 0xf0f0f0 );
|
} else {
|
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"
|
]);
|
}
|
// 太阳
|
// 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 += 450;
|
}
|
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;
|
}
|
};
|
this.controls.addEventListener( 'lock', function () {
|
console.log("第一人称视角")
|
} );
|
this.controls.addEventListener( 'unlock', function () {
|
console.log("上帝视角");
|
object.initCamera();
|
addClass(document.getElementById("ship-info-btn"), "show");
|
document.getElementById("ship-type-ul").style.transform = 'translateY(-40px)';
|
} );
|
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 * 2000.0 * delta;
|
if ( this.moveLeft || this.moveRight ) this.velocity.x -= this.direction.x * 2000.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.removeObject = function (nameorid) {
|
for (let i = 0; i < this.objects.length; i++) {
|
let tmpObject = this.objects[i];
|
if (tmpObject.name === nameorid || tmpObject.id === nameorid) {
|
this.objects.splice(i, 1);
|
this.scene.remove(tmpObject);
|
}
|
}
|
}
|
this.addObject = function (object) {
|
this.scene.add(object);
|
this.objects.push(object);
|
}
|
this.initFloor = function() {
|
// const planeGeometry = new THREE.PlaneGeometry( 2000, 2000 );
|
// planeGeometry.rotateX( - Math.PI / 2 );
|
// const planeMaterial = new THREE.ShadowMaterial( { opacity: 0.2 } );
|
// const plane = new THREE.Mesh( planeGeometry, planeMaterial );
|
// 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) {
|
if (Store3DData !== undefined && Store3DData !== null) {
|
for(var group of Store3DData.data.store.groups) {
|
new StoreCrn(group.crn, object);
|
for (var line of group.lines) {
|
let shelf = new StoreShelf(line);
|
object.addObject(shelf);
|
//显示库位上的货物
|
// for (var bin of line.bins) {
|
// let existGoods=this.getExistedGoodType(bin.State);
|
// let storeGoods = new StoreGoods(optionGroup, bin);
|
// if(existGoods==null) {
|
// let goods=storeGoods.create();
|
// object.addObject(goods);
|
// this.goodTypes.push({type: bin.State, object: goods});
|
// } else {
|
// let goods= storeGoods.clone(existGoods);
|
// object.addObject(goods);
|
// }
|
// }
|
|
}
|
}
|
this.firstTime = 0;
|
}
|
}
|
}
|
this.queryCrn = function () {
|
if (CrnDatas !== null && this.firstTime === 0) {
|
for (let crnData of CrnDatas) {
|
let crnTask = getArrVal(this.crnTasks, "crnNo", crnData.crnNo);
|
if (null == crnTask) {
|
this.crnTasks.push(new CrnTask(crnData, this));
|
} else {
|
if(!crnTask.run) {
|
// console.log(2)
|
crnTask.modify(crnData);
|
}
|
}
|
}
|
}
|
}
|
this.getExistedGoodType=function(state){
|
for (let i=0;i<this.goodTypes.length;i++) {
|
let type=this.goodTypes[i];
|
if(type.type===state) {
|
return type.object;
|
}
|
}
|
return null;
|
}
|
this.crnMove = function (object) {
|
for (let crnTask of this.crnTasks) {
|
crnTask.move();
|
}
|
}
|
|
// 功能方法区
|
this.changeStats = function () {
|
if (this.stats.domElement.style.display === 'none') {
|
this.stats.domElement.style.display = 'block';
|
} else {
|
this.stats.domElement.style.display = 'none';
|
}
|
}
|
this.changeBackGround = function () {
|
this.backgroundType = !this.backgroundType;
|
this.initBackground();
|
}
|
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();
|
}
|
},
|
|
};
|
|
export { APP };
|
