const scene = new THREE.Scene();
const boxElement = document.querySelector(".productModel_box");
const width = boxElement.clientWidth;
const height = boxElement.clientHeight;

// 設(shè)置正交相機
const aspect = width / height;
const frustumSize = 10;
const camera = new THREE.OrthographicCamera(
    (frustumSize * aspect) / -2,
    (frustumSize * aspect) / 2,
    frustumSize / 2,
    frustumSize / -2,
    0.1,
    1000
);
camera.position.z = 7.5;

// 創(chuàng)建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(width, height);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.toneMapping = THREE.NoToneMapping;
boxElement.appendChild(renderer.domElement);

function createLoadingCube() {
    const loadingScene = new THREE.Scene();
    const loadingCamera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
    loadingCamera.position.z = 5;
    const loadingRenderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    loadingRenderer.setClearAlpha(0);
    loadingRenderer.setSize(100, 100);
    document.getElementById("loading-cube").appendChild(loadingRenderer.domElement);

    const cube = new THREE.Mesh(
        new THREE.BoxGeometry(2, 2, 2),
        new THREE.MeshBasicMaterial({ color: 0xfe5000, wireframe: true })
    );
    loadingScene.add(cube);
    loadingScene.add(new THREE.AmbientLight(0xffffff, 1));

    function animateLoadingCube() {
        requestAnimationFrame(animateLoadingCube);
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        loadingRenderer.render(loadingScene, loadingCamera);
    }

    animateLoadingCube();
    return function () {
        document.getElementById("loading-cube").removeChild(loadingRenderer.domElement);
    };
}

const cleanupLoadingCube = createLoadingCube();

const pmremGenerator = new THREE.PMREMGenerator(renderer);
new THREE.RGBELoader().load(
    "https://cdn.shopify.com/s/files/1/0753/2393/2896/files/photo_studio_01_2k.hdr?v=1746778998",
    (hdrTexture) => {
        const envMap = pmremGenerator.fromEquirectangular(hdrTexture).texture;
        scene.environment = envMap;
        hdrTexture.dispose();
        pmremGenerator.dispose();
    }
);

const loader = new THREE.GLTFLoader();
const dracoLoader = new THREE.DRACOLoader();
dracoLoader.setDecoderPath("https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/libs/draco/");
loader.setDRACOLoader(dracoLoader);

let model = null;
let initialRotation = { x: 0, y: Math.PI };
let hasPlayedScrollAnimation = false;

loader.load(`{{ section.settings.modelLink }}`, (gltf) => {
    model = gltf.scene;
    model.scale.set(7.5, 7.5, 7.5);
    model.position.set(0, -3.5, 0);

    model.traverse((child) => {
        if (child.isMesh && child.material) {
            // 可調(diào)整材質(zhì)屬性
        }
    });

    scene.add(model);
    initialRotation = { x: model.rotation.x, y: model.rotation.y };

    setTimeout(() => rotateY180(), 500);
    setupScrollTriggerWithGSAP();

    gsap.to("#loading-container", {
        opacity: 0,
        duration: 0.5,
        onComplete: () => {
            document.getElementById("loading-container").style.display = "none";
            cleanupLoadingCube();
        },
    });
});

let isDragging = false;
let previousMousePosition = { x: 0, y: 0 };
let targetRotation = { x: 0, y: 0 };
let currentRotation = { x: 0, y: 0 };
const maxRotationX = Math.PI / 3;
const rotationSensitivity = 0.003;
let velocity = { x: 0, y: 0 };
const friction = 0.95;

// 鼠標移動處理
document.addEventListener("mousemove", (e) => {
    mouseX = e.clientX;
    mouseY = e.clientY;

    if (isInsideBox && !isOverReturnIcon) {
        updateCursorPosition(mouseX, mouseY);
        cursor.style.display = "flex";
        document.body.classList.remove("normal-cursor");
    } else {
        cursor.style.display = "none";
        document.body.classList.add("normal-cursor");
    }

    if (!isDragging || !model) return;

    const deltaMove = {
        x: e.clientX - previousMousePosition.x,
        y: e.clientY - previousMousePosition.y,
    };

    velocity = {
        x: -deltaMove.y * rotationSensitivity * 0.5,
        y: deltaMove.x * rotationSensitivity * 0.5,
    };

    targetRotation.y += deltaMove.x * rotationSensitivity;
    targetRotation.x += deltaMove.y * rotationSensitivity;
    targetRotation.x = Math.max(-maxRotationX, Math.min(maxRotationX, targetRotation.x));
    previousMousePosition = { x: e.clientX, y: e.clientY };
});

// 動畫循環(huán)
function animate() {
    requestAnimationFrame(animate);
    if (!isDragging) {
        targetRotation.y += velocity.y;
        targetRotation.x += velocity.x;
        velocity.x *= friction;
        velocity.y *= friction;
    }

    currentRotation.x += (targetRotation.x - currentRotation.x) * 0.1;
    currentRotation.y += (targetRotation.y - currentRotation.y) * 0.1;

    if (model) {
        model.rotation.x = currentRotation.x;
        model.rotation.y = currentRotation.y;
    }

    renderer.render(scene, camera);
}