three.js(28)-给模型加文字标签
2023-01-05 本文已影响0人
姜治宇
5.png
文字标签都是dom实现，这块是独立的渲染，只要坐标位置放对了就ok。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="http://www.yanhuangxueyuan.com/threejs/build/three.min.js"></script>
<script src="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"></script>
<script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/GLTFLoader.js"></script>
<script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/DRACOLoader.js"></script>
<script src="http://www.yanhuangxueyuan.com/threejs/examples/js/renderers/CSS3DRenderer.js"></script>
<style>
.tag {
width: 200px;
padding: 10px;
color: #fff;
background-color: rgb(20, 143, 211, 0.68);
box-shadow: 0 0 12px rgba(0, 128, 255, 0.75);
border: 1px solid rgba(127, 177, 255, 0.75);
}
</style>
</head>
<body>
<div id="webgl"></div>
</body>
</html>
<script>
var scene, camera, renderer;
init();
function init() {
//场景
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 100);
scene.add(camera);//添加相机
//添加坐标轴
var axes = new THREE.AxesHelper(500);//500表示xyz轴的长度，红:x,绿:y,蓝:z
scene.add(axes);
addGlb('./model/floor2.glb', scene);
render();
animate();
}
//创建标签元素
function createTag(obj) {
const element = document.createElement('div');
element.className = 'tag';
element.innerHTML = `<p>名称:${obj.name}</p><p>温度：22°</p><p>湿度：29%</p>`;
const object = new THREE.CSS3DObject(element);
object.visible = true;
//缩放比例
object.scale.set(0.2, 0.2, 0.2);
//指定摆放位置
object.position.copy(obj.position);
return object;
}
async function addGlb(filepath, scene) {
const loader = new THREE.GLTFLoader();
const dracoloader = getDracoLoader();
loader.setDRACOLoader(dracoloader);//注入loader
//加载地板
const gltf = await loadGlb(filepath, loader);
scene.add(gltf.scene);
gltf.scene.traverse(child => {
if (child.type === 'Object3D' && child.children.length === 0) {
//添加标签文字
const tag = createTag(child);
gltf.scene.add(tag);//添加到指定的场景里
}
});
}
function getDracoLoader() {
//对模型解压
const dracoloader = new THREE.DRACOLoader();
dracoloader.setDecoderPath("./draco/");//把examples\jsm\libs\draco这个文件夹复制过来
dracoloader.setDecoderConfig({ type: "js" })
dracoloader.preload();
return dracoloader;
}
function loadGlb(filepath, loader) {
return new Promise((resolve, reject) => {
loader.setCrossOrigin('Anonymous');//跨域问题
loader.load(filepath, (gltf) => {
console.log('gltf>>>', gltf);
//处理材质丢失的情况
gltf.scene.traverse(child => {
if (child.isMesh) {
child.material.emissive = child.material.color;
child.material.emissiveMap = child.material.map;
}
});
resolve(gltf);
}, undefined, (error) => {
console.error(error);
reject(error);
});
});
}
function render() {
let dom = document.getElementById('webgl');
renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true
});//画布
renderer.setSize(window.innerWidth, window.innerHeight);//设置渲染区域尺寸
renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
dom.appendChild(renderer.domElement);
//设置dom元素的渲染
renderer2 = new THREE.CSS3DRenderer();
renderer2.setSize(window.innerWidth, window.innerHeight);
renderer2.domElement.style.position = 'absolute';
renderer2.domElement.style.top = 0;
dom.appendChild(renderer2.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
var controls2 = new THREE.OrbitControls(camera, renderer2.domElement);
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
renderer2.setSize(window.innerWidth, window.innerHeight);
});
}
function animate() {
renderer.render(scene, camera);//开始渲染
renderer2.render(scene, camera);
requestAnimationFrame(animate);
}
</script>
