three.js 悬浮提示框_哈哈一笑_three提示

未知 02-07 4704

<!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>  <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>