ThreeJS动态加载div标签

最新推荐文章于 2024-03-21 09:32:10 发布
最新推荐文章于 2024-03-21 09:32:10 发布
阅读量1.5w 收藏 112
点赞数 24
分类专栏： ThreeJS 文章标签： 小功能代码记录
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36266612/article/details/89851618
版权

思路：
1.在页面中创建一个div标签；
2.确定标签在三维场景中的三维位置；
3.计算三维位置的屏幕坐标；
4.在每一帧的渲染中都计算一下这个三维坐标的屏幕位置，并把屏幕位置赋给标签。
具体实现：
1.创建div标签
标签样式：

  .tap{
            position: absolute;
            background-color: MidnightBlue;
            background-color:rgba(0,10,40);
            border-top-left-radius: 10px;
            border-bottom-right-radius:10px;
            opacity: 0.5;
            font-size: 4px;
            color: aqua;
            width: 36px;
            height: 44px;
            padding: 1px 1px 1px;
        }

div：

<div class="tag" id="tag">
    <span style="color:white;font-size: 10px;padding: 5px">楼宇名称：</span>
    <span style="font-size: 11px;font-weight: bold">XXX大厦</span>
    <p style="padding: 5px;margin-top: -3px;">占地面积：25541平方米</p>;
</div>

效果：
在这里插入图片描述
初始时我们可以将div的display设置为none，当确定它的位置后再设置为显示。
2.我们给标签指定一个场景中的位置，比如x y z为（20,30,50）,要把三维坐标转换为屏幕坐标：
三维坐标转屏幕坐标的方法：

 function transPosition(position){
     let world_vector = new THREE.Vector3(position.x,position.y,position.z);
     let vector =world_vector.project(camera);
     let halfWidth = window.innerWidth / 2,
         halfHeight = window.innerHeight / 2;
     return {
         x: Math.round(vector.x * halfWidth + halfWidth),
         y: Math.round(-vector.y * halfHeight + halfHeight)
     };
 }

将指定的三维坐标转为屏幕坐标：

//计算三维坐标对应的屏幕坐标
        var position=new THREE.Vector3(20,30,50);
        var windowPosition=transPosition(position);
        var left=windowPosition.x;
        var top=windowPosition.y;

3.将屏幕坐标的位置赋给div，并将div的显示出来：

//设置div屏幕位置
        let div = document.getElementById('tag');
        div.style.display = "";
        div.style.left = left + 'px';
        div.style.top = top + 'px';

4.将div位置变换和赋值放入场景渲染频率中：

    function render() {
        divRender();
        renderer.render(scene, camera);
    }
 function divRender() {
        //计算三维坐标对应的屏幕坐标
        var position=new THREE.Vector3(20,30,50);
        var windowPosition=transPosition(position);
        var left=windowPosition.x;
        var top=windowPosition.y;
        //设置div屏幕位置
        let div = document.getElementById('tag');
        div.style.display = "";
        div.style.left = left + 'px';
        div.style.top = top + 'px';
    }

效果：
在这里插入图片描述
完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
    <style>
        .tag {
            position: absolute;
            background-color: MidnightBlue;
            background-color: rgba(0, 10, 40);
            border-top-left-radius: 10px;
            border-bottom-right-radius: 10px;
            opacity: 0.5;
            font-size: 4px;
            color: aqua;
            padding: 1px 1px 1px;
        }
    </style>
</head>

<body onload="draw();">
    <div id="WebGL-output">
        <div class="tag" id="tag">
            <span style="color:white;font-size: 10px;padding: 5px">楼宇名称：</span>
            <span style="font-size: 11px;font-weight: bold">XXX大厦</span>
            <p style="padding: 5px;margin-top: -3px;">占地面积：25541平方米</p>
        </div>
    </div>
