一、技术选型与架构设计

1.1 技术栈组合逻辑

Three.js作为WebGL核心库，提供3D场景构建、材质渲染与动画控制能力；Vue3的Composition API与响应式系统可高效管理3D场景状态；antvG2则专注于2D/3D数据可视化表达，三者结合可实现”数据驱动3D场景”的完整链路。

1.2 项目结构规划

采用模块化设计：

src/
  ├── components/       // Vue3组件
  │   ├── ThreeScene.vue // Three.js主场景
  │   └── DataChart.vue  // antvG2图表
  ├── composables/      // 组合式函数
  │   └── useThree.ts    // Three.js封装
  ├── assets/           // 3D模型资源
  └── utils/            // 工具函数

二、Three.js场景初始化

2.1 基础环境搭建

// useThree.ts 核心封装
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
export function useThree(domRef: Ref<HTMLElement>) {
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  const renderer = new THREE.WebGLRenderer({ antialias: true });
  // 初始化渲染器
  const initRenderer = () => {
    renderer.setSize(domRef.value.clientWidth, domRef.value.clientHeight);
    renderer.setPixelRatio(window.devicePixelRatio);
    domRef.value.appendChild(renderer.domElement);
  };
  // 添加轨道控制器
  const addControls = () => {
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    return controls;
  };
  return { scene, camera, renderer, initRenderer, addControls };
}

2.2 核心渲染循环

// 在Vue组件中实现动画循环
const { scene, camera, renderer, addControls } = useThree(containerRef);
const controls = addControls();
const animate = () => {
  requestAnimationFrame(animate);
  controls.update(); // 阻尼效果更新
  renderer.render(scene, camera);
};
onMounted(() => {
  initRenderer();
  animate();
});

三、3D模型与交互实现

3.1 GLTF模型加载

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
const loadModel = async (url: string) => {
  const loader = new GLTFLoader();
  const gltf = await loader.loadAsync(url);
  // 模型优化处理
  gltf.scene.traverse((child) => {
    if (child.isMesh) {
      child.castShadow = true;
      child.receiveShadow = true;
    }
  });
  scene.add(gltf.scene);
  return gltf.scene;
};

3.2 交互事件系统

// 添加射线检测交互
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
const handleClick = (event: MouseEvent) => {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  raycaster.setFromCamera(mouse, camera);
  const intersects = raycaster.intersectObjects(scene.children);
  if (intersects.length > 0) {
    console.log('选中对象:', intersects[0].object);
    // 触发antvG2图表更新
  }
};
window.addEventListener('click', handleClick);

四、antvG2数据可视化集成

4.1 双向数据绑定

// 使用Vue3的ref管理数据
const chartData = ref([
  { category: '设备A', value: 65 },
  { category: '设备B', value: 35 }
]);
// 在antvG2组件中监听数据变化
const initChart = () => {
  const chart = new G2.Chart({
    container: 'chart-container',
    autoFit: true,
    height: 300
  });
  chart.data(chartData.value);
  chart.interval().position('category*value');
  chart.render();
  // 监听Three.js交互事件
  watchEffect(() => {
    if (selectedDevice.value) {
      chart.changeData(
        chartData.value.filter(item => item.category === selectedDevice.value)
      );
    }
  });
};

4.2 3D场景数据映射

// 将图表数据映射为3D柱状图
const createDataBars = (data: Array<{category: string, value: number}>) => {
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  data.forEach((item, index) => {
    const barHeight = item.value / 100;
    const bar = new THREE.Mesh(
      new THREE.BoxGeometry(0.8, barHeight, 0.8),
      material
    );
    bar.position.x = index * 2;
    bar.position.y = barHeight / 2;
    scene.add(bar);
  });
};

五、性能优化策略

5.1 渲染优化方案

• 分层渲染：使用THREE.Layers分离静态与动态对象
• 实例化渲染：对重复模型使用THREE.InstancedMesh
• LOD技术：根据距离动态切换模型精度

5.2 内存管理实践

// 资源卸载机制
const disposeAssets = () => {
  scene.traverse((child) => {
    if (child.isMesh) {
      if (child.geometry) child.geometry.dispose();
      if (child.material) child.material.dispose();
    }
  });
  textures.forEach(tex => tex.dispose());
};
onBeforeUnmount(() => {
  disposeAssets();
  window.removeEventListener('resize', handleResize);
});

六、完整开发流程建议

1. 原型设计阶段：使用Figma/Blender进行3D场景草图设计
2. 技术验证阶段：先实现核心功能模块（如模型加载、基础交互）
3. 数据对接阶段：通过Mock数据验证图表与3D场景联动
4. 性能调优阶段：使用Chrome DevTools分析渲染瓶颈

七、常见问题解决方案

7.1 模型显示异常

• 问题：模型显示为黑色或透明
• 解决方案：检查模型法线方向、材质类型及光照设置
• 调试技巧：使用THREE.FaceNormalsHelper可视化法线

7.2 移动端适配问题

// 响应式处理示例
const handleResize = () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
};
// 移动端触摸事件适配
const handleTouch = (e: TouchEvent) => {
  // 实现双指缩放/单指旋转逻辑
};

八、扩展功能建议

1. AR集成：通过WebXR API实现AR模式切换
2. 物理引擎：集成Cannon.js或Ammo.js实现物理模拟
3. 多人协作：使用Socket.IO实现多用户3D场景交互
4. AI分析：结合TensorFlow.js实现3D场景智能分析

通过以上技术方案，开发者可快速构建一个集3D可视化、数据交互与性能优化于一体的纯前端Demo。实际开发中需注意资源加载策略、错误处理机制及跨平台兼容性，建议采用渐进式开发方式，先实现核心功能再逐步完善细节。完整代码示例可参考GitHub开源项目，推荐结合Three.js官方示例与antvG2文档进行深入学习。