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.
303 lines
7.6 KiB
303 lines
7.6 KiB
|
|
import * as THREE from 'three';
|
|
|
|
import { UIPanel, UIRow, UIHorizontalRule } from '../libs/ui.js';
|
|
|
|
import { AddObjectCommand } from '../commands/AddObjectCommand.js';
|
|
import { AddLableCommand } from '../commands/AddLableCommand.js';
|
|
import { GLTFLoader } from '/examples/jsm/loaders/GLTFLoader.js';
|
|
import { FBXLoader } from '/examples/jsm/loaders/FBXLoader.js';
|
|
import { OBJLoader } from '/examples/jsm/loaders/OBJLoader.js'; //引入obj模型加载库OBJLoader.js
|
|
import { FontLoader } from '/examples/jsm/loaders/FontLoader.js';
|
|
import { TextGeometry } from '/examples/jsm/geometries/TextGeometry.js';
|
|
import { CSS2DRenderer, CSS2DObject } from '/examples/jsm/renderers/CSS2DRenderer.js';
|
|
// MTLLoader
|
|
// } from 'three/examples/jsm/loaders/MTLLoader'; //引入mtl模型加载库MTLLoader.js
|
|
function MenubarModels(editor) {
|
|
const EARTH_RADIUS = 1;
|
|
const strings = editor.strings;
|
|
|
|
const container = new UIPanel();
|
|
container.setClass('menu');
|
|
|
|
const title = new UIPanel();
|
|
title.setClass('title');
|
|
title.setTextContent(strings.getKey('menubar/models'));
|
|
container.add(title);
|
|
|
|
const options = new UIPanel();
|
|
options.setClass('options');
|
|
container.add(options);
|
|
|
|
|
|
const loader = new THREE.FileLoader();
|
|
const fbxloader = new FBXLoader();
|
|
const gltfloader = new GLTFLoader();
|
|
|
|
|
|
let i = 0;
|
|
|
|
// Source code
|
|
|
|
let option = new UIRow();
|
|
option.setClass('option');
|
|
option.setTextContent(strings.getKey('menubar/models/addcamera'));
|
|
option.onClick(function () {
|
|
|
|
// editor.loader.loadFiles( "/editor/models/floor.fbx" );
|
|
// gltfloader.load("/editor/models/camera.gltf", function (object) {
|
|
|
|
// let obj = object.scene.children[0];
|
|
// obj.name = 'camera' + i++
|
|
// obj.userData = { type: "camera", name: "camera" }
|
|
// debugger
|
|
// // object.url="url"
|
|
// editor.execute(new AddObjectCommand(editor, obj));
|
|
|
|
|
|
// });
|
|
fbxloader.load("/editor/models/camera.fbx", function (object) {
|
|
|
|
let obj = object.children[0];
|
|
|
|
obj.name = '视频监控' + i++
|
|
obj.userData = { type: "monitoring", name: "视频监控" }
|
|
obj.scale.x = 0.08
|
|
obj.scale.y = 0.08
|
|
obj.scale.z = 0.08
|
|
// object.url="url"
|
|
editor.execute(new AddObjectCommand(editor, obj));
|
|
|
|
|
|
});
|
|
|
|
});
|
|
options.add(option);
|
|
|
|
|
|
|
|
option = new UIRow();
|
|
option.setClass('option');
|
|
option.setTextContent(strings.getKey('menubar/models/addboard'));
|
|
var loaderobj = new OBJLoader()
|
|
option.onClick(function () {
|
|
|
|
//editor.loader.loadFiles("/editor/models/002.obj");
|
|
// editor.loader.loadFiles( "/editor/models/floor.fbx" );
|
|
loaderobj.load("/editor/models/002.obj", function (obj) {
|
|
|
|
debugger
|
|
var scale = 0.08
|
|
obj.name = 'camera' + i++
|
|
// obj.userData.isDevice = true
|
|
obj.typeex = "camera"
|
|
obj.scale.set(scale, scale, scale)
|
|
|
|
// obj._default = getDefaultStatus(obj)
|
|
|
|
editor.execute(new AddObjectCommand(editor, obj))
|
|
// editor.addObject(obj)
|
|
});
|
|
|
|
});
|
|
options.add(option);
|
|
|
|
// Manual
|
|
|
|
option = new UIRow();
|
|
option.setClass('option');
|
|
option.setTextContent(strings.getKey('menubar/models/adddata'));
|
|
option.onClick(function () {
|
|
|
|
editor.loader.loadFiles("");
|
|
|
|
});
|
|
options.add(option);
|
|
// Manual
|
|
|
|
option = new UIRow();
|
|
option.setClass('option');
|
|
option.setTextContent(strings.getKey('menubar/models/addlable'));
|
|
option.onClick(function () {
|
|
|
|
// debugger
|
|
// return;
|
|
|
|
let selectobj = editor.selected;
|
|
// if (!!!selectobj) {
|
|
// alert("none");
|
|
// return;
|
|
// }
|
|
add2dlable(selectobj, "abc");
|
|
// selectobj.layers.enableAll();
|
|
// debugger
|
|
// const moonDiv = document.createElement('div');
|
|
// moonDiv.className = 'label';
|
|
|
|
// moonDiv.textContent = 'Moon11111111111111111';
|
|
// moonDiv.style.marginTop = '-1em';
|
|
// let moonLabel = new CSS2DObject(moonDiv);
|
|
// moonLabel.name = "label1"
|
|
// moonLabel.userData={"name":"lable", "type":"autolable"}
|
|
// moonLabel.position.set(0, 0, 0);
|
|
// selectobj.add(moonLabel);
|
|
|
|
// moonLabel.layers.set(1);
|
|
// createText(editor, "abc");
|
|
|
|
// AddSceneTextCSS2DLabel(selectobj);
|
|
|
|
});
|
|
options.add(option);
|
|
|
|
|
|
option = new UIRow();
|
|
option.setClass('option');
|
|
option.setTextContent('数据');//strings.getKey('menubar/models/addlable'));
|
|
option.onClick(function () {
|
|
|
|
|
|
//create a blue LineBasicMaterial
|
|
const csslable = AddCSSLabel();
|
|
editor.execute(new AddObjectCommand(editor, csslable));
|
|
|
|
});
|
|
options.add(option)
|
|
|
|
|
|
// options.add(option);
|
|
|
|
|
|
// option = new UIRow();
|
|
// option.setClass('option');
|
|
// option.setTextContent('划线');//strings.getKey('menubar/models/addlable'));
|
|
// option.onClick(function () {
|
|
|
|
|
|
// //create a blue LineBasicMaterial
|
|
// const material = new THREE.LineBasicMaterial({ color: 0x0000ff });
|
|
|
|
|
|
// const points = [];
|
|
// points.push(new THREE.Vector3(- 10, 0, 0));
|
|
// points.push(new THREE.Vector3(0, 10, 0));
|
|
// points.push(new THREE.Vector3(10, 0, 0));
|
|
|
|
// const geometry = new THREE.BufferGeometry().setFromPoints(points);
|
|
|
|
// const line = new THREE.Line(geometry, material);
|
|
|
|
// editor.execute(new AddObjectCommand(editor, line));
|
|
|
|
// });
|
|
// options.add(option)
|
|
|
|
return container;
|
|
|
|
}
|
|
|
|
function add2dlable(parent, text) {
|
|
let labelCanvas = getTextCanvas(text);
|
|
const labelTexture = new THREE.Texture(labelCanvas);
|
|
labelTexture.magFilter = THREE.LinearFilter;
|
|
labelTexture.minFilter = THREE.LinearFilter;
|
|
labelTexture.needsUpdate = true;
|
|
|
|
const labelMaterial = new THREE.MeshBasicMaterial({
|
|
map: labelTexture,
|
|
side: THREE.DoubleSide
|
|
});
|
|
labelMaterial.transparent = true;
|
|
const labelPlane = new THREE.PlaneGeometry(labelCanvas.width, labelCanvas.height);
|
|
|
|
let labelMesh = new THREE.Mesh(labelPlane, labelMaterial);
|
|
labelMesh.name = '标签'
|
|
labelMesh.scale.set(0.01, 0.01, 0.01);
|
|
if (parent) {
|
|
parent.add(labelMesh)
|
|
} else {
|
|
|
|
editor.execute(new AddLableCommand(editor, labelMesh));
|
|
}
|
|
|
|
}
|
|
function getTextCanvas(text, fontcolor = 'rgba( 0, 0, 0, 1 )') {
|
|
var width = text.length*26, height = 22;
|
|
var canvas = document.createElement('canvas');
|
|
canvas.width = width;
|
|
canvas.height = height;
|
|
var ctx = canvas.getContext('2d');
|
|
|
|
ctx.font = 20 + 'px " bold ';
|
|
ctx.fillStyle = fontcolor
|
|
ctx.textAlign = 'center';
|
|
ctx.textBaseline = 'middle';
|
|
ctx.fillText(text, width/2 , height/2);
|
|
return canvas;
|
|
}
|
|
|
|
function AddCSSLabel() {
|
|
|
|
const labelDiv = document.createElement('div');
|
|
labelDiv.className = 'label';
|
|
labelDiv.name = "csslabeldiv"
|
|
labelDiv.textContent = '中国11';
|
|
|
|
labelDiv.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件
|
|
const moonLabel = new CSS2DObject(labelDiv);
|
|
moonLabel.position.set(0, 1, 0);
|
|
moonLabel.name = "datalabel"
|
|
moonLabel.userData = { name: "datalable", id: "", url: "" }
|
|
return moonLabel;
|
|
|
|
}
|
|
|
|
|
|
|
|
function createText(editor, text) {
|
|
const height = 20,
|
|
size = 10,
|
|
hover = 30,
|
|
|
|
curveSegments = 1,
|
|
|
|
bevelThickness = 1,
|
|
bevelEnabled = true,
|
|
bevelSize = 0.5;
|
|
let materials = [
|
|
new THREE.MeshPhongMaterial({ color: 0xfff000, flatShading: true }), // front
|
|
new THREE.MeshPhongMaterial({ color: 0xffffff }) // side
|
|
];
|
|
const loader = new FontLoader();
|
|
loader.load('/examples/fonts/helvetiker_regular.typeface.json', function (font) {
|
|
let textGeo = new TextGeometry(text, {
|
|
|
|
font: font,
|
|
|
|
size: size,
|
|
height: height,
|
|
curveSegments: curveSegments,
|
|
|
|
bevelThickness: bevelThickness,
|
|
bevelSize: bevelSize,
|
|
bevelEnabled: bevelEnabled
|
|
|
|
});
|
|
|
|
textGeo.computeBoundingBox();
|
|
|
|
const centerOffset = - 0.5 * (textGeo.boundingBox.max.x - textGeo.boundingBox.min.x);
|
|
|
|
let textMesh1 = new THREE.Mesh(textGeo, materials);
|
|
|
|
textMesh1.position.x = centerOffset;
|
|
textMesh1.position.y = hover;
|
|
textMesh1.position.z = 0;
|
|
|
|
textMesh1.rotation.x = 0;
|
|
textMesh1.rotation.y = Math.PI * 2;
|
|
|
|
editor.addObject(textMesh1);
|
|
})
|
|
}
|
|
export { MenubarModels };
|
|
|