Skip to content

T
threejsdemo

罐装雪花 / threejsdemo
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 0
Fork 0
T
threejsdemo

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 bdc82087 编写于 作者: X xiao149
浏览文件
操作

更新可配置 

更新可配置
上级 397a3932
隐藏空白更改
内联 并排
Showing with 415 addition and 46 deletion
3DProject.html
浏览文件 @ bdc82087
......@@ -28,6 +28,7 @@
<script src="./ThreeJs/js/stats.min.js"></script>
<script src="./ThreeJs/js/DragControls.js"></script>
<script src="./ThreeJs/js/OrbitControls.js"></script>
<script src="./ThreeJs/js/FirstPersonControls.js"></script>
<script src="./ThreeJs/js/TransformControls.js"></script>
<script src="./ThreeJs/js/dat.gui.min.js"></script>
<script src="./ThreeJs/js/EffectComposer.js"></script>
......@@ -43,6 +44,7 @@
<script src="./ThreeJs/js/Tween.js"></script>
<script src="./ThreeJs/js/jquery-1.11.0.min.js"></script>
<script src="./echarts/echarts.min.js"></script>
<script src="./ThreeJs/config.js"></script>
</head>
<body>
......@@ -53,17 +55,13 @@
</video>
<script>
var stats = initStats();
var scene, camera, renderer, controls, light, composer,transformControls, options;
var matArrayA = []; //内墙
var matArrayB = []; //外墙
var group = new THREE.Group();
var mouse, raycaster;
var rollOverMesh, rollOverMaterial;
var cubeGeo, cubeMaterial;
var objects = [];
// 初始化场景
function initScene() {
scene = new THREE.Scene();
......@@ -72,7 +70,7 @@
// 初始化相机
function initCamera() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
camera.position.set(50, 50, 200);
camera.position.set(0, 50, 200);
}
// 初始化灯光
......@@ -140,7 +138,6 @@
floor.rotation.x = -Math.PI / 2;
floor.name = "地面";
scene.add(floor);
objects.push( floor );
});
}
......@@ -190,7 +187,7 @@
doormaterial.transparent = true;
var door = new THREE.Mesh(doorgeometry, doormaterial);
door.position.set(x, y, z);
door.rotation.y += angle * Math.PI; //-逆时针旋转,+顺时针
door.rotation.y += angle * Math.PI; //-逆时针旋转,+顺时针8
door.name = name;
scene.add(door);
});
......@@ -448,23 +445,41 @@
addArea(0,0,1000,500,scene,"ID1$库区1号","FF0000",20,"左对齐");
addShelf(scene, objects);
addShelf(scene);
//添加货物
for(var i = 1; i <= 3; i++){
for(var j = 1; j <= 2; j++){
for(var k = 1; k <= 3; k++) {
addOneUnitCargos("A" + k, i, j, scene);
var shelf_list = GET_SHELF_LIST();
for(var i = 1; i <= GET_LAYER_NUM(); i++){
for(var j = 1; j <= GET_COLUMN_NUM(); j++){
for(var k = 1; k <= shelf_list.length; k++) {
addOneUnitCargos(shelf_list[k-1].shelfId, i, j, scene);
}
}
}
addRollPlane(scene);
//添加选中时的蒙版
composer = new THREE.ThreeJs_Composer(renderer, scene, camera, options);
//添加拖动效果
transformControls = new THREE.ThreeJs_Drag(camera, renderer.domElement, scene, controls);
// 过滤不是 Mesh 的物体,例如辅助网格
var objects = [];
for (var i = 0; i < scene.children.length; i++) {
var Msg = scene.children[i].name.split("$");
if (scene.children[i].isMesh && Msg[0] == "货物") {
objects.push(scene.children[i]);
}
}
var dragControls = new THREE.DragControls( objects, camera, renderer.domElement );
dragControls.addEventListener( 'dragstart', function ( event ) {
controls.enabled = false;
isPaused = true;
} );
dragControls.addEventListener( 'dragend', function ( event ) {
controls.enabled = true;
isPaused = false;
} );
document.addEventListener('resize', onWindowResize, false);
}
......
ThreeJs/Modules.js
浏览文件 @ bdc82087
......@@ -15,15 +15,6 @@ var storageUnitSize = 0, storageUnitList = [];
//货物信息
var cargoSize = 0, cargoList = [], CargosExist;
var PLANE_LENGTH = 24;
var PLANE_WIDTH = 55;
var PLANE_HEIGHT = 2;
var HOLDER_LENGTH = 2;
var HOLDER_WIDTH = 2;
var HOLDER_HEIGHT = 25;
var LAYER_NUM = 3;
var COLUMN_NUM = 2;
//创建库区对象
function storageZone(StorageZoneId,StorageZoneName,
coordinateX,coordinateZ,
......@@ -304,14 +295,14 @@ function addArea(x,z,width,length,scene,name,textColor,font_size,textposition) {
/** plane_x,plane_y,plane_z 货架板面的长高宽 */
/** holder_x,holder_y,holder_z 货架支架的长高宽 */
/** scene,name,num 要添加的场景,货架的名字,单层货架的库位数量 */
function addRack(x,y,z,plane_x,plane_y,plane_z,holder_x,holder_y,holder_z,scene,name,num,objects) {
function addRack(x,y,z,plane_x,plane_y,plane_z,holder_x,holder_y,holder_z,scene,name,num) {
var plane = new THREE.BoxGeometry( plane_x, plane_y, plane_z/num );
var gz = [];
for(var i = 0; i < num; i++){
gz.push( z + plane_z/num/2 + (plane_z/num)*i );
var obj = new THREE.Mesh( plane, RackMat );
obj.position.set(x , y, gz[i]) ;
var msg = name+"$"+(2-i);
var msg = name+"$"+(GET_COLUMN_NUM() - i);
var storageUnitId = msg.split("$")[1] + "$" + msg.split("$")[3] + "$" + msg.split("$")[4];
......@@ -328,14 +319,13 @@ function addRack(x,y,z,plane_x,plane_y,plane_z,holder_x,holder_y,holder_z,scene,
var Unit = getStorageUnitById(msg.split("$")[1],msg.split("$")[3],msg.split("$")[4]);
obj.name = "货位"+"$"+Unit.storageUnitId;
scene.add(obj);
objects.push( obj );
}
var holder = new THREE.BoxGeometry( holder_x, holder_y, holder_z );
var obj2 = new THREE.Mesh( holder, RackMat2 );
var obj3 = new THREE.Mesh( holder, RackMat2 );
var obj4 = new THREE.Mesh( holder, RackMat2 );
var obj5 = new THREE.Mesh( holder, RackMat2 );
var obj2 = new THREE.Mesh( holder, RackMat2, 0 );
var obj3 = new THREE.Mesh( holder, RackMat2, 0 );
var obj4 = new THREE.Mesh( holder, RackMat2, 0 );
var obj5 = new THREE.Mesh( holder, RackMat2, 0 );
obj2.position.set(x-plane_x/2+holder_x/2,y-holder_y/2-plane_y/2,z+holder_z/2);
obj3.position.set(x+plane_x/2-holder_x/2,y-holder_y/2-plane_y/2,z+holder_z/2);
......@@ -346,34 +336,31 @@ function addRack(x,y,z,plane_x,plane_y,plane_z,holder_x,holder_y,holder_z,scene,
/** 放置一叠货架 */
/** stack_num 货架的叠数 */
function addStackOfRack(x,y,z,plane_x,plane_y,plane_z,holder_x,holder_y,holder_z,scene,name,num,stack_num,objects) {
function addStackOfRack(x,y,z,plane_x,plane_y,plane_z,holder_x,holder_y,holder_z,scene,name,num,stack_num) {
for(var i = 0; i < stack_num; i++){
addRack(x,y*(i+1),z,plane_x,plane_y,plane_z,holder_x,holder_y,holder_z,scene,name+"$"+(i+1),num,objects);
addRack(x,y*(i+1),z,plane_x,plane_y,plane_z,holder_x,holder_y,holder_z,scene,name+"$"+(i+1),num);
}
}
/** 根据3D库图货架配置表添加货架 */
function addShelf(scene, objects) {
var shelf_list = new Array();
shelf_list.push({StorageZoneId:'Z1',shelfId:'A1',shelfName:'货架A1',x:-100,y:27,z:0});
shelf_list.push({StorageZoneId:'Z1',shelfId:'A2',shelfName:'货架A2',x:0,y:27,z:0});
shelf_list.push({StorageZoneId:'Z1',shelfId:'A3',shelfName:'货架A3',x:100,y:27,z:0});
function addShelf(scene) {
var shelf_list = GET_SHELF_LIST();
shelfSize = shelf_list.length;
for(var i = 0; i < shelfSize; i++){
var shelf_obj = new shelf(shelf_list[i].StorageZoneId,
shelf_list[i].shelfId,
shelf_list[i].shelfName,
PLANE_LENGTH,PLANE_WIDTH,PLANE_HEIGHT,
HOLDER_LENGTH,HOLDER_WIDTH,HOLDER_HEIGHT,
GET_PLANE_LENGTH(),GET_PLANE_WIDTH(),GET_PLANE_HEIGHT(),
GET_HOLDER_LENGTH(),GET_HOLDER_WIDTH(),GET_HOLDER_HEIGHT(),
shelf_list[i].x,
shelf_list[i].y,
shelf_list[i].z,
LAYER_NUM,COLUMN_NUM);
GET_LAYER_NUM(),GET_COLUMN_NUM());
shelfList.push(shelf_obj);
}
for(var i = 0;i < shelfSize; i++){
addStackOfRack(shelfList[i].positionX,shelfList[i].positionY,shelfList[i].positionZ,shelfList[i].planeLength,shelfList[i].planeHeight,shelfList[i].planeWidth,shelfList[i].holderLength,shelfList[i].holderHeight,shelfList[i].holderWidth,scene,shelfList[i].storageZoneId+"$"+shelfList[i].shelfId+"$"+shelfList[i].shelfName,shelfList[i].columnNum,shelfList[i].layerNum, objects);
addStackOfRack(shelfList[i].positionX,shelfList[i].positionY,shelfList[i].positionZ,shelfList[i].planeLength,shelfList[i].planeHeight,shelfList[i].planeWidth,shelfList[i].holderLength,shelfList[i].holderHeight,shelfList[i].holderWidth,scene,shelfList[i].storageZoneId+"$"+shelfList[i].shelfId+"$"+shelfList[i].shelfName,shelfList[i].columnNum,shelfList[i].layerNum);
}
}
......@@ -393,8 +380,8 @@ function addOneUnitCargos(shelfId,inLayerNum,inColumnNum,scene) {
var shelf = getShelfById(storageUnit.shelfId);
var storageUnitid = storageUnit.storageUnitId;
var x = storageUnit.positionX;
var y = storageUnit.positionY + 8 + shelf.planeHeight/2;
var y = storageUnit.positionY + GET_BOX_SIZE()/2 + shelf.planeHeight/2;
var z = storageUnit.positionZ;
addCargo(x,y,z,16,16,16,scene,"货物"+"$"+storageUnitid)
addCargo(x,y,z,GET_BOX_SIZE(),GET_BOX_SIZE(),GET_BOX_SIZE(),scene,"货物"+"$"+storageUnitid)
}
//endregion
ThreeJs/ThreeJs_Drag.js
浏览文件 @ bdc82087
......@@ -8,7 +8,7 @@
<script src="./ThreeJs/TransformControls.js"></script>
*/
THREE.ThreeJs_Drag = function ( _camera, _domElement, _scene, _controls) {
THREE.ThreeJs_Drag = function ( _camera, _domElement, _scene, _controls, _isPaused) {
// 过滤不是 Mesh 的物体,例如辅助网格
var objects = [];
for (var i = 0; i < _scene.children.length; i++) {
......@@ -21,9 +21,11 @@ THREE.ThreeJs_Drag = function ( _camera, _domElement, _scene, _controls) {
var dragControls = new THREE.DragControls( objects, _camera, _domElement );
dragControls.addEventListener( 'dragstart', function ( event ) {
_controls.enabled = false;
_isPaused = true;
} );
dragControls.addEventListener( 'dragend', function ( event ) {
_controls.enabled = true;
_isPaused = false;
} );
// // 添加平移控件
// var transformControls = new THREE.TransformControls(_camera, _domElement);
......
ThreeJs/config.js 0 → 100644
浏览文件 @ bdc82087
/**
* 这是模型的静态常量配置
* 和货架的配置（一般要从数据库读取，这里仅做演示）
* @author 谢宁, Created on 2020-01-07
*/
/** ***************************************************************** */
var PLANE_LENGTH = 24; //货架板面长度
var PLANE_WIDTH = 55; //货架板面宽度
var PLANE_HEIGHT = 2; //货架板面高度
var HOLDER_LENGTH = 2; //支架长度
var HOLDER_WIDTH = 2; //支架宽度
var HOLDER_HEIGHT = 25; //支架高度
var LAYER_NUM = 3; //货架层数
var COLUMN_NUM = 2; //货架每层列数
var BOX_SIZE = 16; //货物的大小(立方体)
//货架数组
var shelf_list = new Array();
shelf_list.push({StorageZoneId:'Z1',shelfId:'A1',shelfName:'货架A1',x:-100,y:27,z:0});
shelf_list.push({StorageZoneId:'Z1',shelfId:'A2',shelfName:'货架A2',x:0,y:27,z:0});
shelf_list.push({StorageZoneId:'Z1',shelfId:'A3',shelfName:'货架A3',x:100,y:27,z:0});
shelf_list.push({StorageZoneId:'Z1',shelfId:'A4',shelfName:'货架A4',x:200,y:27,z:0});
shelf_list.push({StorageZoneId:'Z1',shelfId:'A5',shelfName:'货架A5',x:300,y:27,z:0});
shelf_list.push({StorageZoneId:'Z1',shelfId:'A6',shelfName:'货架A6',x:400,y:27,z:0});
function GET_PLANE_LENGTH(){
return PLANE_LENGTH;
}
function GET_PLANE_WIDTH(){
return PLANE_WIDTH;
}
function GET_PLANE_HEIGHT(){
return PLANE_HEIGHT;
}
function GET_HOLDER_LENGTH(){
return HOLDER_LENGTH;
}
function GET_HOLDER_WIDTH(){
return HOLDER_WIDTH;
}
function GET_HOLDER_HEIGHT(){
return HOLDER_HEIGHT;
}
function GET_LAYER_NUM(){
return LAYER_NUM;
}
function GET_COLUMN_NUM(){
return COLUMN_NUM;
}
function GET_BOX_SIZE(){
return BOX_SIZE;
}
function GET_SHELF_LIST(){
return shelf_list;
}
ThreeJs/js/FirstPersonControls.js 0 → 100644
浏览文件 @ bdc82087
/**
* @author mrdoob / http://mrdoob.com/
* @author alteredq / http://alteredqualia.com/
* @author paulirish / http://paulirish.com/
*/
THREE.FirstPersonControls = function ( object, domElement ) {
this.object = object;
this.target = new THREE.Vector3( 0, 0, 0 );
this.domElement = ( domElement !== undefined ) ? domElement : document;
this.enabled = true;
this.movementSpeed = 1.0;
this.lookSpeed = 0.005;
this.lookVertical = true;
this.autoForward = false;
this.activeLook = true;
this.heightSpeed = false;
this.heightCoef = 1.0;
this.heightMin = 0.0;
this.heightMax = 1.0;
this.constrainVertical = false;
this.verticalMin = 0;
this.verticalMax = Math.PI;
this.autoSpeedFactor = 0.0;
this.mouseX = 0;
this.mouseY = 0;
this.lat = 0;
this.lon = 0;
this.phi = 0;
this.theta = 0;
this.moveForward = false;
this.moveBackward = false;
this.moveLeft = false;
this.moveRight = false;
this.mouseDragOn = false;
this.viewHalfX = 0;
this.viewHalfY = 0;
if ( this.domElement !== document ) {
this.domElement.setAttribute( 'tabindex', - 1 );
}
//
this.handleResize = function () {
if ( this.domElement === document ) {
this.viewHalfX = window.innerWidth / 2;
this.viewHalfY = window.innerHeight / 2;
} else {
this.viewHalfX = this.domElement.offsetWidth / 2;
this.viewHalfY = this.domElement.offsetHeight / 2;
}
};
this.onMouseDown = function ( event ) {
if ( this.domElement !== document ) {
this.domElement.focus();
}
event.preventDefault();
event.stopPropagation();
if ( this.activeLook ) {
switch ( event.button ) {
case 0: this.moveForward = true; break;
case 2: this.moveBackward = true; break;
}
}
this.mouseDragOn = true;
};
this.onMouseUp = function ( event ) {
event.preventDefault();
event.stopPropagation();
if ( this.activeLook ) {
switch ( event.button ) {
case 0: this.moveForward = false; break;
case 2: this.moveBackward = false; break;
}
}
this.mouseDragOn = false;
};
this.onMouseMove = function ( event ) {
if ( this.domElement === document ) {
this.mouseX = event.pageX - this.viewHalfX;
this.mouseY = event.pageY - this.viewHalfY;
} else {
this.mouseX = event.pageX - this.domElement.offsetLeft - this.viewHalfX;
this.mouseY = event.pageY - this.domElement.offsetTop - this.viewHalfY;
}
};
this.onKeyDown = function ( event ) {
//event.preventDefault();
switch ( event.keyCode ) {
case 38: /*up*/
case 87: /*W*/ this.moveForward = true; break;
case 37: /*left*/
case 65: /*A*/ this.moveLeft = true; break;
case 40: /*down*/
case 83: /*S*/ this.moveBackward = true; break;
case 39: /*right*/
case 68: /*D*/ this.moveRight = true; break;
case 82: /*R*/ this.moveUp = true; break;
case 70: /*F*/ this.moveDown = true; break;
}
};
this.onKeyUp = function ( event ) {
switch ( event.keyCode ) {
case 38: /*up*/
case 87: /*W*/ this.moveForward = false; break;
case 37: /*left*/
case 65: /*A*/ this.moveLeft = false; break;
case 40: /*down*/
case 83: /*S*/ this.moveBackward = false; break;
case 39: /*right*/
case 68: /*D*/ this.moveRight = false; break;
case 82: /*R*/ this.moveUp = false; break;
case 70: /*F*/ this.moveDown = false; break;
}
};
this.update = function ( delta ) {
if ( this.enabled === false ) return;
if ( this.heightSpeed ) {
var y = THREE.Math.clamp( this.object.position.y, this.heightMin, this.heightMax );
var heightDelta = y - this.heightMin;
this.autoSpeedFactor = delta * ( heightDelta * this.heightCoef );
} else {
this.autoSpeedFactor = 0.0;
}
var actualMoveSpeed = delta * this.movementSpeed;
if ( this.moveForward || ( this.autoForward && ! this.moveBackward ) ) this.object.translateZ( - ( actualMoveSpeed + this.autoSpeedFactor ) );
if ( this.moveBackward ) this.object.translateZ( actualMoveSpeed );
if ( this.moveLeft ) this.object.translateX( - actualMoveSpeed );
if ( this.moveRight ) this.object.translateX( actualMoveSpeed );
if ( this.moveUp ) this.object.translateY( actualMoveSpeed );
if ( this.moveDown ) this.object.translateY( - actualMoveSpeed );
var actualLookSpeed = delta * this.lookSpeed;
if ( ! this.activeLook ) {
actualLookSpeed = 0;
}
var verticalLookRatio = 1;
if ( this.constrainVertical ) {
verticalLookRatio = Math.PI / ( this.verticalMax - this.verticalMin );
}
this.lon += this.mouseX * actualLookSpeed;
if ( this.lookVertical ) this.lat -= this.mouseY * actualLookSpeed * verticalLookRatio;
this.lat = Math.max( - 85, Math.min( 85, this.lat ) );
this.phi = THREE.Math.degToRad( 90 - this.lat );
this.theta = THREE.Math.degToRad( this.lon );
if ( this.constrainVertical ) {
this.phi = THREE.Math.mapLinear( this.phi, 0, Math.PI, this.verticalMin, this.verticalMax );
}
var targetPosition = this.target,
position = this.object.position;
targetPosition.x = position.x + 100 * Math.sin( this.phi ) * Math.cos( this.theta );
targetPosition.y = position.y + 100 * Math.cos( this.phi );
targetPosition.z = position.z + 100 * Math.sin( this.phi ) * Math.sin( this.theta );
this.object.lookAt( targetPosition );
};
function contextmenu( event ) {
event.preventDefault();
}
this.dispose = function () {
this.domElement.removeEventListener( 'contextmenu', contextmenu, false );
this.domElement.removeEventListener( 'mousedown', _onMouseDown, false );
this.domElement.removeEventListener( 'mousemove', _onMouseMove, false );
this.domElement.removeEventListener( 'mouseup', _onMouseUp, false );
window.removeEventListener( 'keydown', _onKeyDown, false );
window.removeEventListener( 'keyup', _onKeyUp, false );
};
var _onMouseMove = bind( this, this.onMouseMove );
var _onMouseDown = bind( this, this.onMouseDown );
var _onMouseUp = bind( this, this.onMouseUp );
var _onKeyDown = bind( this, this.onKeyDown );
var _onKeyUp = bind( this, this.onKeyUp );
this.domElement.addEventListener( 'contextmenu', contextmenu, false );
this.domElement.addEventListener( 'mousemove', _onMouseMove, false );
this.domElement.addEventListener( 'mousedown', _onMouseDown, false );
this.domElement.addEventListener( 'mouseup', _onMouseUp, false );
window.addEventListener( 'keydown', _onKeyDown, false );
window.addEventListener( 'keyup', _onKeyUp, false );
function bind( scope, fn ) {
return function () {
fn.apply( scope, arguments );
};
}
this.handleResize();
};
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或