import {OrbitControls} from './lib/OrbitControls.js';
|
import { PointerLockControls } from './lib/PointerLockControls.js';
|
import Stats from './lib/stats.module.js';
|
import { EffectComposer } from './lib/EffectComposer.js';
|
import { RenderPass } from './lib/postprocessing/RenderPass.js';
|
import { ShaderPass } from './lib/postprocessing/ShaderPass.js';
|
import { OutlinePass } from './lib/postprocessing/OutlinePass.js';
|
import { FXAAShader } from './lib/postprocessing/FXAAShader.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 {StoreConvey} from './object/StoreConvey.js';
|
import {StoreGoods} from './object/StoreGoods.js';
|
import {StaTask} from './object/StaTask.js';
|
import {DefineModel} from './object/DefineModel.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.outlinePass = null;
|
this.crnTasks = [];// 堆垛机列表
|
this.staTasks = [];// 输送线列表
|
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 = true;
|
|
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.initOutLine();
|
// this.initComposer();
|
this.initObjectSelect();
|
this.initPointLockControl(this);
|
this.initFloor();
|
this.initDefineModel();
|
this.initBuilding();
|
this.initConvey();
|
}
|
this.animate = function () {
|
requestAnimationFrame(this.animate.bind(this));
|
this.stats.begin();
|
if (this.composer) {
|
this.composer.render();
|
} else {
|
this.renderer.render(this.scene, this.camera);
|
}
|
this.firstPersonMove();
|
this.initStoreObjects(this);
|
this.stats.end();
|
this.queryCrn();
|
this.crnMove();
|
this.querySta();
|
}
|
this.initScene = function () {
|
this.scene = new THREE.Scene();
|
}
|
this.initCamera = function () {
|
if (this.camera === null) {
|
this.camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 50000);
|
this.camera.position.set( -350, 600, 1100 );
|
this.camera.lookAt( this.scene.position );
|
//将相机放到场景中
|
this.scene.add(this.camera);
|
} else {
|
this.camera.position.set( -350, 600, 1100 );
|
this.camera.lookAt( this.scene.position );
|
}
|
}
|
this.initRenderer = function () {
|
this.renderer = new THREE.WebGLRenderer({
|
antialias: true,
|
logarithmicDepthBuffer: true
|
});
|
// this.renderer.toneMapping = THREE.CineonToneMapping; // 色调
|
this.renderer.setSize(window.innerWidth, window.innerHeight);
|
this.renderer.setPixelRatio( window.devicePixelRatio );
|
// this.renderer.shadowMap.enabled = true; // 是否开启阴影
|
this.renderer.shadowMap.type = THREE.BasicShadowMap;
|
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 pointLight = new THREE.SpotLight(0xFFFAFA,1);
|
pointLight.position.set(0, 1500, 2500);
|
// pointLight.castShadow = true; // 是否开启阴影
|
pointLight.shadow.camera.near = 2000;
|
pointLight.shadow.camera.far = 10000;
|
pointLight.shadow.mapSize.height = 200000;
|
pointLight.shadow.mapSize.width = 200000;
|
this.addObject(pointLight);
|
}
|
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 );
|
this.scene.background = new THREE.Color( 0x333333 );
|
} 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"
|
]);
|
}
|
}
|
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.initOutLine = function(){
|
this.outlinePass = new OutlinePass( new THREE.Vector2( window.innerWidth, window.innerHeight ), this.scene, this.camera )
|
// this.outlinePass.edgeStrength = 1;//包围线浓度
|
// this.outlinePass.edgeGlow = 0.1;//边缘线范围
|
// this.outlinePass.edgeThickness = 1;//边缘线浓度
|
// this.outlinePass.pulsePeriod = 2;//包围线闪烁评率
|
// this.outlinePass.visibleEdgeColor.set('#B31985');//包围线颜色
|
// this.outlinePass.hiddenEdgeColor.set('#190a05');//被遮挡的边界线颜色
|
}
|
this.initComposer = function(){
|
this.composer = new EffectComposer(this.renderer);
|
const renderPass = new RenderPass( this.scene, this.camera );
|
this.composer.addPass( renderPass );
|
this.composer.addPass(this.outlinePass);
|
|
const pixelRatio = this.renderer.getPixelRatio();
|
this.fxaaPass = new ShaderPass( FXAAShader );
|
this.fxaaPass.material.uniforms[ 'resolution' ].value.x = 1 / ( this.dom.offsetWidth * pixelRatio );
|
this.fxaaPass.material.uniforms[ 'resolution' ].value.y = 1 / ( this.dom.offsetHeight * pixelRatio );
|
this.composer.addPass( this.fxaaPass );
|
}
|
this.initObjectSelect = function(){
|
new ObjectSelect(this.scene, this.camera, this.outlinePass, this);
|
}
|
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, 50 );
|
|
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.x = 1200;
|
helper.position.y = - 1;
|
helper.position.z = -2000;
|
helper.material.opacity = 0.25;
|
helper.material.transparent = true;
|
this.addObject( helper );
|
|
// this.addObject(new Floor({position: {}}))
|
}
|
this.initDefineModel = () => {
|
const model = new DefineModel(this);
|
}
|
this.initBuilding = function () {
|
let buildingData = buildingObjects.objects;
|
for (let i = 0; i < buildingData.length; i++) {
|
let objectOption = buildingData[i];
|
switch (objectOption.objectType) {
|
case "cube":
|
let cube = new Cube(objectOption);
|
this.addObject(cube);
|
break;
|
}
|
}
|
}
|
this.initConvey = function () {
|
let storeConvey = new StoreConvey(this, conveyObjects.objects)
|
storeConvey.load();
|
}
|
this.initStoreObjects = function (object) {
|
if (this.firstTime === 1) {
|
if (Store3DData !== undefined && Store3DData !== null) {
|
for(let group of Store3DData.data.store.groups) {
|
new StoreCrn(group.crn, object);
|
for (let line of group.lines) {
|
let shelf = new StoreShelf(line);
|
object.addObject(shelf.mesh);
|
if (line.bins !== null) {
|
new StoreGoods(object, line.bins, shelf);
|
}
|
}
|
}
|
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) {
|
crnTask.modify(crnData);
|
}
|
}
|
}
|
}
|
}
|
this.crnMove = function () {
|
for (let crnTask of this.crnTasks) {
|
crnTask.move();
|
}
|
}
|
this.querySta = function () {
|
if (StaDatas !== null && this.firstTime === 0) {
|
for (let staData of StaDatas) {
|
let staTask = getArrVal(this.staTasks, "no", staData.no);
|
if (null == staTask) {
|
this.staTasks.push(new StaTask(staData, this));
|
} else {
|
if(!staTask.run && !staTask.isDel) {
|
staTask.modify(staData);
|
}
|
}
|
}
|
}
|
}
|
|
// 功能方法区
|
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(900,1100,0);
|
this.controls.getObject().position.x = -200;
|
this.controls.getObject().position.y = 200;
|
this.controls.getObject().position.z = 200;
|
this.controls.lock();
|
}
|
this.mainView = function () {
|
this.camera.position.set( 1400, 400, 2000 );
|
this.camera.lookAt( 1400, 500, 0 );
|
}
|
this.leftView = function () {
|
this.camera.position.set( -3000, 300, -2000 );
|
this.camera.lookAt(0, 500, -2000);
|
}
|
this.verticalView = function () {
|
this.camera.position.set( 1400, 6000, -1800 );
|
this.camera.lookAt( 1400, 0, -1800 );
|
}
|
this.backlView = function () {
|
this.initCamera();
|
}
|
},
|
|
};
|
|
export { APP };
|