</body>
<script src="js/threer94.js"></script>
<script src="js/jquery.js "></script>
<script src="js/OrbitControls.js "></script>
<script src="js/stats.min.js "></script>
<script src="js/dat.gui.min.js "></script>
<script>
    var scene;
    var camera;
    var renderer;
  
  
    function init() {       
        scene = new THREE.Scene();        
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100000);
        renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });      
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMap.enabled = true; //打开阴影
        renderer.setClearAlpha(0.2);      
        var axis=new THREE.AxesHelper(200);;
        scene.add(axis)        
        //添加环境光
        var hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 1);
        hemiLight.position.set(0, 500, 0);
        scene.add(hemiLight);
        //设置相机位置
        camera.position.x = -300;
        camera.position.y = 400;
        camera.position.z = 300;
        camera.lookAt(scene.position);
        document.getElementById("WebGL-output").appendChild(renderer.domElement);
        //鼠标控制器
        initControls();
        animate();
        window.addEventListener('resize', onResize, false); //添加窗口大小监听事件  
    };
    
    function initControls() {
            controls2 = new THREE.OrbitControls(camera, renderer.domElement);
            controls2.enableDamping = true;
            controls2.dampingFactor = 1;
            controls2.enableZoom = true;
            controls2.zoomSpeed = 2;
            controls2.autoRotate = false;

            controls2.minDistance = 0;
            controls2.maxDistance = 600;
            controls2.enablePan = true;
            controls2.keyPanSpeed = 15;
        }

    function animate() {
        //更新控制器
        controls2.update();
        divRender();
        renderer.render(scene, camera);
        requestAnimationFrame(animate);
    }
  
    function onResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    }

    function divRender() {
        //计算三维坐标对应的屏幕坐标
        var position = new THREE.Vector3(20, 30, 50);
        var windowPosition = transPosition(position);
        var left = windowPosition.x;
        var top = windowPosition.y;
        //设置div屏幕位置
        let div = document.getElementById('tag');
        div.style.display = "";
        div.style.left = left + 'px';
        div.style.top = top + 'px';
    }
    function transPosition(position) {
        let world_vector = new THREE.Vector3(position.x, position.y, position.z);
        let vector = world_vector.project(camera);
        let halfWidth = window.innerWidth / 2,
            halfHeight = window.innerHeight / 2;
        return {
            x: Math.round(vector.x * halfWidth + halfWidth),
            y: Math.round(-vector.y * halfHeight + halfHeight)
        };
    }
    window.onload = init;
</script>

</html>

项目中的应用：
html中标签样式：

  .tap{
            position: absolute;
            background-color: MidnightBlue;
            background-color:rgba(0,10,40);
            border-top-left-radius: 10px;
            border-bottom-right-radius:10px;
            opacity: 0.5;
            font-size: 4px;
            color: aqua;
            width: 36px;
            height: 44px;
            padding: 1px 1px 1px;
        }

js中动态添加

//txt1 txt2 txt3 为div中要显示的文本，具体样式可修改 innerHTML那一行
function addDom(txt1,txt2,txt3) {
    let addDivDom = document.createElement('div');
    let bodyDom = document.body;
    bodyDom.insertBefore(addDivDom, bodyDom.lastChild);
    addDivDom.classList = 'tap';
    addDivDom.innerHTML = '<span style="color:white;font-size: 10px;padding: 5px">' + txt1 + '</span>'+'<span style="font-size: 11px;font-weight: bold">'+txt2+'</span>'+'<p style="padding: 5px;margin-top: -3px;">'+txt3+'</p>';
}

render中要实时渲染修改标签的二维坐标,代码中的position为三维坐标，即标签插入时的三维坐标

function renderLabel(){
            div.style.left=transPosition(position).x + 'px';
            div.style.top=transPosition(position).y + 'px';
}
//三维坐标转屏幕坐标
  function transPosition (position) {
        let world_vector = new THREE.Vector3(position.x, position.y, position.z);
        let vector = world_vector.project(camera);
        let halfWidth = window.innerWidth / 2,
            halfHeight = window.innerHeight / 2;
        return {
            x: Math.round(vector.x * halfWidth + halfWidth),
            y: Math.round(-vector.y * halfHeight + halfHeight)
        };
    }

具体实例1：给建筑物添加标签
效果图：
在这里插入图片描述
在这里插入图片描述
（图一标签为颜色最暗的建筑的标签，图二为最高的建筑的标签）

    let build=new THREE.Group();
    var loader = new THREE.VRMLLoader();
    //加载一个wrl格式的模型，其他格式模型同样，自建cube等不需要自建box
    loader.load( 'model/h.wrl', function ( object ) {

        object.castShadow = true;

        build= object.children[0].children[0];
        build.castShadow = true;
        object.position.x=-20;
        object.position.y=0;
        object.position.z=-30;

        scene.add(object);
        let box= creatBoundingBox(object);
        build.box=box;
         addDom("楼宇名称  ","h 可点击","占地面积：25541平方米",box);
        CubeArray.push(box);
        })
        
function addDom(txt1,txt2,txt3,cube) {
    let addDivDom = document.createElement('div');
    let bodyDom = document.body;
    bodyDom.insertBefore(addDivDom, bodyDom.lastChild);
    addDivDom.id=cube.uuid+"_text";
    addDivDom.classList = 'tap';
    addDivDom.innerHTML = '<span style="color:white;font-size: 10px;padding: 5px">' + txt1 + '</span>'+'<span style="font-size: 11px;font-weight: bold">'+txt2+'</span>'+'<p style="padding: 5px;margin-top: -3px;">'+txt3+'</p>';
    divIdArray.push(addDivDom.id);
}
 //渲染实时更新标签位置
