+ This class is an alternative implementation of [page:FlyControls]. +
+ +[example:webgl_geometry_terrain webgl / geometry / terrain ]
+ ++
+ [page:Camera object]: The camera to be controlled. +
++ [page:HTMLDOMElement domElement]: (optional) The HTML element used for event listeners. By default this is the whole document, + however if you only want the controls to work over a specific element (e.g. the canvas) you can specify that here. +
++ Creates a new instance of [name]. +
+ + ++ Whether or not it's possible to look around. Default is *true*. +
+ ++ Whether or not the camera is automatically moved forward. Default is *false*. +
+ ++ Whether or not looking around is vertically constrained by [[page:.verticalMin], [page:.verticalMax]]. Default is *false*. +
+ ++ The HTMLDOMElement used to listen for mouse / touch events. This must be passed in the constructor; changing it here will + not set up new event listeners. Default is the whole document. +
+ ++ Whether or not the controls are enabled. Default is *true*. +
+ ++ Determines how much faster the camera moves when it's y-component is near [page:.heightMax]. Default is *1*. +
+ ++ Upper camera height limit used for movement speed adjusment. Default is *1*. +
+ ++ Lower camera height limit used for movement speed adjusment. Default is *0*. +
+ ++ Whether or not the camera's height influences the forward movement speed. Default is *false*. + Use the properties [page:.heightCoef], [page:.heightMin] and [page:.heightMax] for configuration. +
+ ++ Whether or not it's possible to vertically look around. Default is *true*. +
+ ++ The look around speed. Default is *0.005*. +
+ ++ Whether or not the mouse is pressed down. Read-only property. +
+ ++ The movement speed. Default is *1*. +
+ ++ The camera to be controlled. +
+ ++ How far you can vertically look around, upper limit. Range is 0 to Math.PI radians. Default is *Math.PI*. +
+ ++ How far you can vertically look around, lower limit. Range is 0 to Math.PI radians. Default is *0*. +
+ ++ Should be called if the controls is no longer required. +
+ ++ Should be called if the application window is resized. +
+ ++
+
+ vector - A vector representing the target position. +
++ Optionally, the x, y, z components of the world space position. +
+ ++ Ensures the controls orient the camera towards the defined target position. +
+ + ++
+ [page:Number delta]: Time delta value. +
++ Updates the controls. Usually called in the animation loop. +
+ + ++ [link:https://github.com/mrdoob/three.js/blob/master/examples/js/controls/FirstPersonControls.js examples/js/controls/FirstPersonControls.js] +
+ + diff --git a/docs/examples/en/controls/OrthographicTrackballControls.html b/docs/examples/en/controls/OrthographicTrackballControls.html new file mode 100644 index 0000000000000000000000000000000000000000..1b12f89a2975ed7b6a4b4cc0bce6f65c4218852e --- /dev/null +++ b/docs/examples/en/controls/OrthographicTrackballControls.html @@ -0,0 +1,187 @@ + + + + ++
+ This class is a special version of [page:TrackballControls] which supports orthographic cameras. +
+ + +[example:misc_controls_trackball_orthographic misc / controls / trackball / orthographic ]
+ ++
+ [page:OrthographicCamera camera]: The orthographic camera of the rendered scene. +
++ [page:HTMLDOMElement domElement]: (optional) The HTML element used for event listeners. By default this is the whole document, + however if you only want the controls to work over a specific element (e.g. the canvas) you can specify that here. +
++ Creates a new instance of [name]. +
+ + ++ Fires when the camera has been transformed by the controls. +
+ ++ Fires when an interaction (e.g. touch) was initiated. +
+ ++ Fires when an interaction has finished. +
+ ++ The HTMLDOMElement used to listen for mouse / touch events. This must be passed in the constructor; changing it here will + not set up new event listeners. Default is the whole document. +
+ ++ Defines the intensity of damping. Only considered if [page:.staticMoving staticMoving] is set to *false*. Default is *0.2*. +
+ ++ Whether or not the controls are enabled. +
+ ++ This array holds keycodes for controlling interactions. +
+ Whether or not panning is disabled. Default is *false*. +
+ ++ Whether or not rolling is disabled. Default is *false*. +
+ ++ Whether or not rotation is disabled. Default is *false*. +
+ ++ Whether or not zooming is disabled. Default is *false*. +
+ ++ The camera being controlled. +
+ ++ The zoom speed. Default is *0.3*. +
+ ++ The rotation speed. Default is *1.0*. +
+ ++ Represents the properties of the screen. Automatically set when [page:.handleResize handleResize]() is called. +
+ Whether or not damping is disabled. Default is *false*. +
+ ++ The zoom speed. Default is *1.2*. +
+ ++ Should be called if the controls is no longer required. +
+ ++ Should be called if the application window is resized. +
+ ++ Performs panning if necessary. Called by [page:.update update](). +
+ ++ Resets the controls to its initial state. +
+ ++ Rotates the camera if necessary. Called by [page:.update update](). +
+ ++ Updates the controls. Usually called in the animation loop. +
+ ++ Performs zooming if necessary. Called by [page:.update update](). +
+ ++ [link:https://github.com/mrdoob/three.js/blob/master/examples/js/controls/TrackballControls.js examples/js/controls/TrackballControls.js] +
+ + diff --git a/docs/examples/en/controls/TrackballControls.html b/docs/examples/en/controls/TrackballControls.html index d1feb24afd68632035f7631913611657073508c5..c460af81ef6a7f8d38023d21bc5c8048c117865c 100644 --- a/docs/examples/en/controls/TrackballControls.html +++ b/docs/examples/en/controls/TrackballControls.html @@ -13,8 +13,13 @@- [name] is similar to [page:OrbitControls]. However, it does not maintain a constant camera [page:Object3D.up up] vector. - That means if the camera orbits over the “north” and “south” poles, it does not flip to stay "right side up". +
+ [name] is similar to [page:OrbitControls]. However, it does not maintain a constant camera [page:Object3D.up up] vector. + That means if the camera orbits over the “north” and “south” poles, it does not flip to stay "right side up". +
++ Notice that [name] can only be used with a perspective camera. Use [page:OrthographicTrackballControls] when working with an orthographic camera. +
- [page:Camera camera]: The camera of the rendered scene. + [page:PerspectiveCamera camera]: The perspective camera of the rendered scene.
[page:HTMLDOMElement domElement]: (optional) The HTML element used for event listeners. By default this is the whole document, @@ -119,7 +124,7 @@ Whether or not zooming is disabled. Default is *false*.
-The camera being controlled.
diff --git a/docs/examples/en/controls/TransformControls.html b/docs/examples/en/controls/TransformControls.html new file mode 100644 index 0000000000000000000000000000000000000000..b4bcc5b253db41c4f7d6b8417736c157d98f8469 --- /dev/null +++ b/docs/examples/en/controls/TransformControls.html @@ -0,0 +1,225 @@ + + + + ++ This class can be used to transform objects in 3D space by adapting a similar interaction model of DCC tools like Blender. + Unlike other controls, it is not intended to transform the scene's camera. +
+ +[example:misc_controls_transform misc / controls / transform ]
+ ++
+ [page:Camera camera]: The camera of the rendered scene. +
++ [page:HTMLDOMElement domElement]: (optional) The HTML element used for event listeners. By default this is the whole document, + however if you only want the controls to work over a specific element (e.g. the canvas) you can specify that here. +
++ Creates a new instance of [name]. +
+ + ++ Fires if any type of change (object or property change) is performed. Property changes + are separate events you can add event listeners to. The event type is "propertyname-changed". +
+ ++ Fires if a pointer (mouse/touch) becomes active. +
+ ++ Fires if a pointer (mouse/touch) is no longer active. +
+ ++ Fires if the controlled 3D object is changed. +
+ +See the base [page:Object3D] class for common properties.
+ ++ The current transformation axis. +
+ ++ The camera of the rendered scene. +
+ ++ The HTMLDOMElement used to listen for mouse / touch events. This must be passed in the constructor; changing it here will + not set up new event listeners. Default is the whole document. +
+ ++ Whether or not dragging is currently performed. Read-only property. +
+ ++ Whether or not the controls are enabled. +
+ ++ The current transformation mode. Possible values are "translate", "rotate" and "scale". Default is *translate*. +
+ ++ The 3D object being controlled. +
+ ++ By default, 3D objects are continously rotated. If you set this property to a numeric value (radians), you can define in which + steps the 3D object should be rotated. Deault is *null*. +
+ ++ Whether or not the x-axis helper should be visible. Default is *true*. +
+ ++ Whether or not the y-axis helper should be visible. Default is *true*. +
+ ++ Whether or not the z-axis helper should be visible. Default is *true*. +
+ ++ The size of the helper UI (axes/planes). Default is *1*. +
+ ++ Defines in which coordinate space transformations should be performed. Possible values are "world" and "local". Default is *world*. +
+ ++ By default, 3D objects are continously translated. If you set this property to a numeric value (world units), you can define in which + steps the 3D object should be translated. Deault is *null*. +
+ +See the base [page:Object3D] class for common methods.
+ ++
+ [page:Object3D object]: The 3D object that should be transformed. +
++ Sets the 3D object that should be transformed and ensures the controls UI is visible. +
+ + ++ Removes the current 3D object from the controls and makes the helper UI is invisible. +
+ ++ Should be called if the controls is no longer required. +
+ ++ Returns the transformation mode. +
+ ++
+ [page:String mode]: The transformation mode. +
++ Sets the transformation mode. +
+ + ++
+ [page:Number rotationSnap]: The rotation snap. +
++ Sets the rotation snap. +
+ + ++
+ [page:Number size]: The size of the helper UI. +
++ Sets the size of the helper UI. +
+ + ++
+ [page:String space]: The coordinate space in which transformations are applied. +
++ Sets the coordinate space in which transformations are applied. +
+ + ++
+ [page:Number translationSnap]: The translation snap. +
++ Sets the translation snap. +
+ + ++ [link:https://github.com/mrdoob/three.js/blob/master/examples/js/controls/TransformControls.js examples/js/controls/TransformControls.js] +
+ + diff --git a/docs/examples/zh/controls/FirstPersonControls.html b/docs/examples/zh/controls/FirstPersonControls.html new file mode 100644 index 0000000000000000000000000000000000000000..b1032350e86125b436a16f1b218695a5dcc3767e --- /dev/null +++ b/docs/examples/zh/controls/FirstPersonControls.html @@ -0,0 +1,166 @@ + + + + ++ This class is an alternative implementation of [page:FlyControls]. +
+ +[example:webgl_geometry_terrain webgl / geometry / terrain ]
+ ++
+ [page:Camera object]: The camera to be controlled. +
++ [page:HTMLDOMElement domElement]: (optional) The HTML element used for event listeners. By default this is the whole document, + however if you only want the controls to work over a specific element (e.g. the canvas) you can specify that here. +
++ Creates a new instance of [name]. +
+ + ++ Whether or not it's possible to look around. Default is *true*. +
+ ++ Whether or not the camera is automatically moved forward. Default is *false*. +
+ ++ Whether or not looking around is vertically constrained by [[page:.verticalMin], [page:.verticalMax]]. Default is *false*. +
+ ++ The HTMLDOMElement used to listen for mouse / touch events. This must be passed in the constructor; changing it here will + not set up new event listeners. Default is the whole document. +
+ ++ Whether or not the controls are enabled. Default is *true*. +
+ ++ Determines how much faster the camera moves when it's y-component is near [page:.heightMax]. Default is *1*. +
+ ++ Upper camera height limit used for movement speed adjusment. Default is *1*. +
+ ++ Lower camera height limit used for movement speed adjusment. Default is *0*. +
+ ++ Whether or not the camera's height influences the forward movement speed. Default is *false*. + Use the properties [page:.heightCoef], [page:.heightMin] and [page:.heightMax] for configuration. +
+ ++ Whether or not it's possible to vertically look around. Default is *true*. +
+ ++ The look around speed. Default is *0.005*. +
+ ++ Whether or not the mouse is pressed down. Read-only property. +
+ ++ The movement speed. Default is *1*. +
+ ++ The camera to be controlled. +
+ ++ How far you can vertically look around, upper limit. Range is 0 to Math.PI radians. Default is *Math.PI*. +
+ ++ How far you can vertically look around, lower limit. Range is 0 to Math.PI radians. Default is *0*. +
+ ++ Should be called if the controls is no longer required. +
+ ++ Should be called if the application window is resized. +
+ ++
+
+ vector - A vector representing the target position. +
++ Optionally, the x, y, z components of the world space position. +
+ ++ Ensures the controls orient the camera towards the defined target position. +
+ + ++
+ [page:Number delta]: Time delta value. +
++ Updates the controls. Usually called in the animation loop. +
+ + ++ [link:https://github.com/mrdoob/three.js/blob/master/examples/js/controls/FirstPersonControls.js examples/js/controls/FirstPersonControls.js] +
+ + diff --git a/docs/examples/zh/controls/OrthographicTrackballControls.html b/docs/examples/zh/controls/OrthographicTrackballControls.html new file mode 100644 index 0000000000000000000000000000000000000000..1b12f89a2975ed7b6a4b4cc0bce6f65c4218852e --- /dev/null +++ b/docs/examples/zh/controls/OrthographicTrackballControls.html @@ -0,0 +1,187 @@ + + + + ++
+ This class is a special version of [page:TrackballControls] which supports orthographic cameras. +
+ + +[example:misc_controls_trackball_orthographic misc / controls / trackball / orthographic ]
+ ++
+ [page:OrthographicCamera camera]: The orthographic camera of the rendered scene. +
++ [page:HTMLDOMElement domElement]: (optional) The HTML element used for event listeners. By default this is the whole document, + however if you only want the controls to work over a specific element (e.g. the canvas) you can specify that here. +
++ Creates a new instance of [name]. +
+ + ++ Fires when the camera has been transformed by the controls. +
+ ++ Fires when an interaction (e.g. touch) was initiated. +
+ ++ Fires when an interaction has finished. +
+ ++ The HTMLDOMElement used to listen for mouse / touch events. This must be passed in the constructor; changing it here will + not set up new event listeners. Default is the whole document. +
+ ++ Defines the intensity of damping. Only considered if [page:.staticMoving staticMoving] is set to *false*. Default is *0.2*. +
+ ++ Whether or not the controls are enabled. +
+ ++ This array holds keycodes for controlling interactions. +
+ Whether or not panning is disabled. Default is *false*. +
+ ++ Whether or not rolling is disabled. Default is *false*. +
+ ++ Whether or not rotation is disabled. Default is *false*. +
+ ++ Whether or not zooming is disabled. Default is *false*. +
+ ++ The camera being controlled. +
+ ++ The zoom speed. Default is *0.3*. +
+ ++ The rotation speed. Default is *1.0*. +
+ ++ Represents the properties of the screen. Automatically set when [page:.handleResize handleResize]() is called. +
+ Whether or not damping is disabled. Default is *false*. +
+ ++ The zoom speed. Default is *1.2*. +
+ ++ Should be called if the controls is no longer required. +
+ ++ Should be called if the application window is resized. +
+ ++ Performs panning if necessary. Called by [page:.update update](). +
+ ++ Resets the controls to its initial state. +
+ ++ Rotates the camera if necessary. Called by [page:.update update](). +
+ ++ Updates the controls. Usually called in the animation loop. +
+ ++ Performs zooming if necessary. Called by [page:.update update](). +
+ ++ [link:https://github.com/mrdoob/three.js/blob/master/examples/js/controls/TrackballControls.js examples/js/controls/TrackballControls.js] +
+ + diff --git a/docs/examples/zh/controls/TrackballControls.html b/docs/examples/zh/controls/TrackballControls.html index d1feb24afd68632035f7631913611657073508c5..c460af81ef6a7f8d38023d21bc5c8048c117865c 100644 --- a/docs/examples/zh/controls/TrackballControls.html +++ b/docs/examples/zh/controls/TrackballControls.html @@ -13,8 +13,13 @@- [name] is similar to [page:OrbitControls]. However, it does not maintain a constant camera [page:Object3D.up up] vector. - That means if the camera orbits over the “north” and “south” poles, it does not flip to stay "right side up". +
+ [name] is similar to [page:OrbitControls]. However, it does not maintain a constant camera [page:Object3D.up up] vector. + That means if the camera orbits over the “north” and “south” poles, it does not flip to stay "right side up". +
++ Notice that [name] can only be used with a perspective camera. Use [page:OrthographicTrackballControls] when working with an orthographic camera. +
- [page:Camera camera]: The camera of the rendered scene. + [page:PerspectiveCamera camera]: The perspective camera of the rendered scene.
[page:HTMLDOMElement domElement]: (optional) The HTML element used for event listeners. By default this is the whole document, @@ -119,7 +124,7 @@ Whether or not zooming is disabled. Default is *false*.
-The camera being controlled.
diff --git a/docs/examples/zh/controls/TransformControls.html b/docs/examples/zh/controls/TransformControls.html new file mode 100644 index 0000000000000000000000000000000000000000..b4bcc5b253db41c4f7d6b8417736c157d98f8469 --- /dev/null +++ b/docs/examples/zh/controls/TransformControls.html @@ -0,0 +1,225 @@ + + + + ++ This class can be used to transform objects in 3D space by adapting a similar interaction model of DCC tools like Blender. + Unlike other controls, it is not intended to transform the scene's camera. +
+ +[example:misc_controls_transform misc / controls / transform ]
+ ++
+ [page:Camera camera]: The camera of the rendered scene. +
++ [page:HTMLDOMElement domElement]: (optional) The HTML element used for event listeners. By default this is the whole document, + however if you only want the controls to work over a specific element (e.g. the canvas) you can specify that here. +
++ Creates a new instance of [name]. +
+ + ++ Fires if any type of change (object or property change) is performed. Property changes + are separate events you can add event listeners to. The event type is "propertyname-changed". +
+ ++ Fires if a pointer (mouse/touch) becomes active. +
+ ++ Fires if a pointer (mouse/touch) is no longer active. +
+ ++ Fires if the controlled 3D object is changed. +
+ +See the base [page:Object3D] class for common properties.
+ ++ The current transformation axis. +
+ ++ The camera of the rendered scene. +
+ ++ The HTMLDOMElement used to listen for mouse / touch events. This must be passed in the constructor; changing it here will + not set up new event listeners. Default is the whole document. +
+ ++ Whether or not dragging is currently performed. Read-only property. +
+ ++ Whether or not the controls are enabled. +
+ ++ The current transformation mode. Possible values are "translate", "rotate" and "scale". Default is *translate*. +
+ ++ The 3D object being controlled. +
+ ++ By default, 3D objects are continously rotated. If you set this property to a numeric value (radians), you can define in which + steps the 3D object should be rotated. Deault is *null*. +
+ ++ Whether or not the x-axis helper should be visible. Default is *true*. +
+ ++ Whether or not the y-axis helper should be visible. Default is *true*. +
+ ++ Whether or not the z-axis helper should be visible. Default is *true*. +
+ ++ The size of the helper UI (axes/planes). Default is *1*. +
+ ++ Defines in which coordinate space transformations should be performed. Possible values are "world" and "local". Default is *world*. +
+ ++ By default, 3D objects are continously translated. If you set this property to a numeric value (world units), you can define in which + steps the 3D object should be translated. Deault is *null*. +
+ +See the base [page:Object3D] class for common methods.
+ ++
+ [page:Object3D object]: The 3D object that should be transformed. +
++ Sets the 3D object that should be transformed and ensures the controls UI is visible. +
+ + ++ Removes the current 3D object from the controls and makes the helper UI is invisible. +
+ ++ Should be called if the controls is no longer required. +
+ ++ Returns the transformation mode. +
+ ++
+ [page:String mode]: The transformation mode. +
++ Sets the transformation mode. +
+ + ++
+ [page:Number rotationSnap]: The rotation snap. +
++ Sets the rotation snap. +
+ + ++
+ [page:Number size]: The size of the helper UI. +
++ Sets the size of the helper UI. +
+ + ++
+ [page:String space]: The coordinate space in which transformations are applied. +
++ Sets the coordinate space in which transformations are applied. +
+ + ++
+ [page:Number translationSnap]: The translation snap. +
++ Sets the translation snap. +
+ + ++ [link:https://github.com/mrdoob/three.js/blob/master/examples/js/controls/TransformControls.js examples/js/controls/TransformControls.js] +
+ + diff --git a/docs/list.js b/docs/list.js index 8fae40327d6869054a01a6d14ad636b4d90ef633..e024da377606716022ceecf23988d61431dbd960 100644 --- a/docs/list.js +++ b/docs/list.js @@ -356,10 +356,13 @@ var list = { "Controls": { "DeviceOrientationControls": "examples/en/controls/DeviceOrientationControls", "DragControls": "examples/en/controls/DragControls", + "FirstPersonControls": "examples/en/controls/FirstPersonControls", "FlyControls": "examples/en/controls/FlyControls", "OrbitControls": "examples/en/controls/OrbitControls", + "OrthographicTrackballControls": "examples/en/controls/OrthographicTrackballControls", "PointerLockControls": "examples/en/controls/PointerLockControls", - "TrackballControls": "examples/en/controls/TrackballControls" + "TrackballControls": "examples/en/controls/TrackballControls", + "TransformControls": "examples/en/controls/TransformControls" }, "Geometries": { @@ -797,10 +800,13 @@ var list = { "控制": { "DeviceOrientationControls": "examples/zh/controls/DeviceOrientationControls", "DragControls": "examples/zh/controls/DragControls", + "FirstPersonControls": "examples/zh/controls/FirstPersonControls", "FlyControls": "examples/zh/controls/FlyControls", "OrbitControls": "examples/zh/controls/OrbitControls", + "OrthographicTrackballControls": "examples/zh/controls/OrthographicTrackballControls", "PointerLockControls": "examples/zh/controls/PointerLockControls", - "TrackballControls": "examples/zh/controls/TrackballControls" + "TrackballControls": "examples/zh/controls/TrackballControls", + "TransformControls": "examples/zh/controls/TransformControls" }, "几何体": { diff --git a/editor/css/dark.css b/editor/css/dark.css index 34e7b1065c5fcdb92940ce0d7a5134cff50b7156..d93353407289a768f8caafcab6bb75223f10b346 100644 --- a/editor/css/dark.css +++ b/editor/css/dark.css @@ -251,6 +251,21 @@ select { background-color: rgba(21,60,94,1); } +.TabbedPanel .Tabs { + background-color: #1b1b1b; + border-top: 1px solid #222; +} + + .TabbedPanel .Tab { + color: #555; + border-right: 1px solid #222; + } + + .TabbedPanel .Tab.selected { + color: #888; + background-color: #111; + } + .Listbox { color: #888; background: #222; diff --git a/editor/css/light.css b/editor/css/light.css index c02bfa34c8e781caf0f1b0bde197cd6eba12177b..81eaadbe461a2e355d6778d93a465e8a9134738f 100644 --- a/editor/css/light.css +++ b/editor/css/light.css @@ -244,6 +244,22 @@ select { background-color: rgba(0,0,0,0.04); } + +.TabbedPanel .Tabs { + background-color: #ddd; + border-top: 1px solid #ccc; +} + + .TabbedPanel .Tab { + color: #aaa; + border-right: 1px solid #ccc; + } + + .TabbedPanel .Tab.selected { + color: #888; + background-color: #eee; + } + .Listbox { color: #444; background-color: #fff; diff --git a/editor/css/main.css b/editor/css/main.css index f9ddb88530407f0e82b309a550bdd93fbd1011ea..85efe336ab28a274b7db21bb708a178ac3636782 100644 --- a/editor/css/main.css +++ b/editor/css/main.css @@ -41,6 +41,37 @@ textarea, input { outline: none; } /* osx */ user-select: none; } +.TabbedPanel { + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + + /* No support for these yet */ + -o-user-select: none; + user-select: none; + position: relative; + display: block; + width: 100%; +} + +.TabbedPanel .Tabs { + position: relative; + display: block; + width: 100%; +} + +.TabbedPanel .Tabs .Tab { + padding: 10px; + vertical-align: middle; +} + +.TabbedPanel .Tabs .Panels { + position: relative; + display: block; + width: 100%; + height: 100%; +} + /* Listbox */ .Listbox { color: #444; diff --git a/editor/js/Sidebar.Properties.js b/editor/js/Sidebar.Properties.js index 12fbda912cb0ef9104038a8ca87ba25b42703cab..5cf9c3e5b89c7786093bd4213aa5800f849dd90e 100644 --- a/editor/js/Sidebar.Properties.js +++ b/editor/js/Sidebar.Properties.js @@ -4,72 +4,14 @@ Sidebar.Properties = function ( editor ) { - var signals = editor.signals; var strings = editor.strings; - var container = new UI.Span(); + var container = new UI.TabbedPanel(); + container.setId( 'properties' ); - var objectTab = new UI.Text( strings.getKey( 'sidebar/properties/object' ) ).setTextTransform( 'uppercase' ); - objectTab.onClick( function () { select( 'OBJECT' ) } ); - - var geometryTab = new UI.Text( strings.getKey( 'sidebar/properties/geometry' ) ).setTextTransform( 'uppercase' ); - geometryTab.onClick( function () { select( 'GEOMETRY' ) } ); - - var materialTab = new UI.Text( strings.getKey( 'sidebar/properties/material' ) ).setTextTransform( 'uppercase' ); - materialTab.onClick( function () { select( 'MATERIAL' ) } ); - - var tabs = new UI.Div(); - tabs.setId( 'tabs' ); - tabs.add( objectTab, geometryTab, materialTab ); - container.add( tabs ); - - // - - var object = new UI.Span().add( - new Sidebar.Object( editor ) - ); - container.add( object ); - - var geometry = new UI.Span().add( - new Sidebar.Geometry( editor ) - ); - container.add( geometry ); - - var material = new UI.Span().add( - new Sidebar.Material( editor ) - ); - container.add( material ); - - // - - function select( section ) { - - objectTab.setClass( '' ); - geometryTab.setClass( '' ); - materialTab.setClass( '' ); - - object.setDisplay( 'none' ); - geometry.setDisplay( 'none' ); - material.setDisplay( 'none' ); - - switch ( section ) { - case 'OBJECT': - objectTab.setClass( 'selected' ); - object.setDisplay( '' ); - break; - case 'GEOMETRY': - geometryTab.setClass( 'selected' ); - geometry.setDisplay( '' ); - break; - case 'MATERIAL': - materialTab.setClass( 'selected' ); - material.setDisplay( '' ); - break; - } - - } - - select( 'OBJECT' ); + container.addTab( 'object', strings.getKey( 'sidebar/properties/object' ), new Sidebar.Object( editor ) ); + container.addTab( 'geometry', strings.getKey( 'sidebar/properties/geometry' ), new Sidebar.Geometry( editor ) ); + container.addTab( 'material', strings.getKey( 'sidebar/properties/material' ), new Sidebar.Material( editor ) ); return container; diff --git a/editor/js/Sidebar.js b/editor/js/Sidebar.js index 82fa2550854b2aa1b4396d04a814bcecd39c9df1..e3d3e9023f083e9178e29da71a3d9559a1c22f25 100644 --- a/editor/js/Sidebar.js +++ b/editor/js/Sidebar.js @@ -6,76 +6,24 @@ var Sidebar = function ( editor ) { var strings = editor.strings; - var container = new UI.Panel(); + var container = new UI.TabbedPanel(); container.setId( 'sidebar' ); - // - - var sceneTab = new UI.Text( strings.getKey( 'sidebar/scene' ) ).setTextTransform( 'uppercase' ); - sceneTab.onClick( function () { select( 'SCENE' ) } ); - - var projectTab = new UI.Text( strings.getKey( 'sidebar/project' ) ).setTextTransform( 'uppercase' ); - projectTab.onClick( function () { select( 'PROJECT' ) } ); - - var settingsTab = new UI.Text( strings.getKey( 'sidebar/settings' ) ).setTextTransform( 'uppercase' ); - settingsTab.onClick( function () { select( 'SETTINGS' ) } ); - - var tabs = new UI.Div(); - tabs.setId( 'tabs' ); - tabs.add( sceneTab, projectTab, settingsTab ); - container.add( tabs ); - - // - var scene = new UI.Span().add( new Sidebar.Scene( editor ), new Sidebar.Properties( editor ), new Sidebar.Animation( editor ), new Sidebar.Script( editor ) ); - container.add( scene ); - - var project = new UI.Span().add( - new Sidebar.Project( editor ) - ); - container.add( project ); var settings = new UI.Span().add( new Sidebar.Settings( editor ), new Sidebar.History( editor ) ); - container.add( settings ); - - // - - function select( section ) { - - sceneTab.setClass( '' ); - projectTab.setClass( '' ); - settingsTab.setClass( '' ); - - scene.setDisplay( 'none' ); - project.setDisplay( 'none' ); - settings.setDisplay( 'none' ); - - switch ( section ) { - case 'SCENE': - sceneTab.setClass( 'selected' ); - scene.setDisplay( '' ); - break; - case 'PROJECT': - projectTab.setClass( 'selected' ); - project.setDisplay( '' ); - break; - case 'SETTINGS': - settingsTab.setClass( 'selected' ); - settings.setDisplay( '' ); - break; - } - - } - select( 'SCENE' ); + container.addTab( 'scene', strings.getKey( 'sidebar/scene' ), scene ); + container.addTab( 'project', strings.getKey( 'sidebar/project' ), new Sidebar.Project( editor ) ); + container.addTab( 'settings', strings.getKey( 'sidebar/settings' ), settings ); return container; diff --git a/editor/js/libs/ui.js b/editor/js/libs/ui.js index 507339a3077571f61c2b8696514761039462384f..6dff610583cbf1de1f73caa2bcf536f73a329ff5 100644 --- a/editor/js/libs/ui.js +++ b/editor/js/libs/ui.js @@ -88,6 +88,22 @@ UI.Element.prototype = { }, + addClass: function ( name ) { + + this.dom.classList.add( name ); + + return this; + + }, + + removeClass: function ( name ) { + + this.dom.classList.remove( name ); + + return this; + + }, + setStyle: function ( style, array ) { for ( var i = 0; i < array.length; i ++ ) { @@ -1002,8 +1018,126 @@ UI.Button.prototype.setLabel = function ( value ) { }; -// Listbox +// TabbedPanel + +UI.TabbedPanel = function ( ) { + + UI.Element.call( this ); + + var dom = document.createElement('div'); + + this.dom = dom; + + this.setClass( 'TabbedPanel' ); + + this.tabs = []; + this.panels = []; + + this.tabsDiv = new UI.Div(); + this.tabsDiv.setClass( 'Tabs' ); + + this.panelsDiv = new UI.Div(); + this.panelsDiv.setClass( 'Panels' ); + + this.add( this.tabsDiv ); + this.add( this.panelsDiv ); + + this.selected = ''; + + return this; + +} + +UI.TabbedPanel.prototype = Object.create( UI.Element.prototype ); +UI.TabbedPanel.prototype.constructor = UI.TabbedPanel; + +UI.TabbedPanel.prototype.select = function ( id ) { + + var tab; + var panel; + var scope = this; + + // Deselect current selection + if ( this.selected && this.selected.length ) { + tab = this.tabs.find( function ( item ) { return item.dom.id === scope.selected } ); + panel = this.panels.find( function ( item ) { return item.dom.id === scope.selected } ); + + if ( tab ) { + + tab.removeClass( 'selected' ); + + } + + if( panel ) { + + panel.setDisplay( 'none' ); + + } + + } + + tab = this.tabs.find( function ( item ) { return item.dom.id === id } ); + panel = this.panels.find( function ( item ) { return item.dom.id === id } ); + + if ( tab ) { + + tab.addClass( 'selected' ); + + } + + if( panel ) { + + panel.setDisplay( '' ); + + } + + this.selected = id; + + return this; + +} + +UI.TabbedPanel.prototype.addTab = function ( id, label, items ) { + + var tab = new UI.TabbedPanel.Tab( label, this ); + tab.setId( id ); + this.tabs.push( tab ); + this.tabsDiv.add( tab ); + + var panel = new UI.Div(); + panel.setId( id ); + panel.add( items ); + panel.setDisplay( 'none' ); + this.panels.push( panel ); + this.panelsDiv.add( panel ); + + this.select( id ); + +} + +UI.TabbedPanel.Tab = function ( text, parent ) { + + UI.Text.call( this, text ); + this.parent = parent; + + this.setClass( 'Tab' ); + + var scope = this; + this.dom.addEventListener( 'click', function ( event ) { + + scope.parent.select( scope.dom.id ); + + } ) + + return this; + +} + +UI.TabbedPanel.Tab.prototype = Object.create( UI.Text.prototype ); +UI.TabbedPanel.Tab.prototype.constructor = UI.TabbedPanel.Tab; + +// Listbox UI.Listbox = function ( ) { UI.Element.call( this ); diff --git a/examples/js/controls/FirstPersonControls.js b/examples/js/controls/FirstPersonControls.js index 34c255109891346efd4dfbfbacd5c25074e54a1b..b3332b1f17b9d50fa6b9d502025864c8d228e154 100644 --- a/examples/js/controls/FirstPersonControls.js +++ b/examples/js/controls/FirstPersonControls.js @@ -10,6 +10,8 @@ THREE.FirstPersonControls = function ( object, domElement ) { this.domElement = ( domElement !== undefined ) ? domElement : document; + // API + this.enabled = true; this.movementSpeed = 1.0; @@ -29,6 +31,10 @@ THREE.FirstPersonControls = function ( object, domElement ) { this.verticalMin = 0; this.verticalMax = Math.PI; + this.mouseDragOn = false; + + // internals + this.autoSpeedFactor = 0.0; this.mouseX = 0; @@ -39,8 +45,6 @@ THREE.FirstPersonControls = function ( object, domElement ) { this.moveLeft = false; this.moveRight = false; - this.mouseDragOn = false; - this.viewHalfX = 0; this.viewHalfY = 0; diff --git a/examples/js/controls/OrthographicTrackballControls.js b/examples/js/controls/OrthographicTrackballControls.js index 1d5e4f909e95943639029fc5f42e2e1d46f8b235..156a6b4202ee3b2469539ccb48b9aca169343889 100644 --- a/examples/js/controls/OrthographicTrackballControls.js +++ b/examples/js/controls/OrthographicTrackballControls.js @@ -19,8 +19,6 @@ THREE.OrthographicTrackballControls = function ( object, domElement ) { this.screen = { left: 0, top: 0, width: 0, height: 0 }; - this.radius = 0; - this.rotateSpeed = 1.0; this.zoomSpeed = 1.2; @@ -36,6 +34,8 @@ THREE.OrthographicTrackballControls = function ( object, domElement ) { // internals + this.radius = 0; + this.target = new THREE.Vector3(); var EPS = 0.000001; diff --git a/examples/jsm/controls/FirstPersonControls.d.ts b/examples/jsm/controls/FirstPersonControls.d.ts index 31b6e4d239826e9a2be8e3e10f8113a4d1bd339c..7ad6791711ef807582f594e952af699c1f7e7970 100644 --- a/examples/jsm/controls/FirstPersonControls.d.ts +++ b/examples/jsm/controls/FirstPersonControls.d.ts @@ -22,7 +22,7 @@ export class FirstPersonControls { constrainVertical: boolean; verticalMin: number; verticalMax: number; - autoSpeedFactor: number; + mouseDragOn: boolean; handleResize(): void; lookAt(x: number | Vector3, y: number, z: number): this; diff --git a/examples/jsm/controls/FirstPersonControls.js b/examples/jsm/controls/FirstPersonControls.js index 772fc5b198906e21a47de664d152869336d74ab4..fd1449bb9c14732c4ba02040150fa47188244638 100644 --- a/examples/jsm/controls/FirstPersonControls.js +++ b/examples/jsm/controls/FirstPersonControls.js @@ -16,6 +16,8 @@ var FirstPersonControls = function ( object, domElement ) { this.domElement = ( domElement !== undefined ) ? domElement : document; + // API + this.enabled = true; this.movementSpeed = 1.0; @@ -35,11 +37,6 @@ var FirstPersonControls = function ( object, domElement ) { this.verticalMin = 0; this.verticalMax = Math.PI; - this.autoSpeedFactor = 0.0; - - this.mouseX = 0; - this.mouseY = 0; - this.moveForward = false; this.moveBackward = false; this.moveLeft = false; @@ -47,6 +44,13 @@ var FirstPersonControls = function ( object, domElement ) { this.mouseDragOn = false; + // internals + + this.autoSpeedFactor = 0.0; + + this.mouseX = 0; + this.mouseY = 0; + this.viewHalfX = 0; this.viewHalfY = 0; diff --git a/examples/jsm/controls/OrthographicTrackballControls.d.ts b/examples/jsm/controls/OrthographicTrackballControls.d.ts index f647a3f0971fd1815775c565078f3d5e7d3f9354..ffa937386d1cd751b09e9a5379456eb4c93599fa 100644 --- a/examples/jsm/controls/OrthographicTrackballControls.d.ts +++ b/examples/jsm/controls/OrthographicTrackballControls.d.ts @@ -8,7 +8,6 @@ export class OrthographicTrackballControls extends EventDispatcher { enabled: boolean; screen: {left: number; top: number; width: number; height: number}; - radius: number; rotateSpeed: number; zoomSpeed: number; noRotate: boolean; diff --git a/examples/jsm/controls/OrthographicTrackballControls.js b/examples/jsm/controls/OrthographicTrackballControls.js index 0c49d9453ef556d73f238cf06a32805564b22492..60734eb709ff6cbedf5834580c7451121f85b5f4 100644 --- a/examples/jsm/controls/OrthographicTrackballControls.js +++ b/examples/jsm/controls/OrthographicTrackballControls.js @@ -26,8 +26,6 @@ var OrthographicTrackballControls = function ( object, domElement ) { this.screen = { left: 0, top: 0, width: 0, height: 0 }; - this.radius = 0; - this.rotateSpeed = 1.0; this.zoomSpeed = 1.2; @@ -43,6 +41,8 @@ var OrthographicTrackballControls = function ( object, domElement ) { // internals + this.radius = 0; + this.target = new Vector3(); var EPS = 0.000001; diff --git a/examples/jsm/controls/TransformControls.d.ts b/examples/jsm/controls/TransformControls.d.ts index d03c2e27f52afaf3273442a36d7b718aac374e6c..2aa9d237a450760c71914b9aa3d8b7e8e64b0291 100644 --- a/examples/jsm/controls/TransformControls.d.ts +++ b/examples/jsm/controls/TransformControls.d.ts @@ -14,12 +14,12 @@ export class TransformControls extends Object3D { // API camera: Camera; - object: Object3D; + object: Object3D | undefined; enabled: boolean; - axis: string; + axis: string | null; mode: string; - translationSnap: Vector3; - rotationSnap: Vector3; + translationSnap: number | null; + rotationSnap: number | null; space: string; size: number; dragging: boolean; @@ -27,19 +27,14 @@ export class TransformControls extends Object3D { showY: boolean; showZ: boolean; isTransformControls: boolean; - visible: boolean; mouseButtons: { - LEFT: MOUSE; + LEFT: MOUSE; MIDDLE: MOUSE; RIGHT: MOUSE; }; attach(object: Object3D): this; detach(): this; - pointerHover(pointer: Object): void; - pointerDown(pointer: Object): void; - pointerMove(pointer: Object): void; - pointerUp(pointer: Object): void; getMode(): string; setMode(mode: string): void; setTranslationSnap(translationSnap: Number | null): void; @@ -47,6 +42,5 @@ export class TransformControls extends Object3D { setSize(size: number): void; setSpace(space: string): void; dispose(): void; - update(): void; }