index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Three.js Dynamic GLTF Model Viewer</title>
  <style>
    body { margin: 0; overflow: hidden; }
    canvas { display: block; }
    #controls {
      position: absolute;
      top: 10px;
      left: 10px;
      background: rgba(0, 0, 0, 0.7);
      color: white;
      padding: 10px;
      border-radius: 5px;
      max-height: 80vh;
      overflow-y: auto;
    }
    .model-controls {
      margin-bottom: 15px;
      border-bottom: 1px solid #444;
      padding-bottom: 10px;
    }
    .model-controls h4 {
      margin: 0 0 5px 0;
    }
    .model-controls button {
      margin: 3px;
      padding: 5px 10px;
      cursor: pointer;
    }
    #add-model-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      padding: 10px;
      background: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
  </style>
</head>
<body>
<div id="controls"></div>
<button id="add-model-btn" onclick="addModelPrompt()">添加模型</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.134.0/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.134.0/examples/js/controls/OrbitControls.js"></script>
<script>
  let scene, camera, renderer, controls;
  let models = [];
  let modelCounter = 0;
  let backgroundModel = null; // 存储背景模型

  function init(initialModelConfigs) {
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0x333333);

    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.set(20, 10, 20);

    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.dampingFactor = 0.05;
    controls.screenSpacePanning = false;
    controls.minDistance = 1;
    controls.maxDistance = 100;
    controls.maxPolarAngle = Math.PI / 2;

    const ambientLight = new THREE.AmbientLight(0xffffff, 1.5);
    scene.add(ambientLight);
    const directionalLight1 = new THREE.DirectionalLight(0xffffff, 1.2);
    directionalLight1.position.set(10, 10, 10);
    scene.add(directionalLight1);
    const directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.8);
    directionalLight2.position.set(-10, 10, -10);
    scene.add(directionalLight2);
    const pointLight = new THREE.PointLight(0xffffff, 1.0, 100);
    pointLight.position.set(0, 5, 0);
    scene.add(pointLight);

    const axesHelper = new THREE.AxesHelper(10);
    scene.add(axesHelper);

    // 加载背景模型，替换 mapPlane，位置固定
    const backgroundConfig = {
      filePath: './background/scene.gltf',
      scale: { x: 1, y: 1, z: 1 },
      animationPath: [{ x: 0, z: 0 }] // 固定位置 (0, 0)
    };
    const loader = new THREE.GLTFLoader();
    loader.load(
            backgroundConfig.filePath,
            function (gltf) {
              backgroundModel = gltf.scene;
              backgroundModel.scale.set(backgroundConfig.scale.x, backgroundConfig.scale.y, backgroundConfig.scale.z);
              backgroundModel.traverse(child => {
                if (child.isMesh) {
                  if (!child.material) {
                    child.material = new THREE.MeshStandardMaterial({ color: 0xffffff });
                  }
                }
              });
              backgroundModel.position.set(
                      backgroundConfig.animationPath[0].x,
                      -6, // 固定 Y 坐标为 -6
                      backgroundConfig.animationPath[0].z
              );
              scene.add(backgroundModel);

              const box = new THREE.Box3().setFromObject(backgroundModel);
              console.log('Background Model bounding box:', box);
              const modelHeight = box.max.y - box.min.y;
              // backgroundModel.position.y += modelHeight / 2; // 调整 Y 坐标使底部贴地
            },
            function (xhr) {
              console.log(`Background Model: ${(xhr.loaded / xhr.total * 100)}% loaded`);
            },
            function (error) {
              console.error('An error happened while loading the background model:', error);
            }
    );

    // 加载动态模型
    initialModelConfigs.forEach(config => addModel(config.filePath, config.scale, config.animationPath));

    // 每 2 秒更新动态模型的坐标序列
    setInterval(updateAllModelPaths, 2000);

    window.addEventListener('resize', () => {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    });

    animate();
  }

  function addModel(filePath, scaleConfig = { x: 1, y: 1, z: 1 }, animationPath = [{ x: 0, z: 0 }]) {
    const modelId = `model-${modelCounter++}`;
    const loader = new THREE.GLTFLoader();
    loader.load(
            filePath,
            function (gltf) {
              const model = gltf.scene;
              model.position.set(0, 0, 0);
              model.scale.set(scaleConfig.x, scaleConfig.y, scaleConfig.z);
              model.traverse(child => {
                if (child.isMesh) {
                  if (!child.material) {
                    child.material = new THREE.MeshStandardMaterial({ color: 0xffffff });
                  }
                }
              });
              scene.add(model);

              const box = new THREE.Box3().setFromObject(model);
              console.log(`Model ${modelId} bounding box:`, box);
              const modelHeight = box.max.y - box.min.y;
              // model.position.y = 0;
              model.position.y = modelHeight / 5;

              if (animationPath.length > 0) {
                model.position.x = animationPath[0].x;
                model.position.z = animationPath[0].z;
              }

              models.push({
                id: modelId,
                model: model,
                animationPath: animationPath,
                animationIndex: 0,
                isAnimating: animationPath.length > 1,
                scale: scaleConfig
              });

              updateControls();
            },
            function (xhr) {
              console.log(`Model ${modelId}: ${(xhr.loaded / xhr.total * 100)}% loaded`);
            },
            function (error) {
              console.error(`An error happened while loading model ${modelId}:`, error);
            }
    );
  }

  function updateControls() {
    const controlsDiv = document.getElementById('controls');
    controlsDiv.innerHTML = '';
    models.forEach(modelData => {
      const modelDiv = document.createElement('div');
      modelDiv.className = 'model-controls';
      modelDiv.innerHTML = `
        <h4>${modelData.id} (Scale: x=${modelData.scale.x}, y=${modelData.scale.y}, z=${modelData.scale.z})</h4>
        <div>
          <button onclick="moveModel('${modelData.id}', 'x', 0.1)">X +0.1</button>
          <button onclick="moveModel('${modelData.id}', 'x', -0.1)">X -0.1</button>
        </div>
        <div>
          <button onclick="moveModel('${modelData.id}', 'z', 0.1)">Z +0.1</button>
          <button onclick="moveModel('${modelData.id}', 'z', -0.1)">Z -0.1</button>
        </div>
        <div>
          <button onclick="rotateModel('${modelData.id}', 'x', 0.1)">Rotate X +0.1</button>
          <button onclick="rotateModel('${modelData.id}', 'x', -0.1)">Rotate X -0.1</button>
        </div>
        <div>
          <button onclick="rotateModel('${modelData.id}', 'y', 0.1)">Rotate Y +0.1</button>
          <button onclick="rotateModel('${modelData.id}', 'y', -0.1)">Rotate Y -0.1</button>
        </div>
        <div>
          <button onclick="rotateModel('${modelData.id}', 'z', 0.1)">Rotate Z +0.1</button>
          <button onclick="rotateModel('${modelData.id}', 'z', -0.1)">Rotate Z -0.1</button>
        </div>
      `;
      controlsDiv.appendChild(modelDiv);
    });
  }

  function animate() {
    requestAnimationFrame(animate);
    controls.update();

    models.forEach(modelData => {
      if (modelData.isAnimating && modelData.animationIndex < modelData.animationPath.length) {
        const target = modelData.animationPath[modelData.animationIndex];
        const current = modelData.model.position;
        const dx = target.x - current.x;
        const dz = target.z - current.z;
        const speed = 0.1;
        if (Math.abs(dx) > 0.1 || Math.abs(dz) > 0.1) {
          modelData.model.position.x += dx * speed;
          modelData.model.position.z += dz * speed;
        } else {
          modelData.model.position.x = target.x;
          modelData.model.position.z = target.z;
          modelData.animationIndex++;
          if (modelData.animationIndex >= modelData.animationPath.length) {
            modelData.isAnimating = false;
          }
        }
      }
    });

    renderer.render(scene, camera);
  }

  window.moveModel = function(modelId, axis, value) {
    const modelData = models.find(m => m.id === modelId);
    if (modelData) {
      modelData.model.position[axis] += value;
    }
  }

  window.rotateModel = function(modelId, axis, value) {
    const modelData = models.find(m => m.id === modelId);
    if (modelData) {
      modelData.model.rotation[axis] += value;
    }
  }

  window.addModelPrompt = function() {
    const filePath = prompt('请输入模型文件路径（例如 ./model.gltf）');
    const scaleX = prompt('请输入 X 轴缩放比例（默认 1）') || 1;
    const scaleY = prompt('请输入 Y 轴缩放比例（默认 1）') || 1;
    const scaleZ = prompt('请输入 Z 轴缩放比例（默认 1）') || 1;
    const animationPathStr = prompt('请输入动画序列（格式：x1,z1;x2,z2;...，例如 0,0;5,5;10,0）') || '0,0';
    if (filePath) {
      const animationPath = animationPathStr.split(';').map(point => {
        const [x, z] = point.split(',').map(Number);
        return { x, z };
      });
      addModel(filePath, { x: parseFloat(scaleX), y: parseFloat(scaleY), z: parseFloat(scaleZ) }, animationPath);
    }
  }

  // 每 2 秒更新动态模型的坐标序列
  function updateAllModelPaths() {
    models.forEach(modelData => {
      if (modelData.animationPath.length > 1) {
        fetch(`http://localhost:8000/api/update_path/${modelData.id}`)
                .then(response => response.json())
                .then(data => {
                  if (modelData && data) {
                    modelData.animationPath = data;
                    modelData.animationIndex = 0;
                    modelData.isAnimating = data.length > 1;
                    if (data.length > 0) {
                      modelData.model.position.x = data[0].x;
                      modelData.model.position.z = data[0].z;
                    }
                  }
                })
                .catch(error => {
                  console.error(`Failed to update path for ${modelData.id}:`, error);
                });
      }
    });
  }

  // 初始化
  init([
    // 第一个模型：动态移动
    {
      filePath: './tanke/0866e6e075ca450f8c476f084ee88f0d.gltf',
      scale: { x: 1000, y: 1000, z: 1000 },
      animationPath: [
        { x: 0, z: 0 },
        { x: 5, z: 5 },
        { x: 10, z: 0 },
        { x: 5, z: -5 },
        { x: 10, z: 10 }
      ]
    },
    // 第二个模型：动态移动
    {
      filePath: './t-62a_main_battle_tank/scene.gltf',
      scale: { x: 1, y: 1, z: 1 },
      animationPath: [{ x: -10, z: -10 }, { x: 0, z: 0 }]
    },
    // 第3个模型：动态移动
    {
      filePath: './soldier/scene.gltf',
      scale: { x: 1, y: 1, z: 1 },
      animationPath: [{ x: 10, z: 10 }, { x: 9, z: 0 }]
    },
    // 第4个模型：动态移动
    {
      filePath: './tent_military/scene.gltf',
      scale: { x: 1, y: 1, z: 1 },
      animationPath: [{ x: 5, z: 5 }]
    },
    // 第4个模型：动态移动
    {
      filePath: './car/ea6db48b9fc6419dbe75e423a1348a59.gltf',
      scale: { x: 1, y: 1, z: 1 },
      animationPath: [{ x: 0, z: 15 }]
    }
  ]);
</script>
</body>
</html>