/** * @author mrdoob / http://mrdoob.com/ */ import { AmbientLight, BoxBufferGeometry, CatmullRomCurve3, CircleBufferGeometry, CylinderBufferGeometry, DirectionalLight, DodecahedronBufferGeometry, DoubleSide, HemisphereLight, IcosahedronBufferGeometry, LatheBufferGeometry, Mesh, MeshStandardMaterial, OctahedronBufferGeometry, OrthographicCamera, PerspectiveCamera, PlaneBufferGeometry, PointLight, RingBufferGeometry, SphereBufferGeometry, Sprite, SpriteMaterial, SpotLight, TetrahedronBufferGeometry, TorusBufferGeometry, TorusKnotBufferGeometry, TubeBufferGeometry, Vector2, Vector3 } from '../../build/three.module.js'; import { UIPanel, UIRow, UIHorizontalRule } from './libs/ui.js'; import { AddObjectCommand } from './commands/AddObjectCommand.js'; var MenubarAdd = function ( editor ) { var strings = editor.strings; var container = new UIPanel(); container.setClass( 'menu' ); var title = new UIPanel(); title.setClass( 'title' ); title.setTextContent( strings.getKey( 'menubar/add' ) ); container.add( title ); var options = new UIPanel(); options.setClass( 'options' ); container.add( options ); // Group var option = new UIRow(); option.setClass( 'option' ); option.setTextContent( strings.getKey( 'menubar/add/group' ) ); option.onClick( function () { var mesh = new THREE.Group(); mesh.name = 'Group'; editor.execute( new AddObjectCommand( editor, mesh ) ); } ); options.add( option ); // options.add( new UIHorizontalRule() ); // Box var option = new UIRow(); option.setClass( 'option' ); option.setTextContent( strings.getKey( 'menubar/add/box' ) ); option.onClick( function () { var geometry = new BoxBufferGeometry( 1, 1, 1, 1, 1, 1 ); var mesh = new Mesh( geometry, new MeshStandardMaterial() ); mesh.name = 'Box'; editor.execute( new AddObjectCommand( editor, mesh ) ); } ); options.add( option ); // Circle var option = new UIRow(); option.setClass( 'option' ); option.setTextContent( strings.getKey( 'menubar/add/circle' ) ); option.onClick( function () { var geometry = new CircleBufferGeometry( 1, 8, 0, Math.PI * 2 ); var mesh = new Mesh( geometry, new MeshStandardMaterial() ); mesh.name = 'Circle'; editor.execute( new AddObjectCommand( editor, mesh ) ); } ); options.add( option ); // Cylinder var option = new UIRow(); option.setClass( 'option' ); option.setTextContent( strings.getKey( 'menubar/add/cylinder' ) ); option.onClick( function () { var geometry = new CylinderBufferGeometry( 1, 1, 1, 8, 1, false, 0, Math.PI * 2 ); var mesh = new Mesh( geometry, new MeshStandardMaterial() ); mesh.name = 'Cylinder'; editor.execute( new AddObjectCommand( editor, mesh ) ); } ); options.add( option ); // Dodecahedron var option = new UIRow(); option.setClass( 'option' ); option.setTextContent( strings.getKey( 'menubar/add/dodecahedron' ) ); option.onClick( function () { var geometry = new DodecahedronBufferGeometry( 1, 0 ); var mesh = new Mesh( geometry, new MeshStandardMaterial() ); mesh.name = 'Dodecahedron'; editor.execute( new AddObjectCommand( editor, mesh ) ); } ); options.add( option ); // Icosahedron var option = new UIRow(); option.setClass( 'option' ); option.setTextContent( strings.getKey( 'menubar/add/icosahedron' ) ); option.onClick( function () { var geometry = new IcosahedronBufferGeometry( 1, 0 ); var mesh = new Mesh( geometry, new MeshStandardMaterial() ); mesh.name = 'Icosahedron'; editor.execute( new AddObjectCommand( editor, mesh ) ); } ); options.add( option ); // Lathe var option = new UIRow(); option.setClass( 'option' ); option.setTextContent( strings.getKey( 'menubar/add/lathe' ) ); option.onClick( function () { var points = [ new Vector2( 0, 0 ), new Vector2( 0.4, 0 ), new Vector2( 0.35, 0.05 ), new Vector2( 0.1, 0.075 ), new Vector2( 0.08, 0.1 ), new Vector2( 0.08, 0.4 ), new Vector2( 0.1, 0.42 ), new Vector2( 0.14, 0.48 ), new Vector2( 0.2, 0.5 ), new Vector2( 0.25, 0.54 ), new Vector2( 0.3, 1.2 ) ]; var geometry = new LatheBufferGeometry( points, 12, 0, Math.PI * 2 ); var mesh = new Mesh( geometry, new MeshStandardMaterial( { side: DoubleSide } ) ); mesh.name = 'Lathe'; editor.execute( new AddObjectCommand( editor, mesh ) ); } ); options.add( option ); // Octahedron var option = new UIRow(); option.setClass( 'option' ); option.setTextContent( strings.getKey( 'menubar/add/octahedron' ) ); option.onClick( function () { var geometry = new OctahedronBufferGeometry( 1, 0 ); var mesh = new Mesh( geometry, new MeshStandardMaterial() ); mesh.name = 'Octahedron'; editor.execute( new AddObjectCommand( editor, mesh ) ); } ); options.add( option ); // Plane var option = new UIRow(); option.setClass( 'option' ); option.setTextContent( strings.getKey( 'menubar/add/plane' ) ); option.onClick( function () { var geometry = new PlaneBufferGeometry( 1, 1, 1, 1 ); var material = new MeshStandardMaterial(); var mesh = new Mesh( geometry, material ); mesh.name = 'Plane'; editor.execute( new AddObjectCommand( editor, mesh ) ); } ); options.add( option ); // Ring var option = new UIRow(); option.setClass( 'option' ); option.setTextContent( strings.getKey( 'menubar/add/ring' ) ); option.onClick( function () { var geometry = new RingBufferGeometry( 0.5, 1, 8, 1, 0, Math.PI * 2 ); var mesh = new Mesh( geometry, new MeshStandardMaterial() ); mesh.name = 'Ring'; editor.execute( new AddObjectCommand( editor, mesh ) ); } ); options.add( option ); // Sphere var option = new UIRow(); option.setClass( 'option' ); option.setTextContent( strings.getKey( 'menubar/add/sphere' ) ); option.onClick( function () { var geometry = new SphereBufferGeometry( 1, 8, 6, 0, Math.PI * 2, 0, Math.PI ); var mesh = new Mesh( geometry, new MeshStandardMaterial() ); mesh.name = 'Sphere'; editor.execute( new AddObjectCommand( editor, mesh ) ); } ); options.add( option ); // Sprite var option = new UIRow(); option.setClass( 'option' ); option.setTextContent( strings.getKey( 'menubar/add/sprite' ) ); option.onClick( function () { var sprite = new Sprite( new SpriteMaterial() ); sprite.name = 'Sprite'; editor.execute( new AddObjectCommand( editor, sprite ) ); } ); options.add( option ); // Tetrahedron var option = new UIRow(); option.setClass( 'option' ); option.setTextContent( strings.getKey( 'menubar/add/tetrahedron' ) ); option.onClick( function () { var geometry = new TetrahedronBufferGeometry( 1, 0 ); var mesh = new Mesh( geometry, new MeshStandardMaterial() ); mesh.name = 'Tetrahedron'; editor.execute( new AddObjectCommand( editor, mesh ) ); } ); options.add( option ); // Torus var option = new UIRow(); option.setClass( 'option' ); option.setTextContent( strings.getKey( 'menubar/add/torus' ) ); option.onClick( function () { var geometry = new TorusBufferGeometry( 1, 0.4, 8, 6, Math.PI * 2 ); var mesh = new Mesh( geometry, new MeshStandardMaterial() ); mesh.name = 'Torus'; editor.execute( new AddObjectCommand( editor, mesh ) ); } ); options.add( option ); // TorusKnot var option = new UIRow(); option.setClass( 'option' ); option.setTextContent( strings.getKey( 'menubar/add/torusknot' ) ); option.onClick( function () { var geometry = new TorusKnotBufferGeometry( 1, 0.4, 64, 8, 2, 3 ); var mesh = new Mesh( geometry, new MeshStandardMaterial() ); mesh.name = 'TorusKnot'; editor.execute( new AddObjectCommand( editor, mesh ) ); } ); options.add( option ); // Tube var option = new UIRow(); option.setClass( 'option' ); option.setTextContent( strings.getKey( 'menubar/add/tube' ) ); option.onClick( function () { var path = new CatmullRomCurve3( [ new Vector3( 2, 2, - 2 ), new Vector3( 2, - 2, - 0.6666666666666667 ), new Vector3( - 2, - 2, 0.6666666666666667 ), new Vector3( - 2, 2, 2 ) ] ); var geometry = new TubeBufferGeometry( path, 64, 1, 8, false ); var mesh = new Mesh( geometry, new MeshStandardMaterial() ); mesh.name = 'Tube'; editor.execute( new AddObjectCommand( editor, mesh ) ); } ); options.add( option ); /* // Teapot var option = new UIRow(); option.setClass( 'option' ); option.setTextContent( 'Teapot' ); option.onClick( function () { var size = 50; var segments = 10; var bottom = true; var lid = true; var body = true; var fitLid = false; var blinnScale = true; var material = new MeshStandardMaterial(); var geometry = new TeapotBufferGeometry( size, segments, bottom, lid, body, fitLid, blinnScale ); var mesh = new Mesh( geometry, material ); mesh.name = 'Teapot'; editor.addObject( mesh ); editor.select( mesh ); } ); options.add( option ); */ // options.add( new UIHorizontalRule() ); // AmbientLight var option = new UIRow(); option.setClass( 'option' ); option.setTextContent( strings.getKey( 'menubar/add/ambientlight' ) ); option.onClick( function () { var color = 0x222222; var light = new AmbientLight( color ); light.name = 'AmbientLight'; editor.execute( new AddObjectCommand( editor, light ) ); } ); options.add( option ); // DirectionalLight var option = new UIRow(); option.setClass( 'option' ); option.setTextContent( strings.getKey( 'menubar/add/directionallight' ) ); option.onClick( function () { var color = 0xffffff; var intensity = 1; var light = new 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 var option = new UIRow(); option.setClass( 'option' ); option.setTextContent( strings.getKey( 'menubar/add/hemispherelight' ) ); option.onClick( function () { var skyColor = 0x00aaff; var groundColor = 0xffaa00; var intensity = 1; var light = new HemisphereLight( skyColor, groundColor, intensity ); light.name = 'HemisphereLight'; light.position.set( 0, 10, 0 ); editor.execute( new AddObjectCommand( editor, light ) ); } ); options.add( option ); // PointLight var option = new UIRow(); option.setClass( 'option' ); option.setTextContent( strings.getKey( 'menubar/add/pointlight' ) ); option.onClick( function () { var color = 0xffffff; var intensity = 1; var distance = 0; var light = new PointLight( color, intensity, distance ); light.name = 'PointLight'; editor.execute( new AddObjectCommand( editor, light ) ); } ); options.add( option ); // SpotLight var option = new UIRow(); option.setClass( 'option' ); option.setTextContent( strings.getKey( 'menubar/add/spotlight' ) ); option.onClick( function () { var color = 0xffffff; var intensity = 1; var distance = 0; var angle = Math.PI * 0.1; var penumbra = 0; var light = new 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 var option = new UIRow(); option.setClass( 'option' ); option.setTextContent( strings.getKey( 'menubar/add/orthographiccamera' ) ); option.onClick( function () { var camera = new OrthographicCamera(); camera.name = 'OrthographicCamera'; editor.execute( new AddObjectCommand( editor, camera ) ); } ); options.add( option ); // PerspectiveCamera var option = new UIRow(); option.setClass( 'option' ); option.setTextContent( strings.getKey( 'menubar/add/perspectivecamera' ) ); option.onClick( function () { var camera = new PerspectiveCamera(); camera.name = 'PerspectiveCamera'; editor.execute( new AddObjectCommand( editor, camera ) ); } ); options.add( option ); return container; }; export { MenubarAdd };