function render() {
    cubeLabe();
    renderer.render(scene, camera);
}
//只显示最近点击的楼的标签 其他标签隐藏不显示
function cubeLabe() {
    if(IsSelectedMesh==true)
    {
        let cube=clickmesh;
        let divid=cube.uuid+"_text";
        for(let i=0;i<divIdArray.length;i++) {
            let id = divIdArray[i];
            let div = document.getElementById(id);
            if(id==divid)
            {
                if(div!=null&&div!=undefined){
                    div.style.display="";
                    div.style.left=interface.transPosition(cube.position).x + 'px';
                    let posi=new THREE.Vector3(cube.position.x,(cube.position.y)*2,cube.position.z);
                    div.style.top=interface.transPosition(posi).y-100 + 'px';
                    // let number=cube.uuid;
                    // div.style.zIndex=number;
                }
            }else {
                if(div!=null&&div!=undefined){
                    div.style.display = "none";
                }

            }
        }
    }else {
        for(let i=0;i<divIdArray.length;i++) {
            let id = divIdArray[i];
            let div = document.getElementById(id);

            if(div!=null||div!=undefined){
                div.style.display = "none";
            }
        }
    }
}
//生成模型包围盒实体，方便标签判断位置
function creatBoundingBox(object) {
    //计算包围盒长宽高
    let Box=new THREE.Box3();
    Box.setFromObject(object);
    if ( Box.isEmpty() ) return;
    let min = Box.min;
    let max = Box.max;
    let width=max.x-min.x;
    let height=max.y-min.y;
    let deepth=max.z-min.z;
    // console.log(width+";"+height+";"+deepth);

    //计算包围盒中心点
    let centerX=(max.x+min.x)/2;
    let centerY=(max.y+min.y)/2;
    let centerZ=(max.z+min.z)/2;

    //画一个boundingbox的cube实体

    let boxGeometry=new THREE.BoxGeometry(width,height,deepth);
    let boxMaterial=new THREE.MeshLambertMaterial({});
    let box=new THREE.Mesh(boxGeometry,boxMaterial);
    box.position.set(centerX,centerY,centerZ);
    return box;
}

具体实例2 点击模型表面添加标签，标签为图片
效果图：
在这里插入图片描述
在这里插入图片描述

    var fixedBoard = function () {
        position:null;
        div:null;
        image:null
    }
    var fixedBoardlist=[];
    //添加鼠标事件 移除鼠标事件
    function ImageTag() {
        addEventListener('click',addFixedBoard);// 监听窗口鼠标单击事件
        $(document).keydown(function (event) {
            if (event.keyCode == 27) {
                removeAddBoard();
            }
        });
    }
//固定位置的标签
    function addFixedBoard() {
        var windowX = event.clientX;//鼠标单击位置横坐标
        var windowY = event.clientY;//鼠标单击位置纵坐标

        var addDivDom = document.createElement('div');
        var bodyDom = document.body;
        bodyDom.insertBefore(addDivDom, bodyDom.lastChild);
        // addDivDom.id=cube.uuid+"_text";
        addDivDom.classList = 'tap';
        var img=new Image();
        // var image=document.createElement("img");
        var  image_src="./img/002.png";
        img.src=image_src;
        addDivDom.appendChild(img);


        var x = (windowX / window.innerWidth) * 2 - 1;//标准设备横坐标
        var y = -(windowY / window.innerHeight) * 2 + 1;//标准设备纵坐标
        var standardVector = new THREE.Vector3(x, y, 0.5);//标准设备坐标
        //标准设备坐标转世界坐标
        var worldVector = standardVector.unproject(camera);
        var ray = worldVector.sub(camera.position).normalize();
        //创建射线投射器对象
        var raycaster = new THREE.Raycaster(camera.position, ray);
        //返回射线选中的对象
        var intersects = raycaster.intersectObjects(floorChildrenGroup);
        console.log(intersects);
        if (intersects.length > 0) {
            var point=intersects[0].point;
            var board=new fixedBoard();
            board.position=point;
            board.div=addDivDom;
            board.image=img;
            fixedBoardlist.push(board);
        }

    }
//移除鼠标单击事件绑定
    function removeAddBoard() {
        removeEventListener('click',addFixedBoard);
    }
