You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
107 lines
3.2 KiB
107 lines
3.2 KiB
|
|
import { CSS3DRenderer, CSS3DObject } from 'jsm/renderers/CSS3DRenderer.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 CSS3DObject(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 CSS3DObject(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 CSS3DObject(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;
|
|
}
|
|
}
|