在Code Sandbox中通过ThreeJS直接读取Compass文件夹模型文件的方法

• 确认Compass文件的可访问性
  先确保Compass中的GLTF模型（包括关联的.bin纹理、图片等附属文件）已设置公开访问权限，或在你的项目环境中能被Code Sandbox组件直接访问。复制模型的直接访问路径——如果是线上Compass服务，路径类似https://your-compass-domain/path/to/model.gltf；本地Compass服务则是http://localhost:端口号/path/model.gltf。

• 用GLTFLoader直接加载模型
  确保Code Sandbox环境已引入ThreeJS及GLTFLoader（CDN直接导入或npm安装three包均可），替换原有的JSON加载逻辑，直接请求Compass的模型路径：

  import * as THREE from 'three';
  import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
  
  // 初始化基础场景（省略通用初始化代码）
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  
  // 加载Compass中的GLTF模型
  const loader = new GLTFLoader();
  loader.load(
    // 填入Compass模型的直接访问URL
    'https://your-compass-domain/path/to/your-model.gltf',
    (gltf) => {
      scene.add(gltf.scene);
      // 按需调整模型缩放、位置
      gltf.scene.scale.set(0.5, 0.5, 0.5);
    },
    (xhr) => {
      console.log(`${(xhr.loaded/xhr.total*100).toFixed(2)}% loaded`);
    },
    (error) => {
      console.error('模型加载失败:', error);
    }
  );
  
  // 渲染循环
  function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
  }
  animate();
  

• 处理跨域问题（若出现）
  如果Code Sandbox域名与Compass域名不同，会触发CORS错误。此时需在Compass的服务器配置中添加CORS规则，允许Code Sandbox域名访问资源；本地开发也可临时启用CORS代理，但优先推荐在Compass端配置。

• 验证模型资源完整性
  确保GLTF模型的所有附属文件（如.bin、纹理图）与.gltf文件在Compass的同一目录下，或.gltf文件内的资源引用路径正确，避免加载时丢失资源导致模型显示异常。

内容的提问来源于stack exchange，提问作者Glider