//实时修改渲染时的图片位置
    function imagePosition() {
        for(var i=0;i<fixedBoardlist.length;i++){
            var position=fixedBoardlist[i].position;
            var div=fixedBoardlist[i].div;
            var x=interface.transPosition(position).x;
            var y=interface.transPosition(position).y;
            var image=fixedBoardlist[i].image;
            var width=image.width;
            var height=image.height;
            div.style.top=y-height+ 'px';
            div.style.left=x-width/2+ 'px';

        }
    }
//报警标签
    function Warning(Istrue) {
        if(Istrue){

            for(var i=0;i<fixedBoardlist.length;i++){
                fixedBoardlist[i].image.src='./img/003.png';
            }
            var button0=document.getElementById('warn');
            button0.style.display="none";
            var button1=document.getElementById('cancelwarn');
            button1.style.display="";
        }else {
            for(var i=0;i<fixedBoardlist.length;i++){
                fixedBoardlist[i].image.src='./img/002.png';
            }
            var button0=document.getElementById('warn');
            button0.style.display="";
            var button1=document.getElementById('cancelwarn');
            button1.style.display="none";
        }
    }
function render(){
    renderer.render(scene, camera);
    imagePosition();
}
李小喵Y
关注
  • 24
    点赞
  • 踩
  • 112
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
专栏目录
threejs动态加载div标签
weixin_43974540的博客
10-15 3727
divid为标签的id值，为了方便后续操作，htmlstr为需要添加的标签文本，position为标签的物体坐标 function addLabel(divid,htmlstr,position) { var addDivDom = document.createElement('div'); div1 = addDivDom; var bodyDom = document...
Three.js——第一篇：部署以及基础代码创建场景、GUI调整样式
最新发布
m0_73991249的博客
06-25 754
很多教程一开始要大家自己部署three.js的中文本地部署，我就不弄了，我弄了半天也没弄出来烦了，反正我也不爱看官方文档我就不弄了，直接开干。另外本人学的前端，习惯用vue就以vue的开发框架做基础引入three.js了。
ThreeJS点选物体后div标签动态跟随
丰空岛主(Vega Prime,Android,LabWindows,ThreeJS,Python,OpenCV）
12-10 2382
1 解决标签点的包含关系 <div id="WebGLwxp" align="center"> <div id="notice"></div> </div> notice是用来显示动态信息的div， WebGLwxp是渲染场景的div 2 首先解决鼠标点选问题 参考鼠标点选解决方案 3 然后解决三维坐标点转换为二维坐标点问题 //三维坐标转屏幕坐标 function ...
Three.js中动态的创建div
hard_reward的博客
08-07 625
Three.js中动态的创建div 之前做过一个需求，就是要求双击物体可以出现这个物体会出现这个物体与其他物体的连线并且显示距离（物体可以移动），那么这个就要求每次移动双击之后都会动态的生成div。 实现代码如下： //num表示的是选中的物体编号 //生成div function divRender(num) { var distance; var point; for(var i=0;i<=7;i++) { if (i !=
THREEJS - 动态标签（dom方式）
Kreme的博客
03-27 4395
在三维场景中，我们会有一种需求：需要给三维场景中的模型打上标签，例如展示模型的名称/性能展示等，三维场景打标签的方式很多，有dom、sprite、Mesh等等，这篇文章来给大家介绍的是一种比较常见的打标签方式：dom。这种方式我们可以自定义任何样式的dom标签，比较容易满足各种场景的需求。 1.创建dom元素： <div id="sign" style="position: absolute;"> <div class="sign"> <div c
threejs添加标签
qq_40344815的博客
10-11 1046
threejs添加标签
js_在three.js场景中添加div
weixin_44875324的博客
03-06 3629
在three.js创建的三维场景中添加基础几何体是非常方便的，使用add函数就可以直接把几何体添加到场景中，但是这些基础几何体往往不能满足我们的使用需求，因此就需要调用其他的组件。这里介绍三种给场景中添加div元素的方式，供大家参考。
threejs实现标签标注的三种方式
Pure_White520的博客
02-02 1556
threejs常见创建标签的三种方式
three.js添加2d标签
weixin_52619319的博客
03-21 404
第一步 标签div元素。
使用three.js 画渐变的直线
11-22
在示例中，我们通过`<script>`标签链接到外部的`three.js`文件。此外，我们还需要设置一个`div`元素作为3D渲染的容器，并为其分配样式，以便在页面中正确显示3D内容。 接下来，我们需要初始化Three.js的基本元素：...
vue页面引入three.js实现3d动画场景操作
10-14
访问[https://threejs.org/docs/index.html#manual/zh](https://threejs.org/docs/index.html#manual/zh)可以获取更多信息。在实践中不断探索和尝试，你将能够熟练地利用Three.js在Vue项目中构建出令人惊叹的3D交互...
基于Three.js插件制作360度全景图
11-27
基于Three.js的360度全景图插件是一种强大的工具，用于在网页上展示沉浸式的全景体验。...结合Three.js的强大功能，你可以实现更复杂的交互和特效，比如动态光照、交互式热点等，为用户提供更加生动和真实的在线体验。
js3d标签云
11-21
8. **库和框架**：有些开发者可能会选择使用Three.js这样的JavaScript 3D库来简化3D编程，因为它提供了丰富的功能和便利的API，可以更高效地创建复杂的3D效果。 在压缩包中的“3d标签云”文件中，你应该能够找到...
Three.js前端3D开发：使用CSS3DRenderer渲染全景图
08-07
<script src="https://threejs.org/examples/js/renderers/CSS3DRenderer.js"> ``` 2. **创建场景（Scene）**：创建一个 Three.js 场景（Scene），这是所有3D对象的容器。 ```javascript var scene = new THREE....
CesiumJs+ThreeJs实测
热门推荐
qq_36266612的博客
04-01 2万+
原帖：https://blog.csdn.net/zhishiqu/article/details/79077883 这篇帖子讲述了如何将cesium和threejs结合，但是如果跟着代码敲一遍，会发现并不能加载出threejs的模型。仔细跟着写了编，把遇到的坑做一下说明。 1.要注意threejs的版本。文中所用为r87版的threejs，尝试换成r92，r103，都找不到模型，这个问题后续再探...
threejs uv贴图
qq_36266612的博客
03-01 6435
原始贴图： 实现效果： //cube uv贴图 var cubeMaterial=new THREE.MeshPhongMaterial({map:THREE.ImageUtils.loadTexture('./img/building.jpg')}); let cubesizex=5.6225; let cubesizey=3; let cubesizez=4.2554; //计算的图片比...
threejs 摄像机沿特定轨迹飞行
qq_36266612的博客
03-21 5091
//获取当前camera位置 let camPosition=camera.position; //获取摄像机当前位置 let newPosition=new THREE.Vertex(1,50,-24); //设置目标位置 let curve=addLines(camPosition,newPosition).curve; //绘制贝塞尔曲线 //取...
threejs 通过两点生成贝塞尔曲线
qq_36266612的博客
03-21 4811
三阶贝塞尔曲线 function addLines(v0, v3) { // 计算向量夹角 let angle = v0.angleTo(v3) * 270 / Math.PI / 10; // 0 ~ Math.PI let aLen = angle * 50, hLen = angle * angle * 120; let p0 = new TH...
vue three.js批量添加标签
10-28
在Vue中使用Three.js批量添加标签，可以通过创建一个Vue组件来实现。首先需要在Vue组件中引入Three.js库和OrbitControls库，然后在组件的mounted钩子函数中创建场景、相机、渲染器等对象，并在场景中添加需要的标签。具体实现步骤如下： 1. 在Vue组件中引入Three.js库和OrbitControls库： ``` import * as THREE from 'three'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'; ``` 2. 在组件的mounted钩子函数中创建场景、相机、渲染器等对象： ``` mounted() { // 创建场景对象 this.scene = new THREE.Scene(); // 创建相机对象 this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); this.camera.position.set(0, 0, 5); // 创建渲染器对象 this.renderer = new THREE.WebGLRenderer({ antialias: true }); this.renderer.setSize(window.innerWidth, window.innerHeight); this.renderer.setClearColor(0xffffff, 1); // 将渲染器添加到页面中 this.$el.appendChild(this.renderer.domElement); // 创建控制器对象 this.controls = new OrbitControls(this.camera, this.renderer.domElement); this.controls.enableDamping = true; this.controls.dampingFactor = 0.25; this.controls.enableZoom = false; } ``` 3. 在场景中添加需要的标签： ``` addLabels() { // 循环添加标签 for (let i = 0; i < this.labels.length; i++) { const label = this.labels[i]; // 创建标签对象 const div = document.createElement('div'); div.className = 'label'; div.textContent = label.text; div.style.color = label.color; div.style.fontSize = label.fontSize + 'px'; const labelObject = new THREE.CSS2DObject(div); labelObject.position.set(label.position.x, label.position.y, label.position.z); // 将标签添加到场景中 this.scene.add(labelObject); } } ``` 其中，this.labels是一个数组，包含了需要添加的标签的信息，例如文本内容、颜色、字体大小和位置等。在循环中，创建一个div元素作为标签的内容，然后将其包装成CSS2DObject对象，并设置其位置，最后将其添加到场景中即可。
评论 13
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值