import { CSS2DRenderer, CSS2DObject } from 'jsm/renderers/CSS2DRenderer.js'; export default { createButton: function (obj, perent, i) { const btnDiv = document.createElement('button'); btnDiv.className = 'btn'; btnDiv.identifierName = 'btn'; btnDiv.textContent = 'Btn: Click ...'; btnDiv.style.marginTop = '-1em'; btnDiv.style.zIndex = 1000; const css2dBtn = new CSS2DObject(btnDiv); css2dBtn.position.set(obj.x + 2, obj.y, obj.z); css2dBtn.name = "datalabel" + i; css2dBtn.userData = { name: "datalable", id: "", url: "" } // css2DLabelList.add(css2DLabel); window.scene.add(css2dBtn); }, //创建标签 createCSSLabel: function (text, x = 0, y = 0, z = 0, className = 'label') { const labelDiv = document.createElement('div'); labelDiv.className = className; labelDiv.name = "csslabeldiv" labelDiv.textContent = text; labelDiv.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件 const css2DLabel = new CSS2DObject(labelDiv); css2DLabel.position.set(x, y, z); css2DLabel.name = "datalabel" css2DLabel.userData = { name: "datalable", id: "", url: "" } return css2DLabel; }, create3dPage: function (scene, w, h, position, rotation, url) { var plane = this.createPlane( w, h, position, rotation); scene.add(plane); var cssObject = this.createCssObject( w, h, position, rotation, url); scene.add(cssObject); }, createPlane: function (w, h, position, rotation) { var material = new THREE.MeshBasicMaterial({ color: 0x000000, opacity: 0.0, side: THREE.DoubleSide }); var geometry = new THREE.PlaneGeometry(w, h); var mesh = new THREE.Mesh(geometry, material); mesh.position.x = position.x; mesh.position.y = position.y; mesh.position.z = position.z; mesh.rotation.x = rotation.x; mesh.rotation.y = rotation.y; mesh.rotation.z = rotation.z; mesh.scale.set(0.003, 0.003, 0.003); return mesh; }, createCssObject: function (w, h, position, rotation, url) { var iframe = document.createElement('iframe') iframe.src = url; iframe.style.width = w + 'px'; iframe.style.height = h + 'px'; iframe.style.border = '0px'; // const iframe = document.createElement('div'); // // iframe.className = 'className'; // iframe.name = "csslabeldiv" // iframe.textContent = '测试11111'; // iframe.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件 var cssObject = new CSS2DObject(iframe); cssObject.position.x = position.x; cssObject.position.y = position.y; cssObject.position.z = position.z; cssObject.rotation.x = rotation.x; cssObject.rotation.y = rotation.y; cssObject.rotation.z = rotation.z; cssObject.scale.set(0.003, 0.003, 0.003); return cssObject; } }