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.
255 lines
6.6 KiB
255 lines
6.6 KiB
|
|
import * as THREE from 'three';
|
|
|
|
import { UIPanel, UIRow, UIHorizontalRule } from '../libs/ui.js';
|
|
|
|
import { AddObjectCommand } from '../commands/AddObjectCommand.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));
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
|
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 () {
|
|
|
|
add2dlable("中国");
|
|
return ;
|
|
|
|
let selectobj = editor.selected;
|
|
if (!!!selectobj) {
|
|
alert("none");
|
|
return;
|
|
}
|
|
// 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 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);
|
|
editor.execute(new AddObjectCommand(editor, labelMesh));
|
|
}
|
|
|
|
function AddSceneTextCSS2DLabel(obj) {
|
|
|
|
|
|
const labelDiv = document.createElement('div');
|
|
labelDiv.className = 'label';
|
|
labelDiv.identifierName = 'label';
|
|
labelDiv.textContent = '显示内容 Test ...';
|
|
labelDiv.style.marginTop = '-1em';
|
|
const css2dLabel = new CSS2DObject(labelDiv);
|
|
css2dLabel.position.set(0, 1, 0);
|
|
labelDiv.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件
|
|
css2dLabel.name = 'CSS2DLabel';
|
|
obj.add(css2dLabel);
|
|
|
|
editor.signals.render.dispatch();
|
|
|
|
}
|
|
|
|
|
|
|
|
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 };
|
|
|