three.js 悬浮提示框

最新推荐文章于 2024-04-30 16:57:21 发布

花一样的阿衰

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量4.9k

点赞数 4

分类专栏：前端文章标签： javascript css css3

欢迎转载

本文链接：https://blog.csdn.net/qq_33242956/article/details/122716454

版权

前端专栏收录该内容

10 篇文章 1 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>div</title>
    <!-- <link rel="stylesheet" href="./style.css"> -->
    <style>
        .css_style {
            background-color: MidnightBlue;
            background-color: rgba(0, 10, 40);
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            opacity: 0.5;
            font-size: 4px;
            color: aqua;
            padding: 10px 10px 10px;
            white-space: nowrap;
        }

        .css_style:after {
            content: "";
            border-style: solid;
            border-top: 18px solid rgba(0, 10, 40);
            ;
            border-right: 8px solid transparent;
            border-bottom: 18px solid transparent;
            border-left: 8px solid transparent;
            /* border-left: 18px solid rgba(0, 10, 40); */
            ;
            position: absolute;
            /* left: 100%; */
            top: 100%;
            /* margin-top: 18px; */
            margin-right: 18px;
        }
    </style>
</head>

<body>
    <div id="WebGL-output">
        <div class="css_style" id="lableItem">
            <span class="css3dTitleWarning" id="lableTitleWarning">报警信息: 无异常</span>
            <br>
            <span class="css3dTitleWarning" id="lableTitleTemperature">温度: 37℃</span>
        </div>
    </div>

    <script type="module">
        import * as THREE from "../../../standard.libs/three.js/build/three.module.js"; /* three.js的module */
        import { OrbitControls } from '../../../standard.libs/three.js/examples/jsm/controls/OrbitControls.js';
        import { CSS3DRenderer, CSS3DObject } from '../../../standard.libs/three.js/examples/jsm/renderers/CSS3DRenderer.js';
        import { TWEEN } from '../../../standard.libs/three.js/examples/jsm/libs/tween.module.min.js';

        var scene, orbitControls, camera, renderer, labelRenderer;
        var frustumSize = 500;
        var cameraPos = new THREE.Vector3(200, 250, 500);
        let css3DObject;

        initScene();

        function initScene() {
            /* 构建场景对象 */
            scene = new THREE.Scene();
            scene.background = new THREE.Color(0x778899); /* 背景色 */

            /* 环境光, 环境光不能用来投射阴影，因为它没有方向 */
            var ambient = new THREE.AmbientLight(0xffffff, 1);
            scene.add(ambient);

            var point = new THREE.PointLight(0x666665);
            point.position.set(220, 330, 300); // 点光源位置
            scene.add(point); // 点光源添加到场景中

            var directionalLight = new THREE.DirectionalLight(0x777777, 0.5);
            scene.add(directionalLight);

            /* 创建一个坐标系 */
            var axisHelper = new THREE.AxesHelper(1000);
            scene.add(axisHelper);

            /* 相机 */
            var aspect = window.innerWidth / window.innerHeight;
            camera = new THREE.OrthographicCamera(frustumSize * aspect / - 2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / - 2, 1, 10000);
            camera.position.set(cameraPos.x, cameraPos.y, cameraPos.z); // 设置相机位置
            camera.lookAt(scene.position); // 设置相机方向(指向的场景对象)

            renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染区域尺寸
            document.body.appendChild(renderer.domElement); // body元素中插入canvas对象

            labelRenderer = new CSS3DRenderer();
            labelRenderer.setSize(window.innerWidth, window.innerHeight);
            labelRenderer.domElement.style.position = 'absolute';
            labelRenderer.domElement.style.top = '0px';
            document.body.appendChild(labelRenderer.domElement);

            orbitControls = new OrbitControls(camera, labelRenderer.domElement);
            orbitControls.update();

            labelRenderer.domElement.addEventListener("click", onMouseClick);

            addCSS3DLabelToScene();
            createGeometry();
        }

        function render() {
            // css3DObject.lookAt(camera.position);
            requestAnimationFrame(render); /* 周期性执行渲染函数animate */
            orbitControls.update();
            labelRenderer.render(scene, camera);
            renderer.render(scene, camera); /* 执行渲染 */
        };

        function createGeometry(params = 0) {
            var boxGeometry = new THREE.BoxGeometry(100, 100, 100); // 创建一个正方体几何对象
            var materialBox = new THREE.MeshLambertMaterial({
                color: 0x0000ff,
                opacity: 1,
                transparent: true
            }); // 材质对象Material
            var meshBox = new THREE.Mesh(boxGeometry, materialBox); // 网格模型对象Mesh
            meshBox.position.y = params;
            scene.add(meshBox); // 网格模型添加到场景中，未设定x/y/z坐标，默认位于坐标轴原点

            css3DObject.visible = true;
            css3DObject.position.x = meshBox.position.x - 50 + 18;
            css3DObject.position.y = meshBox.position.y + 50 + 38;
            css3DObject.position.z = meshBox.position.z;
        }

        function modifyDocument(id, color, value) {
            var dom = document.getElementById(id);
            dom.style.color = color;
            dom.textContent = value;
        }

        function addCSS3DLabelToScene() {
            var element = document.getElementById("WebGL-output");

            //把生成的CSSDOM对象处理成three的节点对象
            css3DObject = new CSS3DObject(element);
            //设置CSS3DObject对象
            css3DObject.position.x = 0;
            css3DObject.position.y = 0;
            css3DObject.position.z = 0;
            //在第二个场景中添加这个对象
            scene.add(css3DObject);
            // 默认不显示
            css3DObject.visible = false;
        }

        function onMouseClick(event) {
            console.log("===");
            const mousePoint = new THREE.Vector2();
            mousePoint.x = (event.clientX / window.innerWidth) * 2 - 1;
            mousePoint.y = -(event.clientY / window.innerHeight) * 2 + 1;
            const rayCaster = new THREE.Raycaster();
            rayCaster.setFromCamera(mousePoint, camera);
            let intersects = rayCaster.intersectObjects(scene.children, true);
            console.log(intersects);
            if (intersects.length > 0) {
                css3DObject.visible = true;
                css3DObject.position.x = intersects[0].object.position.x - 50 + 18;
                css3DObject.position.y = intersects[0].object.position.y + 50 + 38;
                css3DObject.position.z = intersects[0].object.position.z;


                modifyDocument("lableTitleWarning", "red", "报警信息: 温度过高");
                modifyDocument("lableTitleTemperature", "red", "温度: 120℃");
            } else {
                // css3DObject.visible = false;
            }
        }

        render();
    </script>
</body>

</html>

花一样的阿衰

关注

4
点赞
踩
17

收藏

觉得还不错? 一键收藏
3
评论
three.js 悬浮提示框

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>di
复制链接

扫一扫