122 lines
4.2 KiB
Vue
122 lines
4.2 KiB
Vue
<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> |