<template>
    <div>
        <div id="gltf"></div>
    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import * as THREE from 'three';
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import { RoomEnvironment } from "three/examples/jsm/environments/RoomEnvironment.js";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
import { OutlinePass } from "three/examples/jsm/postprocessing/OutlinePass.js";
import { ShaderPass } from "three/examples/jsm/postprocessing/ShaderPass.js";
import { FXAAShader } from "three/examples/jsm/shaders/FXAAShader.js";

onMounted(() => {
    init();
    loadSence();
    renderScene();
    document.addEventListener("click", onMouseDown);
    // document.addEventListener("mousemove", onMouseMove);
});
let scene, renderer, camera;
const init = () => {
    // 场景
    scene = new THREE.Scene();
    // 相机
    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000);
    // camera.position.z = 5;
    camera.position.set(-46.650, 67.456, 38.088);
    //渲染器
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.outputEncoding = THREE.sRGBEncoding;
    document.getElementById('gltf').appendChild(renderer.domElement);

    const controls = new OrbitControls(camera, renderer.domElement);
    const pmremGenerator = new THREE.PMREMGenerator(renderer);
    scene.environment = pmremGenerator.fromScene(new RoomEnvironment()).texture;
}
const loadSence = () => {
    const gltfLoader = new GLTFLoader();
    gltfLoader.load('/jzc/scene.gltf', (gltf) => {
        var model = gltf.scene;
        scene.add(model);
    });
};
const renderScene = () => {
    requestAnimationFrame(renderScene);
    renderer.render(scene, camera);
};

// 能选中的组
const enableGroup = [
    'set1',
    'set2',
    'set3',
    'set4',
    'set5',
    'set6',
    'set7',
    'set8',
    'yuanliao_room',
    'tanghua_room',
    'touliao_room',
]
let mouse = new THREE.Vector2();
let selectedObjects = ref([]);
let selectBoxByClick, selectBoxByMouseon;
// 鼠标移动效果
const onMouseMove = (event) => {
    var raycaster = new THREE.Raycaster()
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
    raycaster.setFromCamera(mouse, camera);
    const intersects = raycaster.intersectObjects(scene.children, true);
    if (intersects.length > 0) {
        const clickedObject = intersects[0].object;
        var selectedObject = clickedObject;
        if (enableGroup.indexOf(selectedObject.name) != -1) {
            selectedObjects[0] = selectedObject
        }
        if (enableGroup.indexOf(selectedObject.parent.name) != -1) {
            selectedObjects[0] = selectedObject.parent
        }
        if (selectBoxByMouseon) {
            scene.remove(selectBoxByMouseon);
        }
        selectBoxByMouseon = new THREE.BoxHelper(selectedObjects[0], '#ffffff');
        scene.add(selectBoxByMouseon);
    }
}
// 鼠标点击效果
const onMouseDown = (event) => {
    var raycaster = new THREE.Raycaster()
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
    raycaster.setFromCamera(mouse, camera);
    const intersects = raycaster.intersectObjects(scene.children, true);
    if (intersects.length > 0) {
        const clickedObject = intersects[0].object;
        var selectedObject = clickedObject;
        console.log(selectedObject);
        if (enableGroup.indexOf(selectedObject.name) != -1) {
            selectedObjects[0] = selectedObject
        }
        if (enableGroup.indexOf(selectedObject.parent.name) != -1) {
            selectedObjects[0] = selectedObject.parent
        }
        if (selectBoxByClick) {
            scene.remove(selectBoxByClick);
        }
        selectBoxByClick = new THREE.BoxHelper(selectedObjects[0], '#00ffff');
        scene.add(selectBoxByClick);
    }
}
</script>
<style scoped></style>