From 9a3acfc063e6c6f6950b37d0fdaad37421bf2f1d Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期三, 27 三月 2024 14:50:30 +0800
Subject: [PATCH] #
---
/dev/null | 0
zy-asrs-flow/package.json | 4
zy-asrs-flow/src/pages/map/drawer/shelf/shelfThree.js | 228 +++++++++++++++++++++++++++++++++++++++++++++
zy-asrs-flow/src/pages/map/drawer/shelf/view.jsx | 11 +
4 files changed, 239 insertions(+), 4 deletions(-)
diff --git a/zy-asrs-flow/package.json b/zy-asrs-flow/package.json
index 708a4ae..9a48ea3 100644
--- a/zy-asrs-flow/package.json
+++ b/zy-asrs-flow/package.json
@@ -67,7 +67,9 @@
"react-dom": "^18.2.0",
"react-helmet-async": "^1.3.0",
"react-syntax-highlighter": "^15.5.0",
- "tweedle.js": "^2.1.0"
+ "tweedle.js": "^2.1.0",
+ "three": "^0.155.0",
+ "@tweenjs/tween.js": "^21.0.0"
},
"devDependencies": {
"@ant-design/pro-cli": "^3.3.0",
diff --git a/zy-asrs-flow/src/pages/map/drawer/shelf/3D.js b/zy-asrs-flow/src/pages/map/drawer/shelf/3D.js
deleted file mode 100644
index e69de29..0000000
--- a/zy-asrs-flow/src/pages/map/drawer/shelf/3D.js
+++ /dev/null
diff --git a/zy-asrs-flow/src/pages/map/drawer/shelf/shelfThree.js b/zy-asrs-flow/src/pages/map/drawer/shelf/shelfThree.js
new file mode 100644
index 0000000..b3f856f
--- /dev/null
+++ b/zy-asrs-flow/src/pages/map/drawer/shelf/shelfThree.js
@@ -0,0 +1,228 @@
+import * as THREE from 'three'
+import Stats from 'three/addons/libs/stats.module.js';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
+import TWEEN from '@tweenjs/tween.js';
+
+const help = false;
+const debugCamera = {
+ x: 100,
+ y: 300,
+ z: 200
+}
+
+export default class ShelfThree {
+
+ constructor(dom) {
+ const { current: container } = dom;
+ this.scene = initScene();
+ this.camera = initCamera(this.scene);
+ this.renderer = initRenderer(container);
+ this.controls = initControls(this.camera, this.renderer);
+ windowResize(this.camera, this.renderer);
+ initLight(this.scene);
+ this.stats = initStats(container);
+
+
+ this.objects = [];
+ this.agvList = [];
+ this.agvDataList = [];
+ this.conveyorDataList = [];
+
+ this.initRaycaster(container, this.camera, this.objects);
+ }
+
+ startup = () => {
+ this.animate();
+ this.build();
+ }
+
+ animate = () => {
+ requestAnimationFrame(this.animate);
+ this.render();
+ TWEEN.update();
+ }
+
+ render = () => {
+ this.renderer.shadowMap.enabled = true;
+ this.renderer.render(this.scene, this.camera);
+ this.stats.update();
+ // Rotate the scene
+ this.controls.update()
+ this.controls.autoRotateSpeed = 0.6;
+ }
+
+ addObject = (object) => {
+ this.scene.add(object);
+ this.objects.push(object);
+ }
+
+ build = () => {
+ // 1.build floor
+ buildFloor(this.scene);
+ }
+
+ initRaycaster = (container, camera, objects) => {
+ const raycaster = new THREE.Raycaster();
+ const mouse = new THREE.Vector2();
+
+ container.addEventListener("click", (event) => {
+ this.handleClick("null");
+ })
+ container.addEventListener("dblclick", (event) => {
+ let x, y;
+ if (event.changedTouches) {
+ x = event.changedTouches[0].pageX;
+ y = event.changedTouches[0].pageY;
+ } else {
+ x = event.clientX;
+ y = event.clientY;
+ }
+ event.preventDefault();
+ mouse.x = (x / window.innerWidth) * 2 - 1;
+ mouse.y = -(y / window.innerHeight) * 2 + 1;
+ raycaster.setFromCamera(mouse, camera);
+ let intersects = raycaster.intersectObjects(objects, true);
+ if (intersects.length === 0) {
+ this.handleClick("null");
+ return;
+ }
+ let objName = intersects[0].object.name;
+ if (objName.startsWith("locNo")) {
+
+ if (this.handleClick) {
+ this.handleClick(objName, x, y);
+ }
+
+ } else {
+ this.handleClick("null");
+ }
+
+ }, false);
+ }
+
+ handleClick = () => {
+
+ }
+};
+
+const initScene = () => {
+ const scene = new THREE.Scene();
+ // scene.background = new THREE.Color(0xf0f0f0);
+ scene.background = new THREE.Color(0x333333);
+ if (help) {
+ scene.add(new THREE.AxesHelper(1000));
+ }
+ return scene;
+}
+
+const initCamera = (scene) => {
+ const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000);
+ camera.position.set(debugCamera.x, debugCamera.y, debugCamera.z);
+ scene.add(camera);
+ return camera;
+}
+
+const initLight = (scene) => {
+
+ const directionalLight = new THREE.DirectionalLight(0xffffff, 0.6); // 鍏夐鑹诧紝寮哄害
+ directionalLight.position.set(1, 1, 1).normalize();
+ scene.add(directionalLight);
+
+ const ambientLight = new THREE.AmbientLight(0xf0f0f0, 3);
+ scene.add(ambientLight);
+
+ const spotLight = new THREE.SpotLight(0xffffff, 8);
+ spotLight.position.set(1617, 2500, 4022);
+ spotLight.angle = Math.PI * 1;
+ spotLight.decay = 0;
+ spotLight.castShadow = true;
+ spotLight.shadow.camera.near = 200;
+ spotLight.shadow.camera.far = 2000;
+ spotLight.shadow.bias = - 0.000222;
+ spotLight.shadow.mapSize.width = 1024;
+ spotLight.shadow.mapSize.height = 1024;
+
+ const targetObject = new THREE.Object3D();
+ targetObject.position.set(1617, 0, 4022);
+ spotLight.target = targetObject;
+
+ scene.add(spotLight);
+ if (help) {
+ scene.add(new THREE.SpotLightHelper(spotLight));
+ }
+}
+
+const initRenderer = (container) => {
+ const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+ renderer.setClearAlpha(0);
+ // renderer.useLegacyLights = false; // 鏃х増鍏夋簮 閲嶈
+ renderer.shadowMap.enabled = true;
+ // this.renderer.shadowMap.type = THREE.BasicShadowMap; // 鏈�浣庨槾褰�
+ // this.renderer.toneMapping = THREE.ReinhardToneMapping;
+ renderer.toneMapping = THREE.ACESFilmicToneMapping;
+ renderer.setPixelRatio(window.devicePixelRatio);
+ renderer.setSize(window.innerWidth, window.innerHeight);
+ container.appendChild(renderer.domElement);
+ return renderer;
+}
+
+const initControls = (camera, renderer) => {
+ const controls = new OrbitControls(camera, renderer.domElement);
+ // controls.enableRotate = false; // 绂佺敤鏁翠綋鏃嬭浆鍔熻兘
+ controls.enablePan = true; // 鍏佽骞崇Щ
+ controls.enableDamping = true; // 寮�鍚樆灏�
+ controls.dampingFactor = 0.08; // 闃诲凹鍥犲瓙
+ controls.enableZoom = true; // 鍏佽缂╂斁
+ // controls.minDistance = 1; // 鏈�灏忕缉鏀捐窛绂�
+ // controls.maxDistance = 30; // 鏈�澶х缉鏀捐窛绂�
+ controls.minPolarAngle = 0; // 鏈�灏忎刊浠拌搴︼紙鍚戜笅鐪嬶級
+ controls.maxPolarAngle = Math.PI / 2.1; // 鏈�澶т刊浠拌搴︼紙鍚戜笂鐪嬶級
+ controls.rotateSpeed = 0.6; // 瑙嗚绉诲姩閫熷害鍑忔參
+ // controls.autoRotate = true; // 鑷姩鏃嬭浆
+
+ controls.target = new THREE.Vector3(debugCamera.x, 0, debugCamera.z) // 骞虫浛 camera鐨刲ookAt
+ return controls;
+}
+
+const windowResize = (camera, renderer) => {
+ window.addEventListener('resize', function () {
+ camera.aspect = window.innerWidth / window.innerHeight;
+ camera.updateProjectionMatrix();
+ renderer.setSize(window.innerWidth, window.innerHeight);
+ }, false);
+}
+
+const initStats = (container) => {
+ const stats = new Stats();
+ container.appendChild(stats.dom);
+ if (!help) {
+ stats.domElement.style.display = 'none';
+ }
+ return stats;
+}
+
+const buildFloor = (scene) => {
+ // const size = 10000;
+ // const divisions = 100;
+ // const helper = new THREE.GridHelper(size, divisions);
+ // helper.position.x = size / 2;
+ // helper.position.z = size / 2;
+ // helper.material.opacity = 0.25;
+ // helper.material.transparent = true;
+ // scene.add(helper);
+ // return helper;
+
+ const width = 3500;
+ const length = 7500;
+ const floorGeometry = new THREE.BoxGeometry(width, 1, length); // 216涓洪暱搴︼紝10涓哄搴︼紝10涓洪珮搴�
+ const floorMaterial = new THREE.MeshBasicMaterial({
+ color: 0xffffff,
+ transparent: true,
+ opacity: 0.1,
+ });
+ const floorMesh = new THREE.Mesh(floorGeometry, floorMaterial);
+ floorMesh.position.set(width / 2, -1, length / 2); // 鏍规嵁浣犵殑闇�姹傝缃綅缃�
+ floorMesh.name = 'floor';
+ scene.add(floorMesh);
+ return floorMesh;
+}
\ No newline at end of file
diff --git a/zy-asrs-flow/src/pages/map/drawer/shelf/view.jsx b/zy-asrs-flow/src/pages/map/drawer/shelf/view.jsx
index 331d381..27fed34 100644
--- a/zy-asrs-flow/src/pages/map/drawer/shelf/view.jsx
+++ b/zy-asrs-flow/src/pages/map/drawer/shelf/view.jsx
@@ -4,25 +4,30 @@
import { createStyles } from 'antd-style';
import * as Utils from '../../utils'
import Http from '@/utils/http';
+import ShelfThree from './shelfThree'
const useStyles = createStyles(({ token, css }) => {
})
+let shelfThree;
+
const ShelfView = (props) => {
const intl = useIntl();
const { styles } = useStyles();
+ console.log(props.data);
+
const refContainer = useRef();
useEffect(() => {
-
+ shelfThree = new ShelfThree(refContainer);
+ shelfThree.startup();
}, []);
return (
<>
- <div style={{zIndex: 99}} ref={refContainer}></div>
- <h1>{props.data.uuid}</h1>
+ <div style={{ zIndex: 99 }} ref={refContainer}></div>
</>
)
}
--
Gitblit v1.9.1