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.
480 lines
12 KiB
480 lines
12 KiB
import * as THREE from 'three';
|
|
|
|
import { UIPanel, UIRow, UIHorizontalRule } from '../libs/ui.js';
|
|
|
|
import { AddObjectCommand } from '../commands/AddObjectCommand.js';
|
|
|
|
function MenubarAdd( editor ) {
|
|
|
|
const strings = editor.strings;
|
|
|
|
const container = new UIPanel();
|
|
container.setClass( 'menu' );
|
|
|
|
const title = new UIPanel();
|
|
title.setClass( 'title' );
|
|
title.setTextContent( strings.getKey( 'menubar/add' ) );
|
|
container.add( title );
|
|
|
|
const options = new UIPanel();
|
|
options.setClass( 'options' );
|
|
container.add( options );
|
|
|
|
// Group
|
|
|
|
let option = new UIRow();
|
|
option.setClass( 'option' );
|
|
option.setTextContent( strings.getKey( 'menubar/add/group' ) );
|
|
option.onClick( function () {
|
|
|
|
const mesh = new THREE.Group();
|
|
mesh.name = 'Group';
|
|
|
|
editor.execute( new AddObjectCommand( editor, mesh ) );
|
|
|
|
} );
|
|
options.add( option );
|
|
|
|
//
|
|
|
|
options.add( new UIHorizontalRule() );
|
|
|
|
// Box
|
|
|
|
option = new UIRow();
|
|
option.setClass( 'option' );
|
|
option.setTextContent( strings.getKey( 'menubar/add/box' ) );
|
|
option.onClick( function () {
|
|
|
|
const geometry = new THREE.BoxGeometry( 1, 1, 1, 1, 1, 1 );
|
|
const mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
|
|
mesh.name = 'Box';
|
|
|
|
editor.execute( new AddObjectCommand( editor, mesh ) );
|
|
|
|
} );
|
|
options.add( option );
|
|
|
|
// Capsule
|
|
|
|
option = new UIRow();
|
|
option.setClass( 'option' );
|
|
option.setTextContent( strings.getKey( 'menubar/add/capsule' ) );
|
|
option.onClick( function () {
|
|
|
|
const geometry = new THREE.CapsuleGeometry( 1, 1, 4, 8 );
|
|
const material = new THREE.MeshStandardMaterial();
|
|
const mesh = new THREE.Mesh( geometry, material );
|
|
mesh.name = 'Capsule';
|
|
|
|
editor.execute( new AddObjectCommand( editor, mesh ) );
|
|
|
|
} );
|
|
options.add( option );
|
|
|
|
// Circle
|
|
|
|
option = new UIRow();
|
|
option.setClass( 'option' );
|
|
option.setTextContent( strings.getKey( 'menubar/add/circle' ) );
|
|
option.onClick( function () {
|
|
|
|
const geometry = new THREE.CircleGeometry( 1, 8, 0, Math.PI * 2 );
|
|
const mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
|
|
mesh.name = 'Circle';
|
|
|
|
editor.execute( new AddObjectCommand( editor, mesh ) );
|
|
|
|
} );
|
|
options.add( option );
|
|
|
|
// Cylinder
|
|
|
|
option = new UIRow();
|
|
option.setClass( 'option' );
|
|
option.setTextContent( strings.getKey( 'menubar/add/cylinder' ) );
|
|
option.onClick( function () {
|
|
|
|
const geometry = new THREE.CylinderGeometry( 1, 1, 1, 8, 1, false, 0, Math.PI * 2 );
|
|
const mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
|
|
mesh.name = 'Cylinder';
|
|
|
|
editor.execute( new AddObjectCommand( editor, mesh ) );
|
|
|
|
} );
|
|
options.add( option );
|
|
|
|
// Dodecahedron
|
|
|
|
option = new UIRow();
|
|
option.setClass( 'option' );
|
|
option.setTextContent( strings.getKey( 'menubar/add/dodecahedron' ) );
|
|
option.onClick( function () {
|
|
|
|
const geometry = new THREE.DodecahedronGeometry( 1, 0 );
|
|
const mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
|
|
mesh.name = 'Dodecahedron';
|
|
|
|
editor.execute( new AddObjectCommand( editor, mesh ) );
|
|
|
|
} );
|
|
options.add( option );
|
|
|
|
// Icosahedron
|
|
|
|
option = new UIRow();
|
|
option.setClass( 'option' );
|
|
option.setTextContent( strings.getKey( 'menubar/add/icosahedron' ) );
|
|
option.onClick( function () {
|
|
|
|
const geometry = new THREE.IcosahedronGeometry( 1, 0 );
|
|
const mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
|
|
mesh.name = 'Icosahedron';
|
|
|
|
editor.execute( new AddObjectCommand( editor, mesh ) );
|
|
|
|
} );
|
|
options.add( option );
|
|
|
|
// Lathe
|
|
|
|
option = new UIRow();
|
|
option.setClass( 'option' );
|
|
option.setTextContent( strings.getKey( 'menubar/add/lathe' ) );
|
|
option.onClick( function () {
|
|
|
|
const geometry = new THREE.LatheGeometry();
|
|
const mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial( { side: THREE.DoubleSide } ) );
|
|
mesh.name = 'Lathe';
|
|
|
|
editor.execute( new AddObjectCommand( editor, mesh ) );
|
|
|
|
} );
|
|
options.add( option );
|
|
|
|
// Octahedron
|
|
|
|
option = new UIRow();
|
|
option.setClass( 'option' );
|
|
option.setTextContent( strings.getKey( 'menubar/add/octahedron' ) );
|
|
option.onClick( function () {
|
|
|
|
const geometry = new THREE.OctahedronGeometry( 1, 0 );
|
|
const mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
|
|
mesh.name = 'Octahedron';
|
|
|
|
editor.execute( new AddObjectCommand( editor, mesh ) );
|
|
|
|
} );
|
|
options.add( option );
|
|
|
|
// Plane
|
|
|
|
option = new UIRow();
|
|
option.setClass( 'option' );
|
|
option.setTextContent( strings.getKey( 'menubar/add/plane' ) );
|
|
option.onClick( function () {
|
|
|
|
const geometry = new THREE.PlaneGeometry( 1, 1, 1, 1 );
|
|
const material = new THREE.MeshStandardMaterial();
|
|
const mesh = new THREE.Mesh( geometry, material );
|
|
mesh.name = 'Plane';
|
|
|
|
editor.execute( new AddObjectCommand( editor, mesh ) );
|
|
|
|
} );
|
|
options.add( option );
|
|
|
|
// Ring
|
|
|
|
option = new UIRow();
|
|
option.setClass( 'option' );
|
|
option.setTextContent( strings.getKey( 'menubar/add/ring' ) );
|
|
option.onClick( function () {
|
|
|
|
const geometry = new THREE.RingGeometry( 0.5, 1, 8, 1, 0, Math.PI * 2 );
|
|
const mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
|
|
mesh.name = 'Ring';
|
|
|
|
editor.execute( new AddObjectCommand( editor, mesh ) );
|
|
|
|
} );
|
|
options.add( option );
|
|
|
|
// Sphere
|
|
|
|
option = new UIRow();
|
|
option.setClass( 'option' );
|
|
option.setTextContent( strings.getKey( 'menubar/add/sphere' ) );
|
|
option.onClick( function () {
|
|
|
|
const geometry = new THREE.SphereGeometry( 1, 32, 16, 0, Math.PI * 2, 0, Math.PI );
|
|
const mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
|
|
mesh.name = 'Sphere';
|
|
|
|
editor.execute( new AddObjectCommand( editor, mesh ) );
|
|
|
|
} );
|
|
options.add( option );
|
|
|
|
// Sprite
|
|
|
|
option = new UIRow();
|
|
option.setClass( 'option' );
|
|
option.setTextContent( strings.getKey( 'menubar/add/sprite' ) );
|
|
option.onClick( function () {
|
|
|
|
const sprite = new THREE.Sprite( new THREE.SpriteMaterial() );
|
|
sprite.name = 'Sprite';
|
|
|
|
editor.execute( new AddObjectCommand( editor, sprite ) );
|
|
|
|
} );
|
|
options.add( option );
|
|
|
|
// Tetrahedron
|
|
|
|
option = new UIRow();
|
|
option.setClass( 'option' );
|
|
option.setTextContent( strings.getKey( 'menubar/add/tetrahedron' ) );
|
|
option.onClick( function () {
|
|
|
|
const geometry = new THREE.TetrahedronGeometry( 1, 0 );
|
|
const mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
|
|
mesh.name = 'Tetrahedron';
|
|
|
|
editor.execute( new AddObjectCommand( editor, mesh ) );
|
|
|
|
} );
|
|
options.add( option );
|
|
|
|
// Torus
|
|
|
|
option = new UIRow();
|
|
option.setClass( 'option' );
|
|
option.setTextContent( strings.getKey( 'menubar/add/torus' ) );
|
|
option.onClick( function () {
|
|
|
|
const geometry = new THREE.TorusGeometry( 1, 0.4, 8, 6, Math.PI * 2 );
|
|
const mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
|
|
mesh.name = 'Torus';
|
|
|
|
editor.execute( new AddObjectCommand( editor, mesh ) );
|
|
|
|
} );
|
|
options.add( option );
|
|
|
|
// TorusKnot
|
|
|
|
option = new UIRow();
|
|
option.setClass( 'option' );
|
|
option.setTextContent( strings.getKey( 'menubar/add/torusknot' ) );
|
|
option.onClick( function () {
|
|
|
|
const geometry = new THREE.TorusKnotGeometry( 1, 0.4, 64, 8, 2, 3 );
|
|
const mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
|
|
mesh.name = 'TorusKnot';
|
|
|
|
editor.execute( new AddObjectCommand( editor, mesh ) );
|
|
|
|
} );
|
|
options.add( option );
|
|
|
|
// Tube
|
|
|
|
option = new UIRow();
|
|
option.setClass( 'option' );
|
|
option.setTextContent( strings.getKey( 'menubar/add/tube' ) );
|
|
option.onClick( function () {
|
|
|
|
const path = new THREE.CatmullRomCurve3( [
|
|
new THREE.Vector3( 2, 2, - 2 ),
|
|
new THREE.Vector3( 2, - 2, - 0.6666666666666667 ),
|
|
new THREE.Vector3( - 2, - 2, 0.6666666666666667 ),
|
|
new THREE.Vector3( - 2, 2, 2 )
|
|
] );
|
|
|
|
const geometry = new THREE.TubeGeometry( path, 64, 1, 8, false );
|
|
const mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
|
|
mesh.name = 'Tube';
|
|
|
|
editor.execute( new AddObjectCommand( editor, mesh ) );
|
|
|
|
} );
|
|
options.add( option );
|
|
|
|
/*
|
|
// Teapot
|
|
|
|
option = new UIRow();
|
|
option.setClass( 'option' );
|
|
option.setTextContent( 'Teapot' );
|
|
option.onClick( function () {
|
|
|
|
let size = 50;
|
|
let segments = 10;
|
|
let bottom = true;
|
|
let lid = true;
|
|
let body = true;
|
|
let fitLid = false;
|
|
let blinnScale = true;
|
|
|
|
let material = new THREE.MeshStandardMaterial();
|
|
|
|
let geometry = new TeapotGeometry( size, segments, bottom, lid, body, fitLid, blinnScale );
|
|
let mesh = new THREE.Mesh( geometry, material );
|
|
mesh.name = 'Teapot';
|
|
|
|
editor.addObject( mesh );
|
|
editor.select( mesh );
|
|
|
|
} );
|
|
options.add( option );
|
|
*/
|
|
|
|
//
|
|
|
|
options.add( new UIHorizontalRule() );
|
|
|
|
// AmbientLight
|
|
|
|
option = new UIRow();
|
|
option.setClass( 'option' );
|
|
option.setTextContent( strings.getKey( 'menubar/add/ambientlight' ) );
|
|
option.onClick( function () {
|
|
|
|
const color = 0x222222;
|
|
|
|
const light = new THREE.AmbientLight( color );
|
|
light.name = 'AmbientLight';
|
|
|
|
editor.execute( new AddObjectCommand( editor, light ) );
|
|
|
|
} );
|
|
options.add( option );
|
|
|
|
// DirectionalLight
|
|
|
|
option = new UIRow();
|
|
option.setClass( 'option' );
|
|
option.setTextContent( strings.getKey( 'menubar/add/directionallight' ) );
|
|
option.onClick( function () {
|
|
|
|
const color = 0xffffff;
|
|
const intensity = 1;
|
|
|
|
const light = new THREE.DirectionalLight( color, intensity );
|
|
light.name = 'DirectionalLight';
|
|
light.target.name = 'DirectionalLight Target';
|
|
|
|
light.position.set( 5, 10, 7.5 );
|
|
|
|
editor.execute( new AddObjectCommand( editor, light ) );
|
|
|
|
} );
|
|
options.add( option );
|
|
|
|
// HemisphereLight
|
|
|
|
option = new UIRow();
|
|
option.setClass( 'option' );
|
|
option.setTextContent( strings.getKey( 'menubar/add/hemispherelight' ) );
|
|
option.onClick( function () {
|
|
|
|
const skyColor = 0x00aaff;
|
|
const groundColor = 0xffaa00;
|
|
const intensity = 1;
|
|
|
|
const light = new THREE.HemisphereLight( skyColor, groundColor, intensity );
|
|
light.name = 'HemisphereLight';
|
|
|
|
light.position.set( 0, 10, 0 );
|
|
|
|
editor.execute( new AddObjectCommand( editor, light ) );
|
|
|
|
} );
|
|
options.add( option );
|
|
|
|
// PointLight
|
|
|
|
option = new UIRow();
|
|
option.setClass( 'option' );
|
|
option.setTextContent( strings.getKey( 'menubar/add/pointlight' ) );
|
|
option.onClick( function () {
|
|
|
|
const color = 0xffffff;
|
|
const intensity = 1;
|
|
const distance = 0;
|
|
|
|
const light = new THREE.PointLight( color, intensity, distance );
|
|
light.name = 'PointLight';
|
|
|
|
editor.execute( new AddObjectCommand( editor, light ) );
|
|
|
|
} );
|
|
options.add( option );
|
|
|
|
// SpotLight
|
|
|
|
option = new UIRow();
|
|
option.setClass( 'option' );
|
|
option.setTextContent( strings.getKey( 'menubar/add/spotlight' ) );
|
|
option.onClick( function () {
|
|
|
|
const color = 0xffffff;
|
|
const intensity = 1;
|
|
const distance = 0;
|
|
const angle = Math.PI * 0.1;
|
|
const penumbra = 0;
|
|
|
|
const light = new THREE.SpotLight( color, intensity, distance, angle, penumbra );
|
|
light.name = 'SpotLight';
|
|
light.target.name = 'SpotLight Target';
|
|
|
|
light.position.set( 5, 10, 7.5 );
|
|
|
|
editor.execute( new AddObjectCommand( editor, light ) );
|
|
|
|
} );
|
|
options.add( option );
|
|
|
|
//
|
|
|
|
options.add( new UIHorizontalRule() );
|
|
|
|
// OrthographicCamera
|
|
|
|
option = new UIRow();
|
|
option.setClass( 'option' );
|
|
option.setTextContent( strings.getKey( 'menubar/add/orthographiccamera' ) );
|
|
option.onClick( function () {
|
|
|
|
const aspect = editor.camera.aspect;
|
|
const camera = new THREE.OrthographicCamera( - aspect, aspect );
|
|
camera.name = 'OrthographicCamera';
|
|
|
|
editor.execute( new AddObjectCommand( editor, camera ) );
|
|
|
|
} );
|
|
options.add( option );
|
|
|
|
// PerspectiveCamera
|
|
|
|
option = new UIRow();
|
|
option.setClass( 'option' );
|
|
option.setTextContent( strings.getKey( 'menubar/add/perspectivecamera' ) );
|
|
option.onClick( function () {
|
|
|
|
const camera = new THREE.PerspectiveCamera();
|
|
camera.name = 'PerspectiveCamera';
|
|
|
|
editor.execute( new AddObjectCommand( editor, camera ) );
|
|
|
|
} );
|
|
options.add( option );
|
|
|
|
return container;
|
|
|
|
}
|
|
|
|
export { MenubarAdd };
|
|
|