以下是一个基于 Vue3 和 GSAP 实现产品 3D 展厅的技术方案，包含模型交互、镜头控制和 AR 预览功能：

核心架构设计

Vue3 组合式 API + Three.js + GSAP + @ar-js-org/aframe 需安装依赖：

npm install three gsap @ar-js-org/aframe

3D 模型加载与渲染

<script setup>
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { ref, onMounted } from 'vue';
import gsap from 'gsap';

const canvasRef = ref(null);
let scene, camera, renderer, controls;

onMounted(() => {
  // 初始化场景
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  renderer = new THREE.WebGLRenderer({ canvas: canvasRef.value });
  
  // 添加轨道控制器
  controls = new OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true;
  
  // 加载模型
  const loader = new GLTFLoader();
  loader.load('/model.glb', (gltf) => {
    scene.add(gltf.scene);
    setupModelInteractions(gltf.scene);
  });
  
  animate();
});

function animate() {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
}
</script>

GSAP 动画控制

function setupModelInteractions(model) {
  // 模型点击动画
  model.traverse(child => {
    if (child.isMesh) {
      child.userData.clickable = true;
      child.addEventListener('click', () => {
        gsap.to(child.rotation, {
          y: child.rotation.y + Math.PI/2,
          duration: 1
        });
      });
    }
  });

  // 镜头移动控制
  const cameraPositions = {
    overview: { x: 0, y: 5, z: 10 },
    detail: { x: 0, y: 1, z: 3 }
  };
  
  function moveCamera(positionName) {
    gsap.to(camera.position, {
      ...cameraPositions[positionName],
      duration: 1.5,
      ease: "power2.inOut"
    });
  }
}

AR 预览集成

<template>
  <div v-if="!arMode">
    <canvas ref="canvasRef" />
    <button @click="enterAR">AR 预览</button>
  </div>
  
  <a-scene v-else embedded arjs="sourceType: webcam">
    <a-entity 
      gltf-model="/model.glb"
      scale="0.5 0.5 0.5"
      animation-mixer
    ></a-entity>
    <a-camera-static />
  </a-scene>
</template>

<script setup>
const arMode = ref(false);

function enterAR() {
  arMode.value = true;
}
</script>

性能优化技巧

• 使用 DRACOLoader 压缩模型

import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('/draco/');
loader.setDRACOLoader(dracoLoader);

• 实现模型 LOD 分级

const lod = new THREE.LOD();
lod.addLevel(highDetailModel, 50);
lod.addLevel(mediumDetailModel, 100);
lod.addLevel(lowDetailModel, 200);
scene.add(lod);

交互增强方案

• 添加热点标注

function addHotspot(position, content) {
  const hotspot = new THREE.Mesh(
    new THREE.SphereGeometry(0.2),
    new THREE.MeshBasicMaterial({ color: 0xff0000 })
  );
  hotspot.position.copy(position);
  hotspot.userData.info = content;
  scene.add(hotspot);
}

• 实现屏幕边缘提示

window.addEventListener('mousemove', (e) => {
  const edgeThreshold = 0.1;
  const mouseX = (e.clientX / window.innerWidth) * 2 - 1;
  if (Math.abs(mouseX) > 1 - edgeThreshold) {
    gsap.to(controls.target, {
      x: controls.target.x + (mouseX > 0 ? 1 : -1),
      duration: 0.5
    });
  }
});

该方案通过 Three.js 处理 3D 渲染，GSAP 实现平滑过渡动画，A-Frame 提供 AR 支持。注意需要根据实际项目调整模型路径、动画参数和交互细节。