{"id":52722,"date":"2025-08-11T18:14:19","date_gmt":"2025-08-11T10:14:19","guid":{"rendered":"https:\/\/www.wsisp.com\/helps\/52722.html"},"modified":"2025-08-11T18:14:19","modified_gmt":"2025-08-11T10:14:19","slug":"%e7%ac%ac%e5%85%ab%e7%af%87%ef%bc%9a%e4%ba%a4%e4%ba%92%e5%85%a5%e9%97%a8%ef%bc%9a%e9%bc%a0%e6%a0%87%e6%8b%be%e5%8f%96%e7%89%a9%e4%bd%93","status":"publish","type":"post","link":"https:\/\/www.wsisp.com\/helps\/52722.html","title":{"rendered":"\u7b2c\u516b\u7bc7\uff1a\u4ea4\u4e92\u5165\u95e8\uff1a\u9f20\u6807\u62fe\u53d6\u7269\u4f53"},"content":{"rendered":"

\u7b2c\u516b\u7bc7：\u4ea4\u4e92\u5165\u95e8：\u9f20\u6807\u62fe\u53d6\u7269\u4f53<\/h4>\n

\u5f15\u8a00<\/h5>\n

\u4ea4\u4e92\u662f3D\u5e94\u7528\u7684\u6838\u5fc3\u7075\u9b42，\u5b83\u8ba9\u7528\u6237\u4ece\u65c1\u89c2\u8005\u53d8\u4e3a\u53c2\u4e0e\u8005\u3002Three.js\u63d0\u4f9b\u4e86\u5f3a\u5927\u7684\u5c04\u7ebf\u68c0\u6d4b(Raycaster)\u529f\u80fd，\u53ef\u5b9e\u73b0\u7269\u4f53\u62fe\u53d6\u3001\u62d6\u62fd\u7b49\u4ea4\u4e92\u6548\u679c\u3002\u672c\u6587\u5c06\u6df1\u5165\u89e3\u6790\u4ea4\u4e92\u6280\u672f\u539f\u7406，\u5e76\u901a\u8fc7Vue3\u5b9e\u73b0\u4e00\u4e2a\u4ea4\u4e92\u5f0f3D\u5c55\u5385，\u8ba9\u4f60\u638c\u63e1\u7528\u6237\u4e0e3D\u4e16\u754c\u6c9f\u901a\u7684\u6865\u6881\u6280\u672f\u3002<\/p>\n

\n

\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\"<\/p>\n

1. \u5c04\u7ebf\u68c0\u6d4b(Raycaster)\u539f\u7406<\/h5>\n
1.1 \u5c04\u7ebf\u68c0\u6d4b\u6d41\u7a0b<\/h6>\n

#mermaid-svg-raDpuwrVw0SKt1TI {font-family:\\”trebuchet ms\\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-raDpuwrVw0SKt1TI .error-icon{fill:#552222;}#mermaid-svg-raDpuwrVw0SKt1TI .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-raDpuwrVw0SKt1TI .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-raDpuwrVw0SKt1TI .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-raDpuwrVw0SKt1TI .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-raDpuwrVw0SKt1TI .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-raDpuwrVw0SKt1TI .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-raDpuwrVw0SKt1TI .marker{fill:#333333;stroke:#333333;}#mermaid-svg-raDpuwrVw0SKt1TI .marker.cross{stroke:#333333;}#mermaid-svg-raDpuwrVw0SKt1TI svg{font-family:\\”trebuchet ms\\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-raDpuwrVw0SKt1TI .label{font-family:\\”trebuchet ms\\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-raDpuwrVw0SKt1TI .cluster-label text{fill:#333;}#mermaid-svg-raDpuwrVw0SKt1TI .cluster-label span{color:#333;}#mermaid-svg-raDpuwrVw0SKt1TI .label text,#mermaid-svg-raDpuwrVw0SKt1TI span{fill:#333;color:#333;}#mermaid-svg-raDpuwrVw0SKt1TI .node rect,#mermaid-svg-raDpuwrVw0SKt1TI .node circle,#mermaid-svg-raDpuwrVw0SKt1TI .node ellipse,#mermaid-svg-raDpuwrVw0SKt1TI .node polygon,#mermaid-svg-raDpuwrVw0SKt1TI .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-raDpuwrVw0SKt1TI .node .label{text-align:center;}#mermaid-svg-raDpuwrVw0SKt1TI .node.clickable{cursor:pointer;}#mermaid-svg-raDpuwrVw0SKt1TI .arrowheadPath{fill:#333333;}#mermaid-svg-raDpuwrVw0SKt1TI .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-raDpuwrVw0SKt1TI .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-raDpuwrVw0SKt1TI .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-raDpuwrVw0SKt1TI .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-raDpuwrVw0SKt1TI .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-raDpuwrVw0SKt1TI .cluster text{fill:#333;}#mermaid-svg-raDpuwrVw0SKt1TI .cluster span{color:#333;}#mermaid-svg-raDpuwrVw0SKt1TI div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\\”trebuchet ms\\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-raDpuwrVw0SKt1TI :root{–mermaid-font-family:\\”trebuchet ms\\”,verdana,arial,sans-serif;}<\/span><\/span><\/span><\/span>\u9f20\u6807\u70b9\u51fb\u5c4f\u5e55\u6807\u51c6\u5316\u8bbe\u5907\u5750\u6807\u76f8\u673a\u53d1\u5c04\u5c04\u7ebf\u68c0\u6d4b\u4e0e\u7269\u4f53\u4ea4\u70b9\u8fd4\u56de\u6700\u8fd1\u4ea4\u70b9<\/p>\n

1.2 \u6838\u5fc3\u4ee3\u7801\u5b9e\u73b0<\/h6>\n

<script setup>
\nimport { ref, onMounted } from 'vue';
\nimport * as THREE from 'three';<\/p>\n

const raycaster = new THREE.Raycaster();
\nconst mouse = new THREE.Vector2();
\nconst intersectedObjects = ref([]);<\/p>\n

\/\/ \u521d\u59cb\u5316\u4e8b\u4ef6\u76d1\u542c
\nonMounted(() => {
\n const canvas = renderer.domElement;
\n canvas.addEventListener('mousemove', onMouseMove);
\n canvas.addEventListener('click', onClick);
\n});<\/p>\n

\/\/ \u66f4\u65b0\u9f20\u6807\u4f4d\u7f6e
\nfunction onMouseMove(event) {
\n \/\/ \u5c06\u9f20\u6807\u4f4d\u7f6e\u5f52\u4e00\u5316\u4e3a\u8bbe\u5907\u5750\u6807（-1\u5230+1）
\n mouse.x = (event.clientX \/ window.innerWidth) * 2 – 1;
\n mouse.y = -(event.clientY \/ window.innerHeight) * 2 + 1;<\/p>\n

\/\/ \u66f4\u65b0\u5c04\u7ebf
\n raycaster.setFromCamera(mouse, camera);<\/p>\n

\/\/ \u68c0\u6d4b\u76f8\u4ea4\u7269\u4f53
\n const intersects = raycaster.intersectObjects(scene.children);<\/p>\n

\/\/ \u66f4\u65b0\u54cd\u5e94\u5f0f\u6570\u636e
\n intersectedObjects.value = intersects.map(i => i.object);
\n}
\n<\/script><\/p>\n

1.3 \u6027\u80fd\u4f18\u5316\u7b56\u7565<\/h6>\n

\/\/ \u53ea\u68c0\u6d4b\u7279\u5b9a\u7269\u4f53<\/span>
\nconst<\/span> interactiveObjects =<\/span> [<\/span>obj1,<\/span> obj2,<\/span> obj3]<\/span>;<\/span>
\nconst<\/span> intersects =<\/span> raycaster.<\/span>intersectObjects<\/span>(<\/span>interactiveObjects)<\/span>;<\/span><\/p>\n

\/\/ \u8282\u6d41\u68c0\u6d4b\u9891\u7387<\/span>
\nlet<\/span> lastCheck =<\/span> 0<\/span>;<\/span>
\nfunction<\/span> onMouseMove<\/span>(<\/span>event<\/span>)<\/span> {<\/span>
\n const<\/span> now =<\/span> Date.<\/span>now<\/span>(<\/span>)<\/span>;<\/span>
\n if<\/span> (<\/span>now –<\/span> lastCheck <<\/span> 50<\/span>)<\/span> return<\/span>;<\/span> \/\/ 20FPS\u68c0\u6d4b<\/span>
\n lastCheck =<\/span> now;<\/span><\/p>\n

\/\/ \u6267\u884c\u68c0\u6d4b…<\/span>
\n}<\/span><\/p>\n

\n
2. \u57fa\u7840\u4ea4\u4e92\u5b9e\u73b0<\/h5>\n
2.1 \u60ac\u505c\u9ad8\u4eae\u6548\u679c<\/h6>\n

<script setup>
\n\/\/ \u5f53\u524d\u60ac\u505c\u7684\u7269\u4f53
\nconst hoverObject = ref(null);<\/p>\n

\/\/ \u9ad8\u4eae\u6750\u8d28
\nconst highlightMaterial = new THREE.MeshBasicMaterial({
\n color: 0xffff00,
\n wireframe: true
\n});<\/p>\n

watch(intersectedObjects, (intersects) => {
\n const newHover = intersects.length > 0 ? intersects[0] : null;<\/p>\n

\/\/ \u79fb\u9664\u65e7\u9ad8\u4eae
\n if (hoverObject.value) {
\n hoverObject.value.material = hoverObject.value.userData.originalMaterial;
\n }<\/p>\n

\/\/ \u5e94\u7528\u65b0\u9ad8\u4eae
\n if (newHover) {
\n newHover.userData.originalMaterial = newHover.material;
\n newHover.material = highlightMaterial;
\n hoverObject.value = newHover;
\n } else {
\n hoverObject.value = null;
\n }
\n});
\n<\/script><\/p>\n

2.2 \u70b9\u51fb\u9009\u62e9\u7269\u4f53<\/h6>\n

<template>
\n <div v-if="selectedObject" class="info-panel">
\n <h3>{{ selectedObject.name }}<\/h3>
\n <p>\u4f4d\u7f6e: {{ selectedObject.position.toArray() }}<\/p>
\n <\/div>
\n<\/template><\/p>\n

<script setup>
\nconst selectedObject = ref(null);<\/p>\n

function onClick() {
\n if (intersectedObjects.value.length > 0) {
\n selectedObject.value = intersectedObjects.value[0];
\n } else {
\n selectedObject.value = null;
\n }
\n}
\n<\/script><\/p>\n

2.3 \u62d6\u62fd\u7269\u4f53<\/h6>\n

let<\/span> dragObject =<\/span> null<\/span>;<\/span>
\nlet<\/span> dragOffset =<\/span> new<\/span> THREE.<\/span>Vector3<\/span>(<\/span>)<\/span>;<\/span><\/p>\n

function<\/span> onMouseDown<\/span>(<\/span>event<\/span>)<\/span> {<\/span>
\n raycaster.<\/span>setFromCamera<\/span>(<\/span>mouse,<\/span> camera)<\/span>;<\/span>
\n const<\/span> intersects =<\/span> raycaster.<\/span>intersectObjects<\/span>(<\/span>scene.<\/span>children)<\/span>;<\/span><\/p>\n

if<\/span> (<\/span>intersects.<\/span>length ><\/span> 0<\/span>)<\/span> {<\/span>
\n dragObject =<\/span> intersects[<\/span>0<\/span>]<\/span>.<\/span>object;<\/span><\/p>\n

\/\/ \u8ba1\u7b97\u7269\u4f53\u4e2d\u5fc3\u5230\u4ea4\u70b9\u7684\u504f\u79fb<\/span>
\n dragOffset.<\/span>copy<\/span>(<\/span>intersects[<\/span>0<\/span>]<\/span>.<\/span>point)<\/span>
\n .<\/span>sub<\/span>(<\/span>dragObject.<\/span>position)<\/span>;<\/span><\/p>\n

\/\/ \u6dfb\u52a0\u79fb\u52a8\u548c\u91ca\u653e\u4e8b\u4ef6<\/span>
\n canvas.<\/span>addEventListener<\/span>(<\/span>'mousemove'<\/span>,<\/span> onDragMove)<\/span>;<\/span>
\n canvas.<\/span>addEventListener<\/span>(<\/span>'mouseup'<\/span>,<\/span> onDragEnd)<\/span>;<\/span>
\n }<\/span>
\n}<\/span><\/p>\n

function<\/span> onDragMove<\/span>(<\/span>event<\/span>)<\/span> {<\/span>
\n if<\/span> (<\/span>!<\/span>dragObject)<\/span> return<\/span>;<\/span><\/p>\n

\/\/ \u66f4\u65b0\u5c04\u7ebf<\/span>
\n raycaster.<\/span>setFromCamera<\/span>(<\/span>mouse,<\/span> camera)<\/span>;<\/span><\/p>\n

\/\/ \u521b\u5efa\u62d6\u62fd\u5e73\u9762（\u4e0e\u76f8\u673a\u89c6\u7ebf\u5782\u76f4）<\/span>
\n const<\/span> dragPlane =<\/span> new<\/span> THREE.<\/span>Plane<\/span>(<\/span>)<\/span>;<\/span>
\n dragPlane.<\/span>setFromNormalAndCoplanarPoint<\/span>(<\/span>
\n camera.<\/span>getWorldDirection<\/span>(<\/span>new<\/span> THREE.<\/span>Vector3<\/span>(<\/span>)<\/span>)<\/span>,<\/span>
\n dragObject.<\/span>position
\n )<\/span>;<\/span><\/p>\n

\/\/ \u8ba1\u7b97\u4ea4\u70b9<\/span>
\n const<\/span> intersectPoint =<\/span> new<\/span> THREE.<\/span>Vector3<\/span>(<\/span>)<\/span>;<\/span>
\n raycaster.<\/span>ray.<\/span>intersectPlane<\/span>(<\/span>dragPlane,<\/span> intersectPoint)<\/span>;<\/span><\/p>\n

\/\/ \u5e94\u7528\u4f4d\u7f6e（\u8003\u8651\u504f\u79fb）<\/span>
\n dragObject.<\/span>position.<\/span>copy<\/span>(<\/span>intersectPoint.<\/span>sub<\/span>(<\/span>dragOffset)<\/span>)<\/span>;<\/span>
\n}<\/span><\/p>\n

function<\/span> onDragEnd<\/span>(<\/span>)<\/span> {<\/span>
\n dragObject =<\/span> null<\/span>;<\/span>
\n canvas.<\/span>removeEventListener<\/span>(<\/span>'mousemove'<\/span>,<\/span> onDragMove)<\/span>;<\/span>
\n canvas.<\/span>removeEventListener<\/span>(<\/span>'mouseup'<\/span>,<\/span> onDragEnd)<\/span>;<\/span>
\n}<\/span><\/p>\n

\n
3. \u9ad8\u7ea7\u4ea4\u4e92\u6280\u672f<\/h5>\n
3.1 \u53d8\u6362\u63a7\u5236\u5668(TransformControls)<\/h6>\n

<script setup>
\nimport { TransformControls } from 'three\/addons\/controls\/TransformControls.js';<\/p>\n

const transformControls = ref(null);<\/p>\n

onMounted(() => {
\n \/\/ \u521b\u5efa\u53d8\u6362\u63a7\u5236\u5668
\n transformControls.value = new TransformControls(
\n camera,
\n renderer.domElement
\n );<\/p>\n

\/\/ \u76d1\u542c\u53d8\u6362\u4e8b\u4ef6
\n transformControls.value.addEventListener('dragging-changed', (event) => {
\n orbitControls.enabled = !event.value;
\n });<\/p>\n

scene.add(transformControls.value);
\n});<\/p>\n

\/\/ \u7ed1\u5b9a\u5230\u9009\u4e2d\u7269\u4f53
\nwatch(selectedObject, (obj) => {
\n if (obj) {
\n transformControls.value.attach(obj);
\n } else {
\n transformControls.value.detach();
\n }
\n});
\n<\/script><\/p>\n

3.2 \u78b0\u649e\u68c0\u6d4b<\/h6>\n

\/\/ \u4f7f\u7528Cannon.js\u8fdb\u884c\u7269\u7406\u78b0\u649e\u68c0\u6d4b<\/span>
\nconst<\/span> physicsWorld =<\/span> new<\/span> CANNON.<\/span>World<\/span>(<\/span>)<\/span>;<\/span><\/p>\n

\/\/ \u521b\u5efa\u7269\u7406\u4f53<\/span>
\nconst<\/span> physicsBody =<\/span> new<\/span> CANNON.<\/span>Body<\/span>(<\/span>{<\/span>
\n mass:<\/span> 0<\/span>,<\/span> \/\/ \u9759\u6001\u7269\u4f53<\/span>
\n shape:<\/span> new<\/span> CANNON.<\/span>Box<\/span>(<\/span>new<\/span> CANNON.<\/span>Vec3<\/span>(<\/span>1<\/span>,<\/span> 1<\/span>,<\/span> 1<\/span>)<\/span>)<\/span>
\n}<\/span>)<\/span>;<\/span><\/p>\n

\/\/ \u5728\u62d6\u62fd\u4e2d\u68c0\u6d4b\u78b0\u649e<\/span>
\nfunction<\/span> onDragMove<\/span>(<\/span>)<\/span> {<\/span>
\n \/\/ \u66f4\u65b0\u7269\u7406\u4f53\u4f4d\u7f6e<\/span>
\n physicsBody.<\/span>position.<\/span>copy<\/span>(<\/span>dragObject.<\/span>position)<\/span>;<\/span><\/p>\n

\/\/ \u68c0\u6d4b\u78b0\u649e<\/span>
\n physicsWorld.<\/span>step<\/span>(<\/span>1<\/span>\/<\/span>60<\/span>)<\/span>;<\/span>
\n const<\/span> collisions =<\/span> physicsWorld.<\/span>contacts;<\/span><\/p>\n

if<\/span> (<\/span>collisions.<\/span>length ><\/span> 0<\/span>)<\/span> {<\/span>
\n \/\/ \u5904\u7406\u78b0\u649e\u53cd\u9988（\u5982\u9707\u52a8\u3001\u53d8\u8272）<\/span>
\n gsap.<\/span>to<\/span>(<\/span>dragObject.<\/span>material.<\/span>color,<\/span> {<\/span>
\n r:<\/span> 1<\/span>,<\/span> g:<\/span> 0<\/span>,<\/span> b:<\/span> 0<\/span>,<\/span>
\n duration:<\/span> 0.2<\/span>,<\/span>
\n yoyo:<\/span> true<\/span>,<\/span>
\n repeat:<\/span> 1<\/span>
\n }<\/span>)<\/span>;<\/span>
\n }<\/span>
\n}<\/span><\/p>\n

3.3 \u591a\u7269\u4f53\u9009\u62e9<\/h6>\n

const<\/span> selectedObjects =<\/span> ref<\/span>(<\/span>[<\/span>]<\/span>)<\/span>;<\/span><\/p>\n

function<\/span> onClick<\/span>(<\/span>event<\/span>)<\/span> {<\/span>
\n raycaster.<\/span>setFromCamera<\/span>(<\/span>mouse,<\/span> camera)<\/span>;<\/span>
\n const<\/span> intersects =<\/span> raycaster.<\/span>intersectObjects<\/span>(<\/span>scene.<\/span>children)<\/span>;<\/span><\/p>\n

if<\/span> (<\/span>intersects.<\/span>length ><\/span> 0<\/span>)<\/span> {<\/span>
\n const<\/span> object =<\/span> intersects[<\/span>0<\/span>]<\/span>.<\/span>object;<\/span><\/p>\n

\/\/ Ctrl\u591a\u9009<\/span>
\n if<\/span> (<\/span>event.<\/span>ctrlKey)<\/span> {<\/span>
\n const<\/span> index =<\/span> selectedObjects.<\/span>value.<\/span>indexOf<\/span>(<\/span>object)<\/span>;<\/span>
\n if<\/span> (<\/span>index ===<\/span> –<\/span>1<\/span>)<\/span> {<\/span>
\n selectedObjects.<\/span>value.<\/span>push<\/span>(<\/span>object)<\/span>;<\/span>
\n }<\/span> else<\/span> {<\/span>
\n selectedObjects.<\/span>value.<\/span>splice<\/span>(<\/span>index,<\/span> 1<\/span>)<\/span>;<\/span>
\n }<\/span>
\n }<\/span> else<\/span> {<\/span>
\n selectedObjects.<\/span>value =<\/span> [<\/span>object]<\/span>;<\/span>
\n }<\/span>
\n }<\/span> else<\/span> {<\/span>
\n selectedObjects.<\/span>value =<\/span> [<\/span>]<\/span>;<\/span>
\n }<\/span>
\n}<\/span><\/p>\n

\n
4. Vue3\u5b9e\u6218：\u4ea4\u4e92\u5f0f3D\u5c55\u5385<\/h5>\n
4.1 \u9879\u76ee\u7ed3\u6784<\/h6>\n

src\/
\n \u251c\u2500\u2500 components\/
\n \u2502 \u251c\u2500\u2500 ExhibitionViewer.vue \/\/ 3D\u5c55\u5385\u4e3b\u7ec4\u4ef6
\n \u2502 \u251c\u2500\u2500 ExhibitInfo.vue \/\/ \u5c55\u54c1\u4fe1\u606f\u9762\u677f
\n \u2502 \u251c\u2500\u2500 Toolbar.vue \/\/ \u64cd\u4f5c\u5de5\u5177\u680f
\n \u2502 \u2514\u2500\u2500 ExhibitThumbnails.vue \/\/ \u5c55\u54c1\u7f29\u7565\u56fe\u5217\u8868
\n \u2514\u2500\u2500 App.vue<\/p>\n

4.2 \u5c55\u5385\u4e3b\u7ec4\u4ef6<\/h6>\n

<!– ExhibitionViewer.vue –>
\n<template>
\n <div class="exhibition-viewer">
\n <canvas ref="canvasRef"><\/canvas>
\n <ExhibitInfo :exhibit="selectedExhibit" \/>
\n <Toolbar @mode-change="setMode" \/>
\n <ExhibitThumbnails :exhibits="exhibits" @select="selectExhibit" \/>
\n <\/div>
\n<\/template><\/p>\n

<script setup>
\nimport { ref, reactive } from 'vue';
\nimport * as THREE from 'three';
\nimport { GLTFLoader } from 'three\/addons\/loaders\/GLTFLoader.js';
\nimport { TransformControls } from 'three\/addons\/controls\/TransformControls.js';
\nimport { OrbitControls } from 'three\/addons\/controls\/OrbitControls.js';<\/p>\n

\/\/ \u5c55\u54c1\u6570\u636e
\nconst exhibits = reactive([
\n { id: 1, name: '\u96d5\u5851', model: 'sculpture.gltf', position: [0, 0, 0] },
\n { id: 2, name: '\u82b1\u74f6', model: 'vase.gltf', position: [2, 0, -1] },
\n \/\/ \u66f4\u591a\u5c55\u54c1…
\n]);<\/p>\n

const selectedExhibit = ref(null);
\nconst interactionMode = ref('view'); \/\/ 'view' or 'edit'<\/p>\n

\/\/ \u521d\u59cb\u5316\u5c55\u5385
\nconst initExhibition = async () => {
\n const loader = new GLTFLoader();<\/p>\n

\/\/ \u52a0\u8f7d\u6240\u6709\u5c55\u54c1
\n for (const exhibit of exhibits) {
\n const gltf = await loader.loadAsync(`models\/${exhibit.model}`);
\n const model = gltf.scene;
\n model.position.set(…exhibit.position);
\n model.userData = { exhibitId: exhibit.id };
\n scene.add(model);
\n }
\n};<\/p>\n

\/\/ \u9009\u62e9\u5c55\u54c1
\nconst selectExhibit = (exhibit) => {
\n \/\/ \u901a\u8fc7\u5c04\u7ebf\u68c0\u6d4b\u6216\u7f29\u7565\u56fe\u70b9\u51fb\u9009\u62e9
\n selectedExhibit.value = exhibit;<\/p>\n

\/\/ \u5b9a\u4f4d\u76f8\u673a\u5230\u5c55\u54c1
\n if (exhibit) {
\n const model = scene.children.find(m => m.userData.exhibitId === exhibit.id);
\n cameraControls.value.fitToObject(model, true);
\n }
\n};<\/p>\n

\/\/ \u8bbe\u7f6e\u4ea4\u4e92\u6a21\u5f0f
\nconst setMode = (mode) => {
\n interactionMode.value = mode;
\n if (mode === 'edit') {
\n transformControls.visible = true;
\n } else {
\n transformControls.visible = false;
\n }
\n};<\/p>\n

\/\/ \u4fdd\u5b58\u5c55\u54c1\u4f4d\u7f6e
\nconst saveExhibitPositions = () => {
\n exhibits.forEach(exhibit => {
\n const model = scene.children.find(m => m.userData.exhibitId === exhibit.id);
\n if (model) {
\n exhibit.position = [model.position.x, model.position.y, model.position.z];
\n }
\n });
\n};
\n<\/script><\/p>\n

4.3 \u5c55\u54c1\u4fe1\u606f\u9762\u677f<\/h6>\n

<!– ExhibitInfo.vue –>
\n<template>
\n <div v-if="exhibit" class="info-panel">
\n <h2>{{ exhibit.name }}<\/h2>
\n <p>{{ exhibit.description }}<\/p>
\n <button v-if="editMode" @click="removeExhibit">\u79fb\u9664<\/button>
\n <\/div>
\n<\/template><\/p>\n

<script setup>
\ndefineProps(['exhibit']);
\nconst emit = defineEmits(['remove']);<\/p>\n

const removeExhibit = () => {
\n emit('remove', exhibit.id);
\n};
\n<\/script><\/p>\n

4.4 \u5de5\u5177\u680f\u7ec4\u4ef6<\/h6>\n

<!– Toolbar.vue –>
\n<template>
\n <div class="toolbar">
\n <button :class="{ active: mode === 'view' }" @click="setMode('view')">\u67e5\u770b<\/button>
\n <button :class="{ active: mode === 'edit' }" @click="setMode('edit')">\u7f16\u8f91<\/button>
\n <button @click="addExhibit">\u6dfb\u52a0\u5c55\u54c1<\/button>
\n <button @click="saveLayout">\u4fdd\u5b58\u5e03\u5c40<\/button>
\n <\/div>
\n<\/template><\/p>\n

<script setup>
\nconst emit = defineEmits(['mode-change', 'add-exhibit', 'save-layout']);<\/p>\n

const mode = ref('view');<\/p>\n

const setMode = (newMode) => {
\n mode.value = newMode;
\n emit('mode-change', newMode);
\n};<\/p>\n

const addExhibit = () => {
\n emit('add-exhibit');
\n};<\/p>\n

const saveLayout = () => {
\n emit('save-layout');
\n};
\n<\/script><\/p>\n

4.5 \u5c55\u54c1\u7f29\u7565\u56fe\u5217\u8868<\/h6>\n

<!– ExhibitThumbnails.vue –>
\n<template>
\n <div class="thumbnails">
\n <div v-for="exhibit in exhibits"
\n :key="exhibit.id"
\n class="thumbnail"
\n :class="{ active: exhibit === selected }"
\n @click="select(exhibit)">
\n <img :src="exhibit.thumbnail" :alt="exhibit.name">
\n <span>{{ exhibit.name }}<\/span>
\n <\/div>
\n <\/div>
\n<\/template><\/p>\n

<script setup>
\ndefineProps({
\n exhibits: Array,
\n selected: Object
\n});<\/p>\n

const emit = defineEmits(['select']);<\/p>\n

const select = (exhibit) => {
\n emit('select', exhibit);
\n};
\n<\/script><\/p>\n

\n
5. \u89e6\u6478\u5c4f\u9002\u914d<\/h5>\n
5.1 \u89e6\u6478\u4e8b\u4ef6\u5904\u7406<\/h6>\n

\/\/ \u6dfb\u52a0\u89e6\u6478\u4e8b\u4ef6<\/span>
\ncanvas.<\/span>addEventListener<\/span>(<\/span>'touchstart'<\/span>,<\/span> onTouchStart)<\/span>;<\/span>
\ncanvas.<\/span>addEventListener<\/span>(<\/span>'touchmove'<\/span>,<\/span> onTouchMove)<\/span>;<\/span>
\ncanvas.<\/span>addEventListener<\/span>(<\/span>'touchend'<\/span>,<\/span> onTouchEnd)<\/span>;<\/span><\/p>\n

function<\/span> onTouchStart<\/span>(<\/span>event<\/span>)<\/span> {<\/span>
\n event.<\/span>preventDefault<\/span>(<\/span>)<\/span>;<\/span><\/p>\n

\/\/ \u83b7\u53d6\u7b2c\u4e00\u4e2a\u89e6\u6478\u70b9<\/span>
\n const<\/span> touch =<\/span> event.<\/span>touches[<\/span>0<\/span>]<\/span>;<\/span><\/p>\n

\/\/ \u6a21\u62df\u9f20\u6807\u4e8b\u4ef6<\/span>
\n const<\/span> mouseEvent =<\/span> new<\/span> MouseEvent<\/span>(<\/span>'mousedown'<\/span>,<\/span> {<\/span>
\n clientX:<\/span> touch.<\/span>clientX,<\/span>
\n clientY:<\/span> touch.<\/span>clientY
\n }<\/span>)<\/span>;<\/span><\/p>\n

onMouseDown<\/span>(<\/span>mouseEvent)<\/span>;<\/span>
\n}<\/span><\/p>\n

function<\/span> onTouchMove<\/span>(<\/span>event<\/span>)<\/span> {<\/span>
\n event.<\/span>preventDefault<\/span>(<\/span>)<\/span>;<\/span><\/p>\n

const<\/span> touch =<\/span> event.<\/span>touches[<\/span>0<\/span>]<\/span>;<\/span>
\n const<\/span> mouseEvent =<\/span> new<\/span> MouseEvent<\/span>(<\/span>'mousemove'<\/span>,<\/span> {<\/span>
\n clientX:<\/span> touch.<\/span>clientX,<\/span>
\n clientY:<\/span> touch.<\/span>clientY
\n }<\/span>)<\/span>;<\/span><\/p>\n

onMouseMove<\/span>(<\/span>mouseEvent)<\/span>;<\/span>
\n}<\/span><\/p>\n

function<\/span> onTouchEnd<\/span>(<\/span>event<\/span>)<\/span> {<\/span>
\n event.<\/span>preventDefault<\/span>(<\/span>)<\/span>;<\/span>
\n const<\/span> mouseEvent =<\/span> new<\/span> MouseEvent<\/span>(<\/span>'mouseup'<\/span>)<\/span>;<\/span>
\n onMouseUp<\/span>(<\/span>mouseEvent)<\/span>;<\/span>
\n}<\/span><\/p>\n

5.2 \u624b\u52bf\u8bc6\u522b<\/h6>\n

\/\/ \u53cc\u6307\u7f29\u653e<\/span>
\nlet<\/span> initialDistance =<\/span> 0<\/span>;<\/span><\/p>\n

function<\/span> handlePinch<\/span>(<\/span>event<\/span>)<\/span> {<\/span>
\n if<\/span> (<\/span>event.<\/span>touches.<\/span>length ===<\/span> 2<\/span>)<\/span> {<\/span>
\n const<\/span> dx =<\/span> event.<\/span>touches[<\/span>0<\/span>]<\/span>.<\/span>clientX –<\/span> event.<\/span>touches[<\/span>1<\/span>]<\/span>.<\/span>clientX;<\/span>
\n const<\/span> dy =<\/span> event.<\/span>touches[<\/span>0<\/span>]<\/span>.<\/span>clientY –<\/span> event.<\/span>touches[<\/span>1<\/span>]<\/span>.<\/span>clientY;<\/span>
\n const<\/span> distance =<\/span> Math.<\/span>sqrt<\/span>(<\/span>dx *<\/span> dx +<\/span> dy *<\/span> dy)<\/span>;<\/span><\/p>\n

if<\/span> (<\/span>initialDistance ===<\/span> 0<\/span>)<\/span> {<\/span>
\n initialDistance =<\/span> distance;<\/span>
\n }<\/span> else<\/span> {<\/span>
\n const<\/span> zoomFactor =<\/span> distance \/<\/span> initialDistance;<\/span>
\n camera.<\/span>zoom =<\/span> Math.<\/span>max<\/span>(<\/span>0.1<\/span>,<\/span> Math.<\/span>min<\/span>(<\/span>5<\/span>,<\/span> initialZoom *<\/span> zoomFactor)<\/span>)<\/span>;<\/span>
\n camera.<\/span>updateProjectionMatrix<\/span>(<\/span>)<\/span>;<\/span>
\n }<\/span>
\n }<\/span> else<\/span> {<\/span>
\n initialDistance =<\/span> 0<\/span>;<\/span>
\n }<\/span>
\n}<\/span><\/p>\n

\n
6. \u6027\u80fd\u4f18\u5316<\/h5>\n
6.1 \u4ea4\u4e92\u7269\u4f53\u5206\u7ec4<\/h6>\n

\/\/ \u521b\u5efa\u4ea4\u4e92\u7ec4<\/span>
\nconst<\/span> interactiveGroup =<\/span> new<\/span> THREE.<\/span>Group<\/span>(<\/span>)<\/span>;<\/span>
\nscene.<\/span>add<\/span>(<\/span>interactiveGroup)<\/span>;<\/span><\/p>\n

\/\/ \u6dfb\u52a0\u53ef\u4ea4\u4e92\u7269\u4f53<\/span>
\nexhibits.<\/span>forEach<\/span>(<\/span>exhibit<\/span> =><\/span> {<\/span>
\n exhibit.<\/span>model.<\/span>userData.<\/span>interactive =<\/span> true<\/span>;<\/span>
\n interactiveGroup.<\/span>add<\/span>(<\/span>exhibit.<\/span>model)<\/span>;<\/span>
\n}<\/span>)<\/span>;<\/span><\/p>\n

\/\/ \u68c0\u6d4b\u65f6\u53ea\u68c0\u67e5\u8be5\u7ec4<\/span>
\nraycaster.<\/span>intersectObjects<\/span>(<\/span>interactiveGroup.<\/span>children)<\/span>;<\/span><\/p>\n

6.2 \u7a7a\u95f4\u5206\u5272\u4f18\u5316<\/h6>\n

\/\/ \u4f7f\u7528\u516b\u53c9\u6811\u52a0\u901f\u68c0\u6d4b<\/span>
\nimport<\/span> {<\/span> Octree }<\/span> from<\/span> 'three\/addons\/math\/Octree.js'<\/span>;<\/span><\/p>\n

const<\/span> octree =<\/span> new<\/span> Octree<\/span>(<\/span>)<\/span>;<\/span>
\noctree.<\/span>fromGraphNode<\/span>(<\/span>scene)<\/span>;<\/span><\/p>\n

function<\/span> raycast<\/span>(<\/span>)<\/span> {<\/span>
\n \/\/ \u4f7f\u7528\u516b\u53c9\u6811\u68c0\u6d4b<\/span>
\n const<\/span> intersects =<\/span> octree.<\/span>raycast<\/span>(<\/span>raycaster)<\/span>;<\/span>
\n \/\/ …<\/span>
\n}<\/span><\/p>\n

6.3 GPU\u62fe\u53d6\u6280\u672f<\/h6>\n

\/\/ \u521b\u5efa\u79bb\u5c4f\u6e32\u67d3\u76ee\u6807<\/span>
\nconst<\/span> pickingTexture =<\/span> new<\/span> THREE.<\/span>WebGLRenderTarget<\/span>(<\/span>1<\/span>,<\/span> 1<\/span>)<\/span>;<\/span><\/p>\n

\/\/ \u7ed9\u6bcf\u4e2a\u7269\u4f53\u5206\u914d\u552f\u4e00ID<\/span>
\nlet<\/span> objectId =<\/span> 1<\/span>;<\/span>
\nscene.<\/span>traverse<\/span>(<\/span>obj<\/span> =><\/span> {<\/span>
\n if<\/span> (<\/span>obj.<\/span>isMesh)<\/span> {<\/span>
\n obj.<\/span>userData.<\/span>id =<\/span> objectId++<\/span>;<\/span>
\n }<\/span>
\n}<\/span>)<\/span>;<\/span><\/p>\n

\/\/ \u6e32\u67d3ID\u5230\u7eb9\u7406<\/span>
\nfunction<\/span> renderPicking<\/span>(<\/span>)<\/span> {<\/span>
\n const<\/span> material =<\/span> new<\/span> THREE.<\/span>MeshBasicMaterial<\/span>(<\/span>{<\/span>
\n color:<\/span> new<\/span> THREE.<\/span>Color<\/span>(<\/span>)<\/span>.<\/span>setHex<\/span>(<\/span>objectId)<\/span>
\n }<\/span>)<\/span>;<\/span><\/p>\n

renderer.<\/span>setRenderTarget<\/span>(<\/span>pickingTexture)<\/span>;<\/span>
\n scene.<\/span>overrideMaterial =<\/span> material;<\/span>
\n renderer.<\/span>render<\/span>(<\/span>scene,<\/span> camera)<\/span>;<\/span>
\n scene.<\/span>overrideMaterial =<\/span> null<\/span>;<\/span>
\n renderer.<\/span>setRenderTarget<\/span>(<\/span>null<\/span>)<\/span>;<\/span>
\n}<\/span><\/p>\n

\/\/ \u8bfb\u53d6\u50cf\u7d20\u83b7\u53d6ID<\/span>
\nfunction<\/span> getObjectId<\/span>(<\/span>x,<\/span> y<\/span>)<\/span> {<\/span>
\n const<\/span> pixelBuffer =<\/span> new<\/span> Uint8Array<\/span>(<\/span>4<\/span>)<\/span>;<\/span>
\n renderer.<\/span>readRenderTargetPixels<\/span>(<\/span>
\n pickingTexture,<\/span>
\n x,<\/span> y,<\/span> 1<\/span>,<\/span> 1<\/span>,<\/span>
\n pixelBuffer
\n )<\/span>;<\/span><\/p>\n

\/\/ \u5c06RGB\u8f6c\u6362\u4e3aID<\/span>
\n return<\/span> (<\/span>pixelBuffer[<\/span>0<\/span>]<\/span> <<<\/span> 16<\/span>)<\/span> |<\/span> (<\/span>pixelBuffer[<\/span>1<\/span>]<\/span> <<<\/span> 8<\/span>)<\/span> |<\/span> pixelBuffer[<\/span>2<\/span>]<\/span>;<\/span>
\n}<\/span><\/p>\n

\n
7. \u5e38\u89c1\u95ee\u9898\u89e3\u7b54<\/h5>\n

Q1：\u5c04\u7ebf\u68c0\u6d4b\u4e0d\u5230\u7269\u4f53\u600e\u4e48\u529e？<\/p>\n

  • \u786e\u8ba4\u7269\u4f53\u5728\u76f8\u673a\u89c6\u9525\u5185<\/li>\n
  • \u68c0\u67e5\u7269\u4f53\u662f\u5426\u88ab\u5176\u4ed6\u7269\u4f53\u906e\u6321<\/li>\n
  • \u786e\u8ba4\u7269\u4f53\u5df2\u6dfb\u52a0\u5230\u68c0\u6d4b\u6570\u7ec4\u4e2d<\/li>\n
  • \u589e\u52a0raycaster\u7684far\u53c2\u6570<\/li>\n

    Q2：\u62d6\u62fd\u65f6\u7269\u4f53\u8df3\u52a8？<\/p>\n