關閉      標題：在 div 顯示 glb
內容：

<!-- Three.js CDN (non-module) -->
<script src="https://cdn.jsdelivr.net/npm/three/build/three.min.js"></script>

<!-- GLTFLoader -->
<script src="https://cdn.jsdelivr.net/npm/three/examples/js/loaders/GLTFLoader.js"></script>

<!-- OrbitControls -->
<script src="https://cdn.jsdelivr.net/npm/three/examples/js/controls/OrbitControls.js"></script>

function showGLBToDiv(divDom, glbUrl) {

    divDom.innerHTML = ""; // 清空

    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0xeeeeee);

    const camera = new THREE.PerspectiveCamera(
        60,
        divDom.clientWidth / divDom.clientHeight,
        0.1,
        2000
    );

    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(divDom.clientWidth, divDom.clientHeight);
    divDom.appendChild(renderer.domElement);

    // 燈光
    scene.add(new THREE.HemisphereLight(0xffffff, 0x444444, 1));
    scene.add(new THREE.DirectionalLight(0xffffff, 1));

    // 控制器
    const controls = new THREE.OrbitControls(camera, renderer.domElement);

    const loader = new THREE.GLTFLoader();
    loader.load(glbUrl, function (gltf) {

        const model = gltf.scene;
        scene.add(model);

        // ---- 自動置中 + fit ----
        const box = new THREE.Box3().setFromObject(model);
        const size = box.getSize(new THREE.Vector3());
        const center = box.getCenter(new THREE.Vector3());

        model.position.sub(center); // 移到原點
        controls.target.set(0, 0, 0);

        const maxDim = Math.max(size.x, size.y, size.z);
        const fov = camera.fov * (Math.PI / 180);
        const cameraDist = maxDim / Math.sin(fov / 2) * 0.6;

        // ---- 設定相機傾斜 45° ----
        const angle = Math.PI / 4; // 45° 往下傾
        // XZ 平面斜角 45°，Y 軸高度 = cameraDist * sin(angle)
        const y = cameraDist * Math.sin(angle);
        const z = cameraDist * Math.cos(angle);
        camera.position.set(0, y, z);

        camera.lookAt(0, 0, 0);
        controls.update();
    });

    // Render Loop
    function animate() {
        requestAnimationFrame(animate);
        controls.update();
        renderer.render(scene, camera);
    }
    animate();

    // 自適應 div 大小
    new ResizeObserver(() => {
        const w = divDom.clientWidth;
        const h = divDom.clientHeight;
        camera.aspect = w / h;
        camera.updateProjectionMatrix();
        renderer.setSize(w, h);
    }).observe(divDom);
}