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 () { // return; let selectobj = editor.selected; if (!!!selectobj) { alert("none"); return; } add2dlable("中国"); // 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(text) { let labelCanvas = document.createElement('canvas'); const context = labelCanvas.getContext('2d'); context.font = 'Bold 20px Arial'; const labelWidth = context.measureText(text).width; labelCanvas.width = labelWidth; labelCanvas.height = 25; //25 to account for g, p, etc. context.font = 'Bold 20px Arial'; context.fillStyle = 'rgba( 255, 0, 0, 1 )'; context.fillText(text, 0, 20); 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 = '标签' editor.execute(new AddLableCommand(editor, labelMesh)); } 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 };