<template>
</template>

<script setup>
import * as THREE from 'three';
import Stats from 'three/addons/libs/stats.module.js';
import {Sky} from 'three/addons/objects/Sky.js';
import {TrackballControls} from 'three/addons/controls/TrackballControls.js';
import {GLTFLoader} from "three/addons/loaders/GLTFLoader.js";


let container, stats;
let camera, scene, renderer;
let controls, sun, css2Renderer;
init();
animate();

function init() {
    // 创建容器
    container = document.getElementById('app');
    //创建渲染器
    renderer = new THREE.WebGLRenderer({
        antialias: true,
        alpha: true
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.toneMapping = THREE.ACESFilmicToneMapping;
    renderer.toneMappingExposure = 0.5;
    container.appendChild(renderer.domElement);

    //创建场景
    scene = new THREE.Scene();
    // 创建相机
    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.2, 20000);
    camera.position.set(300, 100, 50);

    // 创建轨迹球控制器
    controls = new TrackballControls(camera, renderer.domElement);
    controls.rotateSpeed = 0.40;
    controls.zoomSpeed = 0.4;
    controls.panSpeed = 1;

    // 导入模型并展示
    let loader = new GLTFLoader();
    loader.load('model/GH.glb', function (gltf) {
        gltf.scene.position.set(130, 0, 0);
        scene.add(gltf.scene);
    });


    //创建太阳环境和水平面等
    sun = new THREE.Vector3();

    // 底部模型
    const geometry = new THREE.BoxGeometry(3000, 1, -3000);
    const material = new THREE.MeshBasicMaterial({color: 0xE5DECA});
    const cube = new THREE.Mesh(geometry, material);
    cube.name = "底面"
    //scene.add(cube);

    // Skybox
    const sky = new Sky();
    sky.scale.setScalar(1000);
    //scene.add(sky);

    const skyUniforms = sky.material.uniforms;
    skyUniforms['turbidity'].value = 10;
    skyUniforms['rayleigh'].value = 2;
    skyUniforms['mieCoefficient'].value = 0.005;
    skyUniforms['mieDirectionalG'].value = 0.8;

    const parameters = {
        elevation: 2,
        azimuth: 180
    };

    const pmremGenerator = new THREE.PMREMGenerator(renderer);
    let renderTarget;

    function updateSun() {

        const phi = THREE.MathUtils.degToRad(90 - parameters.elevation);
        //const phi = THREE.MathUtils.degToRad(200);
        const theta = THREE.MathUtils.degToRad(parameters.azimuth);

        sun.setFromSphericalCoords(1, phi, theta);

        sky.material.uniforms['sunPosition'].value.copy(sun);

        if (renderTarget !== undefined) renderTarget.dispose();

        renderTarget = pmremGenerator.fromScene(sky);

        scene.environment = renderTarget.texture;
    }

    updateSun();

    stats = new Stats();
    container.appendChild(stats.dom);


    //
    window.addEventListener('resize', onWindowResize);
    // 创建射线对象
    let raycaster = new THREE.Raycaster();
    // 监听鼠标点击事件
    document.addEventListener('mousedown', onDocumentMouseDown, false);

    function onDocumentMouseDown(event) {
        // 获取鼠标点击位置（x，y坐标）
        event.preventDefault();
        let mouse = new THREE.Vector2();
        mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
        mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
        // 计算射线与物体相交
        raycaster.setFromCamera(mouse, camera);
        let intersects = raycaster.intersectObjects(scene.children, true);
        // 获取选中的物体
        if (intersects.length > 0) {
            let selectedObj = intersects[0].object;
            /*if (selectedObj.name !== '底面') {
                selectedObj.material.color = new THREE.Color(0x1ECC95);
            }*/
            console.log(selectedObj);
            console.log(selectedObj.name);
            console.log(selectedObj.position.x);
        }
    }
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(window.devicePixelRatio);
    controls.handleResize();
    css2Renderer.setSize(window.innerWidth, window.innerHeight);

}

function render() {
    requestAnimationFrame(render);
}

function animate() {
    requestAnimationFrame(animate);
    render();

    stats.update();
    controls.update();
    renderer.render(scene, camera);
}

controls.enableDamping = true;

</script>

<style scoped>

</style>
