threejs/editor/js/menus/Menubar.Models.js

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 };