import * as THREE from 'three';
import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
let scene, camera, renderer, labelRenderer;
let mesh, label;
init();
animate();
function init() {
scene = new THREE.Scene();
scene.background = new THREE.Color(0xeeeeee);
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 2, 5);
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
labelRenderer = new CSS3DRenderer();
labelRenderer.setSize(window.innerWidth, window.innerHeight);
labelRenderer.domElement.style.position = 'absolute';
labelRenderer.domElement.style.top = 0;
document.body.appendChild(labelRenderer.domElement);
// 加载GLTF模型(假设有一个包含全景图的模型)
const loader = new GLTFLoader();
loader.load('path/to/model.gltf', (gltf) => {
mesh = gltf.scene;
scene.add(mesh);
// 创建CSS3DObject对象,并关联全景图标签
label = new CSS3DObject(document.querySelector('.panorama-label'));
label.position.set(0, 0, 0);
scene.add(label);
// 更新全景图标签的位置与模型对齐
function updateLabelPosition() {
const position = mesh.position;
label.position.set(position.x, position.y, position.z);
label.rotation.set(mesh.rotation.x, mesh.rotation.y, mesh.rotation.z);
}
mesh.addEventListener('update', updateLabelPosition);
updateLabelPosition();
});
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
labelRenderer.setSize(window.innerWidth, window.innerHeight);
}
window.addEventListener('resize', onWindowResize, false);
}
function animate() {
requestAnimationFrame(
评论已关闭