From f90fbbc76d23340e4568dd4dadbab5f7f02a030f Mon Sep 17 00:00:00 2001 From: pengwei <2071057782@qq.com> Date: 星期一, 24 三月 2025 14:49:24 +0800 Subject: [PATCH] 3.24功能新增 --- 项目代码/client/src/views/tts/TheCurrentJob/Startjob.vue | 516 +++++++++++++++++++++++++++++++++++++++++++-------------- 1 files changed, 387 insertions(+), 129 deletions(-) diff --git "a/\351\241\271\347\233\256\344\273\243\347\240\201/client/src/views/tts/TheCurrentJob/Startjob.vue" "b/\351\241\271\347\233\256\344\273\243\347\240\201/client/src/views/tts/TheCurrentJob/Startjob.vue" index 4118283..66c4238 100644 --- "a/\351\241\271\347\233\256\344\273\243\347\240\201/client/src/views/tts/TheCurrentJob/Startjob.vue" +++ "b/\351\241\271\347\233\256\344\273\243\347\240\201/client/src/views/tts/TheCurrentJob/Startjob.vue" @@ -126,6 +126,7 @@ " > <el-table + empty-text="鏆傛棤鏁版嵁" :data="taskData" width="100%" :header-cell-style="{ @@ -172,6 +173,7 @@ </div> <div style="position: absolute; width: 47rem; height: 2.5rem"> <el-table + empty-text="鏆傛棤鏁版嵁" style="margin-top: 0.88rem" :data="gridData" width="100%" @@ -229,6 +231,7 @@ </el-table> <div class="consten" v-if="contentShow"> <el-table + empty-text="鏆傛棤鏁版嵁" :data="gridData" width="100%" :header-cell-style="{ @@ -313,7 +316,10 @@ v-model="torqueFrom.torqueSize" style="font-size: 0.75rem; height: 2rem" placeholder="璇疯緭鍏ユ壄鍔涘��" - /> + ><template #suffix> + <span style="font-size: 0.88rem; color: black">N*m</span> + </template> + </el-input> <!-- @blur="addTorque" --> </el-scrollbar> </div> @@ -357,12 +363,17 @@ justify-content: center; align-items: center; position: absolute; - top: 33%; + top: 35%; left: 50%; transform: translateX(-50%); + z-index: 999; " > - <div ref="container" style="width: 100%; height: 100%"></div> + <div + ref="container" + class="my-three" + style="width: 100%; height: 100%" + ></div> <!-- <model-gltf :width="400" :height="400" @@ -373,6 +384,11 @@ enableZoom, }" /> --> + </div> + <div style="position: absolute; bottom: 5%; left: 2%"> + <span style="color: rgba(26, 201, 255, 1); font-size: 1.5em" + >X:{{ xPos }} Y:{{ yPos }} Z:{{ zPos }}</span + > </div> <div style=" @@ -471,10 +487,11 @@ import * as THREE from "three"; import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; //gltf +import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader"; const container = ref(null); -let scene, camera, renderer, controls; +// let scene, camera, renderer, controls; const router = useRouter(); const gridData = ref([]); @@ -524,16 +541,38 @@ const innerRef = ref(); const scrollbarRef = ref(); +const isJob = ref([]); //宸茬粡瀹屾垚鐨勬楠� + //涓婁竴姝� const Previous = (val) => { + //涓婁竴涓殑鍊� from.value.group = info.value.grouptype; from.value.takeid = info.value.njtakeid; from.value.setnum = obj.value.setpNum; flag.value = val; - console.log(from.value, info.value); GetPre(from.value, flag.value).then((res) => { gridData.value = [res.data.nex]; obj.value = res.data.nex; + xPos.value = + gridData.value[0].pointAxisXYZ != null && + gridData.value[0].pointAxisXYZ != 0 + ? gridData.value[0].pointAxisXYZ.split(",")[0] + : -585; + yPos.value = + gridData.value[0].pointAxisXYZ != null && + gridData.value[0].pointAxisXYZ != 0 + ? gridData.value[0].pointAxisXYZ.split(",")[1] + : 692; + zPos.value = + gridData.value[0].pointAxisXYZ != null && + gridData.value[0].pointAxisXYZ != 0 + ? gridData.value[0].pointAxisXYZ.split(",")[2] + : 692; + isJob.value = nodeList.slice(0, gridData.value[0].setpNum - 1); //宸茬粡瀹屾垚鐨勬楠� + cameraAnimate( + [xPos.value, yPos.value, zPos.value], + gridData.value[0].moduleName + ); queryData.value.setnum = obj.value.setpNum; GetTorque(queryData.value).then((res) => { Torque.value = res.data; @@ -542,12 +581,10 @@ }; //涓嬩竴姝� const Next = (val) => { - console.log(obj.value); from.value.group = info.value.grouptype; from.value.takeid = info.value.njtakeid; from.value.setnum = obj.value.setpNum; flag.value = val; - GetNext(from.value, flag.value).then((res) => { if (res.message == "娌℃湁瀹屾垚褰撳墠姝ラ") { gridData.value = res.data.nowdate; @@ -560,8 +597,29 @@ } centerDialogVisible.value = false; gridData.value = [res.data.nex]; + xPos.value = + gridData.value[0].pointAxisXYZ != null && + gridData.value[0].pointAxisXYZ != 0 + ? gridData.value[0].pointAxisXYZ.split(",")[0] + : -585; + yPos.value = + gridData.value[0].pointAxisXYZ != null && + gridData.value[0].pointAxisXYZ != 0 + ? gridData.value[0].pointAxisXYZ.split(",")[1] + : 692; + zPos.value = + gridData.value[0].pointAxisXYZ != null && + gridData.value[0].pointAxisXYZ != 0 + ? gridData.value[0].pointAxisXYZ.split(",")[2] + : 692; + isJob.value = res.data.finish.map((item) => { + return item.moduleName; + }); + cameraAnimate( + [xPos.value, yPos.value, zPos.value], + gridData.value[0].moduleName + ); obj.value = res.data.nex; - queryData.value.setnum = obj.value.setpNum; GetTorque(queryData.value).then((res) => { Torque.value = res.data; @@ -611,138 +669,269 @@ takeid: info.value.njtakeid, setnum: "", }); -const initData = () => { - console.log(obj.value); - GetScreenData({ +const initData = async () => { + await GetScreenData({ group: info.value.grouptype, takeid: info.value.njtakeid, }).then((res) => { - if (res.message == "杩斿洖宸ヨ壓琛ㄤ腑鐨勭涓�鏉�") { - gridData.value = res.data.proNoe; - obj.value = res.data.proNoe[0]; - sunNUm.value = res.data.maxproce; - queryData.value.setnum = obj.value.setpNum; - GetTorque(queryData.value).then((res) => { - Torque.value = res.data; - }); - return; - } - gridData.value = res.data.maxpro; + // if (res.message == "杩斿洖宸ヨ壓琛ㄤ腑鐨勭涓�鏉�") { + // gridData.value = res.data.proNoe; + // obj.value = res.data.proNoe[0]; + // sunNUm.value = res.data.maxproce; + // queryData.value.setnum = obj.value.setpNum; + // xPos.value = + // gridData.value[0].pointAxisXYZ != null && + // gridData.value[0].pointAxisXYZ != 0 + // ? gridData.value[0].pointAxisXYZ.split(",")[0] + // : -585; + // yPos.value = + // gridData.value[0].pointAxisXYZ != null && + // gridData.value[0].pointAxisXYZ != 0 + // ? gridData.value[0].pointAxisXYZ.split(",")[1] + // : 692; + // zPos.value = + // gridData.value[0].pointAxisXYZ != null && + // gridData.value[0].pointAxisXYZ != 0 + // ? gridData.value[0].pointAxisXYZ.split(",")[2] + // : 692; + // cameraAnimate( + // [xPos.value, yPos.value, zPos.value], + // nodeList[gridData.value[0].setpNum] + // ); + // GetTorque(queryData.value).then((res) => { + // Torque.value = res.data; + // }); + // return; + // } + gridData.value = [res.data.proNow]; sunNUm.value = res.data.maxproce; - obj.value = res.data.maxpro[0]; + obj.value = res.data.proNow; queryData.value.setnum = obj.value.setpNum; + xPos.value = + gridData.value[0].pointAxisXYZ != null && + gridData.value[0].pointAxisXYZ != 0 + ? gridData.value[0].pointAxisXYZ.split(",")[0] + : -585; + yPos.value = + gridData.value[0].pointAxisXYZ != null && + gridData.value[0].pointAxisXYZ != 0 + ? gridData.value[0].pointAxisXYZ.split(",")[1] + : 692; + zPos.value = + gridData.value[0].pointAxisXYZ != null && + gridData.value[0].pointAxisXYZ != 0 + ? gridData.value[0].pointAxisXYZ.split(",")[2] + : 692; + isJob.value = res.data.finish; + cameraAnimate( + [xPos.value, yPos.value, zPos.value], + gridData.value[0].moduleName + ); GetTorque(queryData.value).then((res) => { Torque.value = res.data; }); }); }; -const showModel = () => { - scene = new THREE.Scene(); - console.log("model", window.innerWidth, window.innerHeight); +const CAMERA_POS = [100, 100, 150]; +const BASE_COLOR = [0.2, 0.4, 0.6]; +const RED_COLOR = [3.0, 0.2, 0.4]; +const GREEN_COLOR = [0.0, 1.0, 0.0]; +const xPos = ref(""); +const yPos = ref(""); +const zPos = ref(""); +const scene = new THREE.Scene(); +const camera = new THREE.PerspectiveCamera( + 75, + window.innerWidth / window.innerHeight, + 0.1, + 3000 +); +const renderer = new THREE.WebGLRenderer({ + antialias: true, + alpha: true, + precision: "highp", +}); - // 鍒涘缓鐩告満 (瑙嗚锛屽楂樻瘮锛岃繎瑁佸壀闈紝杩滆鍓潰) - camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000); +const painting = (part) => { + let newArr = []; + // let newArr = flatten(isJob.value); + scene.traverse(function (child) { + // 妫�鏌ュ璞℃槸鍚﹀叿鏈夋潗璐ㄥ睘鎬� + if (child.isMesh) { + let materials = child.material; + // 濡傛灉鏉愯川鏄崟涓璞¤�屼笉鏄暟缁勶紝鍒欏皢鍏舵斁鍏ユ暟缁勪腑浠ヤ究缁熶竴澶勭悊 + if (!Array.isArray(materials)) { + materials = [materials]; + } + let isString = []; // 鍒ゆ柇鏄惁鏄瓧绗︿覆 + // 閬嶅巻鏉愯川鏁扮粍骞惰缃鑹� + //宸茬粡瀹屾垚鐨勮妭鐐� + isJob.value.forEach((item) => { + if ( + item == + "鎶楄泧琛屽噺鎸櫒铻烘爴1,鎶楄泧琛屽噺鎸櫒铻烘爴2,鎶楄泧琛屽噺鎸櫒铻烘爴3,鎶楄泧琛屽噺鎸櫒铻烘爴4" && + item != part + ) { + isString = item.split(","); + materials.forEach(function (material) { + if (isString.includes(material.name)) { + material.color.setRGB(...GREEN_COLOR); + } + material.needsUpdate = true; // 寮哄埗鏇存柊鏉愯川 + }); + } + materials.forEach(function (material) { + if (material.name === item) { + material.color.setRGB(...GREEN_COLOR); + } + material.needsUpdate = true; // 寮哄埗鏇存柊鏉愯川 + }); + }); + console.log(part.split(",")); + if ( + part == + "鎶楄泧琛屽噺鎸櫒铻烘爴1,鎶楄泧琛屽噺鎸櫒铻烘爴2,鎶楄泧琛屽噺鎸櫒铻烘爴3,鎶楄泧琛屽噺鎸櫒铻烘爴4" + ) { + materials.forEach(function (material) { + if (part.split(",").includes(material.name)) { + material.color.setRGB(...RED_COLOR); + } + material.needsUpdate = true; // 寮哄埗鏇存柊鏉愯川 + }); + } else { + materials.forEach(function (material) { + if (material.name == part) { + material.color.setRGB(...RED_COLOR); + } + material.needsUpdate = true; // 寮哄埗鏇存柊鏉愯川 + }); + } - // 鍒涘缓娓叉煋鍣� - renderer = new THREE.WebGLRenderer({ - antialias: true, - alpha: true, - }); - renderer.setSize(400, 400); // 璁剧疆娓叉煋鍣ㄧ殑澶у皬 - container.value.appendChild(renderer.domElement); - scene.background = null; - // 鍔犺浇GLTF妯″瀷 - const loader = new GLTFLoader(); - loader.load( - "ThreeModel/test.gltf", - (gltf) => { - const model = gltf.scene; - - // 璁$畻妯″瀷鐨勮竟鐣屾骞惰幏鍙栦腑蹇冪偣 - const box = new THREE.Box3().setFromObject(model); - const center = box.getCenter(new THREE.Vector3()); - - // 鍒涘缓涓�涓┖瀵硅薄浣滀负鐖惰妭鐐癸紝灏嗗潗鏍囪酱鍜屾ā鍨嬫坊鍔犲埌杩欎釜鐖惰妭鐐� - const parent = new THREE.Object3D(); - scene.add(parent); - - // 灏嗘ā鍨嬬殑浣嶇疆璁剧疆涓烘ā鍨嬬殑杈圭晫妗嗙殑涓績锛岀‘淇濆畠灞呬腑 - model.position.sub(center); // 璁╂ā鍨嬬殑涓績涓庣埗鑺傜偣瀵归綈 - - // 灏嗗潗鏍囪酱鍔╂墜娣诲姞鍒扮埗鑺傜偣 - // const axesHelper = new THREE.AxesHelper(100); // 杞寸殑闀垮害涓�100 x,y,z鐨勯鑹插垎鍒负锛堢孩鑹诧紝缁胯壊锛岃摑鑹诧級 - // parent.add(axesHelper); // 灏嗗潗鏍囪酱娣诲姞鍒扮埗鑺傜偣 - - // 灏嗘ā鍨嬫坊鍔犲埌鐖惰妭鐐� - parent.add(model); - - // 纭繚妯″瀷鐨勫ぇ灏忛�傚綋锛屽彲浠ヨ皟鏁存ā鍨嬬殑澶у皬 - model.scale.set(1, 1, 1); // 濡傛灉闇�瑕佺殑璇濆彲浠ョ缉鏀炬ā鍨� - }, - undefined, - (error) => { - console.error("妯″瀷鍔犺浇澶辫触", error); + // if ( + // typeof part == + // "鎶楄泧琛屽噺鎸櫒铻烘爴1,鎶楄泧琛屽噺鎸櫒铻烘爴2,鎶楄泧琛屽噺鎸櫒铻烘爴3,鎶楄泧琛屽噺鎸櫒铻烘爴4" + // ) { + // newArr = part.split(","); + // materials.forEach(function (material) { + // if (newArr.includes(material.name)) { + // material.color.setRGB(...GREEN_COLOR); + // } + // if (part.includes(material.name)) { + // material.color.setRGB(...RED_COLOR); + // } else { + // material.color.setRGB(...BASE_COLOR); + // } + // material.needsUpdate = true; // 寮哄埗鏇存柊鏉愯川 + // }); + // } else { + // materials.forEach(function (material) { + // if (newArr.includes(material.name)) { + // material.color.setRGB(...GREEN_COLOR); + // } else if (material.name === part) { + // material.color.setRGB(...RED_COLOR); + // } else { + // material.color.setRGB(...BASE_COLOR); + // } + // // if (newArr.includes(material.name)) { + // // material.color.setRGB(...GREEN_COLOR); + // // } + // material.needsUpdate = true; // 寮哄埗鏇存柊鏉愯川 + // }); + // } } - ); - - const metalMaterial = new THREE.MeshStandardMaterial({ - color: 0xaaaaaa, - metalness: 1, - roughness: 0.2, }); - - const sphereGeometry = new THREE.SphereGeometry(1, 32, 32); - const metalSphere = new THREE.Mesh(sphereGeometry, metalMaterial); - scene.add(metalSphere); - - // 鍒涘缓鐏厜 - const light = new THREE.AmbientLight(0xffffff); // 鐜鍏夋槸涓�绉嶅叏灞�鎬х殑鍏夋簮锛屽潎鍖�鍦扮収浜暣涓満鏅紝骞朵笖涓嶄細鏈夐槾褰辨晥鏋� - scene.add(light); - - const directionalLight = new THREE.DirectionalLight(0xffffff, 3); //杩欐浠g爜鍒涘缓浜嗕竴涓櫧鑹层�佸己搴︿负 1 鐨勫钩琛屽厜婧� - directionalLight.position.set(300, 300, 300).normalize(); //骞跺皢鍏朵綅缃缃湪 (300, 300, 300)銆傜劧鍚庯紝閫氳繃 normalize() 鏂规硶锛岀‘淇濆钩琛屽厜婧愮殑鍏夌嚎浠ヤ竴涓爣鍑嗙殑鏂瑰悜鐓у皠 - scene.add(directionalLight); - - // 璁剧疆鐩告満鍒濆浣嶇疆锛坸,y,z锛� - camera.position.set(100, 100, 50); // 璁剧疆鐩告満浣嶇疆锛岀‘淇濆彲浠ョ湅鍒版ā鍨� - - // 鍒涘缓 OrbitControls 瀹炰緥 - controls = new OrbitControls(camera, renderer.domElement); - controls.enableZoom = false; - controls.enablePan = false; - controls.enableDamping = true; // 鍚敤闃诲凹鏁堟灉 - controls.dampingFactor = 0.25; // 闃诲凹绯绘暟 - controls.screenSpacePanning = false; // 绂佺敤灞忓箷绌洪棿骞崇Щ - controls.maxPolarAngle = Math.PI / 2; // 闄愬埗鐩告満鍨傜洿鏃嬭浆鐨勮搴︼紝闃叉缈昏浆 - controls.target.set(0, 0, 0); // 纭繚鐩告満濮嬬粓鍥寸粫鍦烘櫙涓績锛堟ā鍨嬩綅缃級 - controls.minDistance = 2; // 鏈�灏忚窛绂伙紝闃叉缂╁緱澶繎 - controls.maxDistance = 500; // 鏈�澶ц窛绂伙紝闃叉缂╁緱澶繙 - - // 娓叉煋寰幆 - function animate() { - requestAnimationFrame(animate); - - // 鏇存柊鎺у埗鍣� - controls.update(); // 鍙湁鍦ㄥ惎鐢ㄩ樆灏肩殑鏃跺�欓渶瑕佽皟鐢ㄦ鍑芥暟 - - // 娓叉煋鍦烘櫙 - renderer.render(scene, camera); - } - - animate(); - - // 鍝嶅簲绐楀彛澶у皬鍙樺寲; - window.addEventListener("resize", onWindowResize, false); - - function onWindowResize() { - console.log(window.innerWidth, window.innerHeight); - - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); - renderer.setSize(window.innerWidth / 2, window.innerHeight / 2); - } }; +const cameraAnimate = ( + targetPosition = CAMERA_POS, + part = null, + duration = 500 +) => { + let startTime = null; + const startPosition = { + x: camera.position.x, + y: camera.position.y, + z: camera.position.z, + }; + const distance = { + x: targetPosition[0] - startPosition.x, + y: targetPosition[1] - startPosition.y, + z: targetPosition[2] - startPosition.z, + }; + + function animate(time) { + if (!startTime) startTime = time; + const elapsed = time - startTime; + const progress = Math.min(elapsed / duration, 1); + + // 浣跨敤绾挎�ф彃鍊艰绠楁柊鐨勪綅缃� + camera.position.x = startPosition.x + distance.x * progress; + camera.position.y = startPosition.y + distance.y * progress; + camera.position.z = startPosition.z + distance.z * progress; + xPos.value = Math.floor(camera.position.x); + yPos.value = Math.floor(camera.position.y); + zPos.value = Math.floor(camera.position.z); + if (progress < 1) { + requestAnimationFrame(animate); + } + } + requestAnimationFrame(animate); + painting(part); + renderer.render(scene, camera); // 寮哄埗娓叉煋涓�娆� +}; +const flatten = (arr) => { + return arr.reduce( + (acc, val) => + Array.isArray(val) ? acc.concat(flatten(val)) : acc.concat(val), + [] + ); +}; +window.addEventListener("resize", () => { + console.log("鍒濆鍖栧満鏅�", window.innerWidth, window.innerHeight); + // camera.aspect = window.innerWidth / window.innerHeight; + // camera.updateProjectionMatrix(); + // renderer.setSize(window.innerWidth, window.innerHeight); +}); +const nodeList = [ + "杞悜鏋�", + "鎶楄泧琛屽噺鎸櫒铻烘爴1,鎶楄泧琛屽噺鎸櫒铻烘爴2,鎶楄泧琛屽噺鎸櫒铻烘爴3,鎶楄泧琛屽噺鎸櫒铻烘爴4", + "鎶楄泧琛屽噺鎸櫒铻烘爴1,鎶楄泧琛屽噺鎸櫒铻烘爴2,鎶楄泧琛屽噺鎸櫒铻烘爴3,鎶楄泧琛屽噺鎸櫒铻烘爴4", + "鎶楄泧琛屽噺鎸櫒铻烘爴2", + "鎶楄泧琛屽噺鎸櫒铻烘爴3", + "鎶楄泧琛屽噺鎸櫒铻烘爴4", + "鎶楄泧琛屽噺鎸櫒铻烘爴1,鎶楄泧琛屽噺鎸櫒铻烘爴2,鎶楄泧琛屽噺鎸櫒铻烘爴3,鎶楄泧琛屽噺鎸櫒铻烘爴4", + "鎶楄泧琛屽噺鎸櫒铻烘爴2", + "鎶楄泧琛屽噺鎸櫒铻烘爴3", + "鎶楄泧琛屽噺鎸櫒铻烘爴4", + "楂樺害璋冩暣鏉�", + "楂樺害璋冩暣鏉�", + "楂樺害璋冩暣鏉�", + "杞悜鏋�", + "杞悜鏋�", + "杞悜鏋�", + "杞悜鏋�", + "杞悜鏋�", + "杞悜鏋�", + "杞悜鏋�", + "鎶楄泧琛屽噺鎸櫒铻烘爴1,鎶楄泧琛屽噺鎸櫒铻烘爴2,鎶楄泧琛屽噺鎸櫒铻烘爴3,鎶楄泧琛屽噺鎸櫒铻烘爴4", + "鎶楄泧琛屽噺鎸櫒铻烘爴2", + "鎶楄泧琛屽噺鎸櫒铻烘爴3", + "鎶楄泧琛屽噺鎸櫒铻烘爴4", + "鎶楄泧琛屽噺鎸櫒铻烘爴1,鎶楄泧琛屽噺鎸櫒铻烘爴2,鎶楄泧琛屽噺鎸櫒铻烘爴3,鎶楄泧琛屽噺鎸櫒铻烘爴4", + "鎶楄泧琛屽噺鎸櫒铻烘爴1,鎶楄泧琛屽噺鎸櫒铻烘爴2,鎶楄泧琛屽噺鎸櫒铻烘爴3,鎶楄泧琛屽噺鎸櫒铻烘爴4", + "楂樺害璋冩暣鏉�", + "楂樺害璋冩暣鏉�", + "楂樺害璋冩暣鏉�", + "杞悜鏋�", + "杞悜鏋�", + "杞悜鏋�", + "杞悜鏋�", + "杞悜鏋�", + "杞悜鏋�", + "杞悜鏋�", + "杞悜鏋�", +]; + const spanHide = ref(); const spanHide1 = ref(); const handleClickOutside = () => { @@ -763,9 +952,9 @@ }; //娣诲姞鎵姏鍊� const addTorque = () => { - torqueFrom.value.processSte = Torque.value[0].processSte; - torqueFrom.value.takeId = Torque.value[0].takeId; - torqueFrom.value.groupOp = Torque.value[0].groupOp; + torqueFrom.value.processSte = queryData.value.setnum; + torqueFrom.value.takeId = queryData.value.takeid; + torqueFrom.value.groupOp = queryData.value.grop; if ( torqueFrom.value.torqueSize == null || torqueFrom.value.torqueSize == "" || @@ -798,10 +987,79 @@ console.error("娣诲姞澶辫触", error); }); }; + onMounted(() => { - document.addEventListener("click", handleClickOutside); + // 鍒濆鍖栧満鏅� + renderer.setSize(window.innerWidth / 1.5, window.innerHeight / 2); + renderer.setClearColor(0xeeeeee); // 璁剧疆鑳屾櫙鑹� + // 鍚敤鐗╃悊娓叉煋妯″紡 + // renderer.physicallyCorrectLights = true; + // renderer.toneMapping = THREE.ACESFilmicToneMapping; + const mainTag = document.querySelector(".my-three"); + mainTag.appendChild(renderer.domElement); + + // 娣诲姞浜や簰鎺у埗鍣紙榧犳爣鎷栨嫿缂╂斁锛� + const controls = new OrbitControls(camera, renderer.domElement); + camera.position.set(...CAMERA_POS); + controls.update(); + + // 娣诲姞鍏夋簮锛堥噸瑕侊紒鍚﹀垯妯″瀷鍙兘鏄剧ず涓哄叏榛戯級 + const light = new THREE.DirectionalLight(0xffffff, 3); + light.position.set(5, 5, 5); + scene.add(light); + scene.add(new THREE.AmbientLight(0x404040)); + renderer.setClearAlpha(0); + renderer.setPixelRatio(window.devicePixelRatio); + scene.background = null; + let dracoLoader = new DRACOLoader(); + dracoLoader.setDecoderPath("ThreeModel/draco/"); + dracoLoader.setDecoderConfig({ type: "js" }); + dracoLoader.preload(); + // 鍔犺浇GLTF妯″瀷 + const loader = new GLTFLoader(); + loader.setDRACOLoader(dracoLoader); + loader.load( + "ThreeModel/modelDraco.glb", // 鏇挎崲涓轰綘鐨�.gltf鏂囦欢璺緞 + (gltf) => { + const model = gltf.scene; + model.scale.set(80, 80, 80); + scene.add(model); + // 鑷姩灞呬腑妯″瀷锛堝彲閫夛級 + const box = new THREE.Box3().setFromObject(model); + const center = box.getCenter(new THREE.Vector3()); + model.position.sub(center); + }, + (xhr) => { + // 鍔犺浇杩涘害鍥炶皟 + // console.log(`${(xhr.loaded / xhr.total * 100).toFixed(1)}% loaded`); + }, + (error) => { + console.error("鍔犺浇澶辫触:", error); + } + ); + // 鍔ㄧ敾寰幆 + const animate = () => { + requestAnimationFrame(animate); + controls.update(); // 鍚敤鎺у埗鍣ㄦ椂闇�瑕� + renderer.render(scene, camera); + }; initData(); - showModel(); + + animate(); + mainTag.addEventListener("wheel", () => { + xPos.value = Math.floor(camera.position.x); + yPos.value = Math.floor(camera.position.y); + zPos.value = Math.floor(camera.position.z); + }); + mainTag.addEventListener("mousemove", () => { + xPos.value = Math.floor(camera.position.x); + yPos.value = Math.floor(camera.position.y); + zPos.value = Math.floor(camera.position.z); + }); + // }; + document.addEventListener("click", handleClickOutside); + + // showModel(); }); </script> <style lang="scss" scoped> -- Gitblit v1.9.3