Hi everyone,
How can I drag the red Mesh object under OrthographicCamera?
This is the code of Menubar.Rack.js
import * as THREE from '../../build/three.module.js';
import { UIPanel, UIRow, UIHorizontalRule } from './libs/ui.js'; // UIHorizontalRule 為水平線
import { AmbientLight } from '../../../threejsEditor/src/lights/AmbientLight.js';
import { DirectionalLight } from '../../../threejsEditor/src/lights/DirectionalLight.js';
import { DragControls } from '../../examples/jsm/controls/DragControls.js';
function MenubarRack(editor, viewport) {
var strings = editor.strings;
var container = new UIPanel();
container.setClass('menu');
var title = new UIPanel();
title.setClass('title');
title.setTextContent(strings.getKey('menubar/rack')); //
container.add(title);
var options = new UIPanel();
options.setClass('options');
container.add(options);
// Initialize Default Camera Object
var _DEFAULT_CAMERA_RACK = editor.camera;
// _DEFAULT_CAMERA_RACK.uuid = '6EFH8931-382B-461V-D364-439SJRF9F0IO';
_DEFAULT_CAMERA_RACK.name = 'Camera_Rack';
// editor.execute( new SetValueCommand( editor, _DEFAULT_CAMERA_RACK, 'name', 'Camera_Rac' ) );
_DEFAULT_CAMERA_RACK.position.set(0, 300, 400);
_DEFAULT_CAMERA_RACK.far = 3000;
_DEFAULT_CAMERA_RACK.lookAt(new THREE.Vector3());
// Initialize loading orthographic camera 由 Y 軸俯視由上而下看,只能移動 X 軸和 Z 軸
var _DEFAULT_CAMERA_Y = new THREE.OrthographicCamera(-450, 450, 580, 100, 0.1, 2000);
// _DEFAULT_CAMERA_Y.uuid = '4EFF8938-492A-461E-B364-433FDEF9F0CE';
_DEFAULT_CAMERA_Y.name = 'CameraTest_Y';
_DEFAULT_CAMERA_Y.position.set(0, 780, 340);
_DEFAULT_CAMERA_Y.rotation.x = -(Math.PI / 2);
editor.addCamera(_DEFAULT_CAMERA_Y);
editor.execute(new AddObjectCommand(editor, _DEFAULT_CAMERA_Y));
// Initialize loading lights
const ambientLight = new AmbientLight(0x222222, 1);
const directionalLight = new DirectionalLight(0xffffff, 1.1);
directionalLight.position.set(100, 100, 100);
ambientLight.name = 'AmbientLight';
directionalLight.name = 'DirectionalLight';
editor.execute(new AddObjectCommand(editor, ambientLight));
editor.execute(new AddObjectCommand(editor, directionalLight));
// Initialize Default Room Object
var geometry = new THREE.BoxBufferGeometry(15, 0.1, 8, 1, 1, 1);
var defultroom = new THREE.Mesh(geometry, new THREE.MeshStandardMaterial({ color: '#18ECFB' }));
defultroom.name = 'DefualtRoom';
defultroom.position.set(0, 0, 0);
defultroom.scale.set(50, 50, 50);
defultroom.material.transparent = true;
defultroom.material.opacity = 0.3;
editor.execute(new AddObjectCommand(editor, defultroom));
// Initialize Rack Object (test)
var geometry = new THREE.BoxBufferGeometry(2, 1, 2, 1, 1, 1);
var defaultrack = new THREE.Mesh(geometry, new THREE.MeshStandardMaterial({ color: 'rgb(255, 0, 0)' }));
defaultrack.name = 'TestRack';
defaultrack.position.set(0, 0, 0);
defaultrack.scale.set(50, 50, 50);
editor.execute(new AddObjectCommand(editor, defaultrack));
// 測試跳轉
var option = new UIRow();
option.setClass('option');
option.setTextContent(strings.getKey('menubar/rack/test'));
option.onClick(function () {
window.location.assign("../../EditorRoomTest.php");// 跳轉回到模式切換測試頁面
});
options.add(option);
var objects = [];
objects.push(defaultrack);
var renderer = new THREE.WebGLRenderer({ antialias: true });
var controls = new DragControls(objects, _DEFAULT_CAMERA_Y, renderer.domElement);
controls.addEventListener('drag', render);
controls.addEventListener('dragstart', function (event) {
event.object.material.emissive.set(0xaaaaaa);
});
controls.addEventListener('dragend', function (event) {
event.object.material.emissive.set(0x000000);
});
console.log('Menubar.Rack.js controls: ', controls);
console.log('Menubar.Rack.js viewport.dom: ', viewport.dom);
function render() {
renderer.render(scene, _DEFAULT_CAMERA_Y);
}
return container;
}
export { MenubarRack };
This is the code of Menubar.js
import { UIPanel } from './libs/ui.js';
import { MenubarAdd } from './Menubar.Add.js';
import { MenubarEdit } from './Menubar.Edit.js';
import { MenubarFile } from './Menubar.File.js';
import { MenubarExamples } from './Menubar.Examples.js';
import { MenubarHelp } from './Menubar.Help.js';
import { MenubarPlay } from './Menubar.Play.js';
import { MenubarStatus } from './Menubar.Status.js';
import { MenubarRack } from './Menubar.Rack.js';
function Menubar( editor,viewport) {
var container = new UIPanel();
container.setId( 'menubar' );
container.add( new MenubarFile( editor ) );
container.add( new MenubarEdit( editor ) );
container.add( new MenubarRack( editor ,viewport) );
container.add( new MenubarStatus( editor ) );
return container;
}
export { Menubar };