import {OrbitControls} from './lib/OrbitControls.js';
|
import Stats from './lib/stats.module.js';
|
import {MTLLoader} from './lib/MTLLoader.js';
|
import {OBJLoader} from './lib/OBJLoader.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.wrkTasks = [];// 任务列表
|
this.crnTasks = [];// 堆垛机列表
|
this.time = 0;//标记堆垛机运行的时间
|
this.progress = 0;
|
|
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.initFloor();
|
this.initModel();
|
this.initStoreObjects(this);
|
}
|
this.animate = function () {
|
requestAnimationFrame(this.animate.bind(this));
|
this.stats.begin();
|
this.renderer.render(this.scene, this.camera);
|
this.stats.end();
|
// this.queryTask();
|
this.queryCrn();
|
this.modelMove();
|
}
|
this.initScene = function () {
|
this.scene = new THREE.Scene();
|
}
|
this.initCamera = function () {
|
//声明一个透视相机，
|
// 视角：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);
|
}
|
this.initRenderer = function () {
|
this.renderer = new THREE.WebGLRenderer();
|
// this.renderer.physicallyCorrectLights = true;
|
// 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);
|
|
// ---
|
// 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 directionalLight = new THREE.DirectionalLight( 0xffffff, 0.6 );
|
// directionalLight.position.set( - 1, 1, 1 );
|
// this.addObject( directionalLight );
|
}
|
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.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"
|
]);
|
this.scene.background = new THREE.Color( 0xf0f0f0 );
|
}
|
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.initStoreObjects = function (object) {
|
if (this.firstTime === 1) {
|
initStore();
|
if (Store3DData !== null) {
|
for(var group of Store3DData.data.store.groups) {
|
let crn = 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);
|
// }
|
// }
|
|
}
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//显示仓库区域
|
// for (let i = 0; i < Store3DData.Areas.length; i++) {
|
// let optionArea = Store3DData.Areas[i];
|
// let area = new StoreArea(optionArea);
|
// object.addObject(area);
|
// //显示仓库
|
// for (let j = 0; j < optionArea.Stores.length; j++) {
|
// let optionStore = optionArea.Stores[j];
|
// optionStore.Position = CommonFunction.transPosition(optionStore.Position, optionArea.Position);
|
// let store = new Store(optionStore);
|
// // object.addObject(store);
|
// //显示每行信息
|
// for (let k = 0; k < optionStore.Groups.length; k++) {
|
// let optionGroup = optionStore.Groups[k];
|
// optionGroup.Position = CommonFunction.transPosition(optionGroup.Position, optionStore.Position);
|
// let shelf = new StoreShelf(optionGroup);
|
// let group=new StoreGroup(optionGroup,1);
|
// object.addObject(shelf);
|
// // object.addObject(group);
|
// //显示库位上的货物
|
// for (let m = 0; m < optionGroup.Bins.length; m++) {
|
// let optionBin = optionGroup.Bins[m];
|
// let existGoods=this.getExistedGoodType(optionBin.State);
|
// let storeGoods = new StoreGoods(optionGroup, optionBin);
|
// if(existGoods==null) {
|
// let goods=storeGoods.create();
|
// object.addObject(goods);
|
// this.goodTypes.push({type: optionBin.State, object: goods});
|
// } else {
|
// let goods= storeGoods.clone(existGoods);
|
// object.addObject(goods);
|
// }
|
// }
|
// }
|
//
|
// }
|
// }
|
// this.firstTime = 0;
|
}
|
}
|
}
|
this.queryTask = function () {
|
if (TaskDatas !== null) {
|
for (let TaskData of TaskDatas) {
|
let wrkTask = getArrVal(this.wrkTasks, "wrkNo", TaskData.wrkNo);
|
if (null == wrkTask) {
|
this.wrkTasks.push(TaskData);
|
}
|
}
|
}
|
}
|
this.queryCrn = function () {
|
if (CrnDatas !== null) {
|
for (let crnData of CrnDatas) {
|
let crnTask = getArrVal(this.crnTasks, "crnNo", crnData.crnNo);
|
if (null == crnTask) {
|
this.crnTasks.push(new CrnTask(crnData));
|
} else {
|
if(!crnTask.run) {
|
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.initModel = function () {
|
let that = this;
|
// let object;
|
// const onProgress = function ( xhr ) {
|
// if ( xhr.lengthComputable ) {
|
// const percentComplete = xhr.loaded / xhr.total * 100;
|
// console.log( Math.round( percentComplete, 2 ) + '% downloaded' );
|
// }
|
// };
|
// const onError = function () { };
|
// function loadModel() {
|
// object.traverse( function ( child ) {
|
// if ( child.isMesh ) child.material.map = texture;
|
// } );
|
// object.position.y = 195;
|
// that.addObject( object );
|
// }
|
// const manager = new THREE.LoadingManager(loadModel);
|
// const textureLoader = new THREE.TextureLoader( manager );
|
// const texture = textureLoader.load( '../static/model/obj/uv_grid_opengl.jpg' );
|
// const loader = new OBJLoader( manager );
|
// loader.load( '../static/model/obj/AGV.obj', function ( obj ) {
|
// object = obj;
|
// }, onProgress, onError );
|
const manager = new THREE.LoadingManager();
|
// manager.addHandler( /\.dds$/i, new DDSLoader() );
|
new MTLLoader(manager)
|
.setPath( '../static/model/obj/' )
|
.load( '货叉.mtl', function ( materials ) {
|
materials.preload();
|
new OBJLoader( manager )
|
.setMaterials( materials )
|
.setPath( '../static/model/obj/' )
|
.load( '货叉.obj', function ( object ) {
|
object.position.z = -500;
|
object.position.x = -2060;
|
// object.position.z = 0;
|
// object.position.x = 0;
|
// object.position.y = 0;
|
object.scale.set(0.025, 0.025, 0.025);
|
object.rotateY(- Math.PI / 2)
|
that.addObject( object );
|
}, null, null );
|
});
|
new MTLLoader(manager)
|
.setPath( '../static/model/obj/' )
|
.load( '载货台.mtl', function ( materials ) {
|
materials.preload();
|
new OBJLoader( manager )
|
.setMaterials( materials )
|
.setPath( '../static/model/obj/' )
|
.load( '载货台.obj', function ( object ) {
|
object.position.z = -500;
|
object.position.x = -2060;
|
object.scale.set(0.025, 0.025, 0.025);
|
object.rotateY(- Math.PI / 2)
|
that.addObject( object );
|
}, null, null );
|
});
|
new MTLLoader(manager)
|
.setPath( '../static/model/obj/' )
|
.load( '堆垛机本体.mtl', function ( materials ) {
|
materials.preload();
|
new OBJLoader( manager )
|
.setMaterials( materials )
|
.setPath( '../static/model/obj/' )
|
.load( '堆垛机本体.obj', function ( object ) {
|
object.position.z = -500;
|
object.position.x = -2060;
|
// object.position.z = 0;
|
// object.position.x = 0;
|
// object.position.y = 0;
|
object.scale.set(0.025, 0.025, 0.025);
|
object.rotateY(- Math.PI / 2)
|
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.modelMove = function () {
|
if (this.curve) {
|
this.progress += 0.001;
|
if (this.progress>1.0) {
|
this.curve = null;
|
} else {
|
let point = this.curve.getPoint(this.progress);
|
if(point&&point.x){
|
this.crnBody.position.set(point.x,point.y,point.z);
|
}
|
}
|
}
|
}
|
},
|
|
};
|
|
export { APP };
|
