three.js(28)-给模型加文字标签

作者: 姜治宇 | 来源:发表于2023-01-05 11:02 被阅读0次

three.js(28)-给模型加文字标签
Three.js模型标签
three.js(27)-标签文字
bootstrap常用标签
Three.js模型隐藏或显示
15three.js加载obj模型
Three.js跨域问题(无法预览)
three.js 给模型添加标注
MTLLoader 报 Handlers.get() has b
shiny给标签加属性

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>