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 () {

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