three.js如何实现简易3D机房?点击事件+呼吸灯效果
warning:
这篇文章距离上次修改已过204天,其中的内容可能已经有所变动。
// 引入必要的Three.js组件
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
// 场景、相机、渲染器以及对象
let scene, camera, renderer, mesh, controls;
// 初始化场景、相机和渲染器
function initScene() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setClearColor(new THREE.Color(0x000000));
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera.position.set(0, 5, 10);
camera.lookAt(new THREE.Vector3(0, 0, 0));
}
// 加载3D模型
function loadModel() {
const loader = new GLTFLoader();
loader.load('models/machine_room.glb', (gltf) => {
mesh = gltf.scene;
scene.add(mesh);
});
}
// 添加灯光
function addLights() {
const ambientLight = new THREE.AmbientLight(0xcccccc, 0.4);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.6);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);
}
// 添加呼吸灯效果
function addLightsEffect() {
const lights = mesh.getObjectByName('Lights');
lights.traverse(function(child) {
if (child.isMesh) {
child.castShadow = true;
setInterval(function() {
child.material.emissive.setHex(Math.random() * 0xffffff);
}, 1000);
}
});
}
// 监听鼠标点击事件
function addClickEvent() {
renderer.domElement.addEventListener('click', function() {
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
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);
if (intersects.length > 0) {
// 如果点击的是机房门,执行相关操作
if (intersects[0].object.name === 'door') {
// 这里可以添加门开关的逻辑处理
console.log('门被点击了!');
}
}
}, false);
}
// 初始化轨道控制器
function addOrbitControls() {
controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
评论已关闭