這一章分析ui中的添加菜單項的內容，與之相關的js文件爲Menubar.Add.js,編輯器的結構簡單易懂，很適合初學者學習。
這個js文件中值得注意的是場景中的任意操作都會封裝成一個命令，例如添加操作時會使用AddObjectCommand這個命令，然後這個命令會被放到Sidebar.History.js中的棧中，方便操作的撤銷和重做。
// 菜單欄中的添加菜單
Menubar.Add = function ( editor ) {
//獲取標籤文字信息
var strings = editor.strings;
//添加panel，即div，設置className爲menu，爲以後的css使用，這個爲容器
var container = new UI.Panel();
container.setClass( 'menu' );
//添加子項，設置子項的className，設置文本內容
var title = new UI.Panel();
title.setClass( 'title' );
title.setTextContent( strings.getKey( 'menubar/add' ) ); //設置標題爲'Add'
container.add( title ); //添加到菜單
//添加子項
var options = new UI.Panel();
options.setClass( 'options' );
container.add( options );
// Group
// 添加組
var option = new UI.Row();
option.setClass( 'option' );
option.setTextContent( strings.getKey( 'menubar/add/group' ) ); //設置標題爲'Group'
option.onClick( function () { //添加事件
var mesh = new THREE.Group(); //創建組，設置名稱爲組
mesh.name = 'Group';
editor.execute( new AddObjectCommand( mesh ) ); //調用執行函數
} );
options.add( option ); //添加到options容器當中
//
//添加水平分隔符
options.add( new UI.HorizontalRule() );
// Plane
// 添加面
var option = new UI.Row();
option.setClass( 'option' );
option.setTextContent( strings.getKey( 'menubar/add/plane' ) );
option.onClick( function () {
//添加面
var geometry = new THREE.PlaneBufferGeometry( 1, 1, 1, 1 );
var material = new THREE.MeshStandardMaterial();
var mesh = new THREE.Mesh( geometry, material );
mesh.name = 'Plane';
editor.execute( new AddObjectCommand( mesh ) );
} );
options.add( option );
// Box
//添加立方體
var option = new UI.Row();
option.setClass( 'option' );
option.setTextContent( strings.getKey( 'menubar/add/box' ) );
option.onClick( function () {
var geometry = new THREE.BoxBufferGeometry( 1, 1, 1, 1, 1, 1 );
var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
mesh.name = 'Box';
editor.execute( new AddObjectCommand( mesh ) );
} );
options.add( option );
// Circle
var option = new UI.Row();
option.setClass( 'option' );
option.setTextContent( strings.getKey( 'menubar/add/circle' ) );
option.onClick( function () {
var geometry = new THREE.CircleBufferGeometry( 1, 8, 0, Math.PI * 2 );
var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
mesh.name = 'Circle';
editor.execute( new AddObjectCommand( mesh ) );
} );
options.add( option );
// Cylinder
//添加
var option = new UI.Row();
option.setClass( 'option' );
option.setTextContent( strings.getKey( 'menubar/add/cylinder' ) );
option.onClick( function () {
var geometry = new THREE.CylinderBufferGeometry( 1, 1, 1, 8, 1, false, 0, Math.PI * 2 );
var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
mesh.name = 'Cylinder';
editor.execute( new AddObjectCommand( mesh ) );
} );
options.add( option );
// Sphere
var option = new UI.Row();
option.setClass( 'option' );
option.setTextContent( strings.getKey( 'menubar/add/sphere' ) );
option.onClick( function () {
var geometry = new THREE.SphereBufferGeometry( 1, 8, 6, 0, Math.PI * 2, 0, Math.PI );
var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
mesh.name = 'Sphere';
editor.execute( new AddObjectCommand( mesh ) );
} );
options.add( option );
// Icosahedron
var option = new UI.Row();
option.setClass( 'option' );
option.setTextContent( strings.getKey( 'menubar/add/icosahedron' ) );
option.onClick( function () {
var geometry = new THREE.IcosahedronBufferGeometry( 1, 0 );
var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
mesh.name = 'Icosahedron';
editor.execute( new AddObjectCommand( mesh ) );
} );
options.add( option );
// Torus
var option = new UI.Row();
option.setClass( 'option' );
option.setTextContent( strings.getKey( 'menubar/add/torus' ) );
option.onClick( function () {
var geometry = new THREE.TorusBufferGeometry( 1, 0.4, 8, 6, Math.PI * 2 );
var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
mesh.name = 'Torus';
editor.execute( new AddObjectCommand( mesh ) );
} );
options.add( option );
// TorusKnot
var option = new UI.Row();
option.setClass( 'option' );
option.setTextContent( strings.getKey( 'menubar/add/torusknot' ) );
option.onClick( function () {
var geometry = new THREE.TorusKnotBufferGeometry( 1, 0.4, 64, 8, 2, 3 );
var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
mesh.name = 'TorusKnot';
editor.execute( new AddObjectCommand( mesh ) );
} );
options.add( option );
// Tube
var option = new UI.Row();
option.setClass( 'option' );
option.setTextContent( strings.getKey( 'menubar/add/tube' ) );
option.onClick( function () {
var 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 )
] );
var geometry = new THREE.TubeBufferGeometry( path, 64, 1, 8, false );
var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
mesh.name = 'Tube';
editor.execute( new AddObjectCommand( mesh ) );
} );
options.add( option );
/*
// Teapot
var option = new UI.Row();
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 THREE.MeshStandardMaterial();
var geometry = new THREE.TeapotBufferGeometry( size, segments, bottom, lid, body, fitLid, blinnScale );
var mesh = new THREE.Mesh( geometry, material );
mesh.name = 'Teapot';
editor.addObject( mesh );
editor.select( mesh );
} );
options.add( option );
*/
// Lathe
var option = new UI.Row();
option.setClass( 'option' );
option.setTextContent( strings.getKey( 'menubar/add/lathe' ) );
option.onClick( function () {
var points = [
new THREE.Vector2( 0, 0 ),
new THREE.Vector2( 0.4, 0 ),
new THREE.Vector2( 0.35, 0.05 ),
new THREE.Vector2( 0.1, 0.075 ),
new THREE.Vector2( 0.08, 0.1 ),
new THREE.Vector2( 0.08, 0.4 ),
new THREE.Vector2( 0.1, 0.42 ),
new THREE.Vector2( 0.14, 0.48 ),
new THREE.Vector2( 0.2, 0.5 ),
new THREE.Vector2( 0.25, 0.54 ),
new THREE.Vector2( 0.3, 1.2 )
];
var geometry = new THREE.LatheBufferGeometry( points, 12, 0, Math.PI * 2 );
var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial( { side: THREE.DoubleSide } ) );
mesh.name = 'Lathe';
editor.execute( new AddObjectCommand( mesh ) );
} );
options.add( option );
// Sprite
var option = new UI.Row();
option.setClass( 'option' );
option.setTextContent( strings.getKey( 'menubar/add/sprite' ) );
option.onClick( function () {
var sprite = new THREE.Sprite( new THREE.SpriteMaterial() );
sprite.name = 'Sprite';
editor.execute( new AddObjectCommand( sprite ) );
} );
options.add( option );
//
options.add( new UI.HorizontalRule() );
// PointLight
var option = new UI.Row();
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 THREE.PointLight( color, intensity, distance );
light.name = 'PointLight';
editor.execute( new AddObjectCommand( light ) );
} );
options.add( option );
// SpotLight
var option = new UI.Row();
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 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( light ) );
} );
options.add( option );
// DirectionalLight
var option = new UI.Row();
option.setClass( 'option' );
option.setTextContent( strings.getKey( 'menubar/add/directionallight' ) );
option.onClick( function () {
var color = 0xffffff;
var intensity = 1;
var 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( light ) );
} );
options.add( option );
// HemisphereLight
//添加
var option = new UI.Row();
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 THREE.HemisphereLight( skyColor, groundColor, intensity );
light.name = 'HemisphereLight';
light.position.set( 0, 10, 0 );
editor.execute( new AddObjectCommand( light ) );
} );
options.add( option );
// AmbientLight
//添加環境光燈
var option = new UI.Row();
option.setClass( 'option' );
option.setTextContent( strings.getKey( 'menubar/add/ambientlight' ) );
option.onClick( function () {
var color = 0x222222;
//添加環境光
var light = new THREE.AmbientLight( color );
light.name = 'AmbientLight';
editor.execute( new AddObjectCommand( light ) );
} );
options.add( option );
//
options.add( new UI.HorizontalRule() );
// PerspectiveCamera
//添加投影相機
var option = new UI.Row();
option.setClass( 'option' );
option.setTextContent( strings.getKey( 'menubar/add/perspectivecamera' ) );
option.onClick( function () {
var camera = new THREE.PerspectiveCamera( 50, 1, 1, 10000 );
camera.name = 'PerspectiveCamera';
editor.execute( new AddObjectCommand( camera ) );
} );
options.add( option );
return container;
};