HTML
<div id="container">
<canvas id="c"></canvas>
<div id="labels">
<div id="label">이름표</div>
</div>
</div>
CSS
html, body {
height: 100%;
margin: 0;
}
#c {
width: 100%;
height: 100%;
display: block;
}
#container {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
#labels {
position: absolute;
z-index: 0;
left: 0;
top: 0;
color: white;
}
#labels>div {
white-space: nowrap;
position: absolute;
left: 0;
top: 0;
cursor: pointer;
font-size: large;
}
JS
import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r127/build/three.module.js';
import { OrbitControls } from 'https://threejsfundamentals.org/threejs/resources/threejs/r127/examples/jsm/controls/OrbitControls.js';
function main() {
const canvas = document.querySelector('#c');
const renderer = new THREE.WebGLRenderer({ canvas });
const camera = new THREE.OrthographicCamera(-50, 50, 50, -50, 0.001, 10000);
const controls = new OrbitControls(camera, canvas);
const scene = new THREE.Scene();
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ffff });
const cube = new THREE.Mesh(geometry, material);
cube.position.x = 10;
const group = new THREE.Group();
group.add(cube);
scene.add(group);
const borderBox = new THREE.Box3();
borderBox.setFromObject(group);
let center = new THREE.Vector3();
borderBox.getCenter(center);
camera.position.set(center.x, center.y, 10);
controls.target.set(center.x, center.y, 0);
controls.update();
const label = document.querySelector('#label');
const tempV = new THREE.Vector3();
function render(time) {
time *= 0.001;
cube.updateWorldMatrix(true, false);
cube.getWorldPosition(tempV);
tempV.project(camera);
const x = (tempV.x * .5 + .5) * canvas.clientWidth;
const y = (tempV.y * -.5 + .5) * canvas.clientHeight;
label.style.transform = `translate(-50%, -50%) translate(${x}px,${y}px)`;
renderer.render(scene, camera);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
}
main();
참고