Skip to content

T
three.js

Ablesons / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

提交 a709591d 编写于 作者: D Dinesh Salunke
浏览文件
操作

Merging changes from dev branch

上级 520c30cd f1ac751d
隐藏空白更改
内联 并排
Showing with 1415 addition and 156 deletion
docs/examples/en/controls/FirstPersonControls.html 0 → 100644
浏览文件 @ a709591d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>
<p class="desc">
This class is an alternative implementation of [page:FlyControls].
</p>
<h2>Example</h2>
<p>[example:webgl_geometry_terrain webgl / geometry / terrain ]</p>
<h2>Constructor</h2>
<h3>[name]( [param:Camera object], [param:HTMLDOMElement domElement] )</h3>
<p>
<p>
[page:Camera object]: The camera to be controlled.
</p>
<p>
[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.
</p>
<p>
Creates a new instance of [name].
</p>
</p>
<h2>Properties</h2>
<h3>[property:Boolean activeLook]</h3>
<p>
Whether or not it's possible to look around. Default is *true*.
</p>
<h3>[property:Boolean autoForward]</h3>
<p>
Whether or not the camera is automatically moved forward. Default is *false*.
</p>
<h3>[property:Boolean constrainVertical]</h3>
<p>
Whether or not looking around is vertically constrained by [[page:.verticalMin], [page:.verticalMax]]. Default is *false*.
</p>
<h3>[property:HTMLDOMElement domElement]</h3>
<p>
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.
</p>
<h3>[property:Boolean enabled]</h3>
<p>
Whether or not the controls are enabled. Default is *true*.
</p>
<h3>[property:Number heightCoef]</h3>
<p>
Determines how much faster the camera moves when it's y-component is near [page:.heightMax]. Default is *1*.
</p>
<h3>[property:Number heightMax]</h3>
<p>
Upper camera height limit used for movement speed adjusment. Default is *1*.
</p>
<h3>[property:Number heightMin]</h3>
<p>
Lower camera height limit used for movement speed adjusment. Default is *0*.
</p>
<h3>[property:Boolean heightSpeed]</h3>
<p>
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.
</p>
<h3>[property:Boolean lookVertical]</h3>
<p>
Whether or not it's possible to vertically look around. Default is *true*.
</p>
<h3>[property:Number lookSpeed]</h3>
<p>
The look around speed. Default is *0.005*.
</p>
<h3>[property:Boolean mouseDragOn]</h3>
<p>
Whether or not the mouse is pressed down. Read-only property.
</p>
<h3>[property:Number movementSpeed]</h3>
<p>
The movement speed. Default is *1*.
</p>
<h3>[property:Camera object]</h3>
<p>
The camera to be controlled.
</p>
<h3>[property:Number verticalMax]</h3>
<p>
How far you can vertically look around, upper limit. Range is 0 to Math.PI radians. Default is *Math.PI*.
</p>
<h3>[property:Number verticalMin]</h3>
<p>
How far you can vertically look around, lower limit. Range is 0 to Math.PI radians. Default is *0*.
</p>
<h2>Methods</h2>
<h3>[method:null dispose] ()</h3>
<p>
Should be called if the controls is no longer required.
</p>
<h3>[method:null handleResize] ()</h3>
<p>
Should be called if the application window is resized.
</p>
<h3>[method:FirstPersonControls lookAt]( [param:Vector3 vector] )<br />
[method:FirstPersonControls lookAt]( [param:Float x], [param:Float y], [param:Float z] )</h3>
<p>
<p>
<p>
vector - A vector representing the target position.
</p>
<p>
Optionally, the x, y, z components of the world space position.
</p>
</p>
<p>
Ensures the controls orient the camera towards the defined target position.
</p>
</p>
<h3>[method:null update] ( [param:Number delta] )</h3>
<p>
<p>
[page:Number delta]: Time delta value.
</p>
<p>
Updates the controls. Usually called in the animation loop.
</p>
</p>
<h2>Source</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/examples/js/controls/FirstPersonControls.js examples/js/controls/FirstPersonControls.js]
</p>
</body>
</html>
docs/examples/en/controls/OrthographicTrackballControls.html 0 → 100644
浏览文件 @ a709591d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
[page:EventDispatcher] &rarr;
<h1>[name]</h1>
<p class="desc">
<p>
This class is a special version of [page:TrackballControls] which supports orthographic cameras.
</p>
</p>
<h2>Example</h2>
<p>[example:misc_controls_trackball_orthographic misc / controls / trackball / orthographic ]</p>
<h2>Constructor</h2>
<h3>[name]( [param:OrthographicCamera camera], [param:HTMLDOMElement domElement] )</h3>
<p>
<p>
[page:OrthographicCamera camera]: The orthographic camera of the rendered scene.
</p>
<p>
[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.
</p>
<p>
Creates a new instance of [name].
</p>
</p>
<h2>Events</h2>
<h3>change</h3>
<p>
Fires when the camera has been transformed by the controls.
</p>
<h3>start</h3>
<p>
Fires when an interaction (e.g. touch) was initiated.
</p>
<h3>end</h3>
<p>
Fires when an interaction has finished.
</p>
<h2>Properties</h2>
<h3>[property:HTMLDOMElement domElement]</h3>
<p>
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.
</p>
<h3>[property:Number dynamicDampingFactor]</h3>
<p>
Defines the intensity of damping. Only considered if [page:.staticMoving staticMoving] is set to *false*. Default is *0.2*.
</p>
<h3>[property:Boolean enabled]</h3>
<p>
Whether or not the controls are enabled.
</p>
<h3>[property:Array keys]</h3>
<p>
This array holds keycodes for controlling interactions.
<ul>
<li>When the first defined key is pressed, all mouse interactions (left, middle, right) performs orbiting.</li>
<li>When the second defined key is pressed, all mouse interactions (left, middle, right) performs zooming.</li>
<li>When the third defined key is pressed, all mouse interactions (left, middle, right) performs panning.</li>
</ul>
Default is *65, 83, 68* which represents A, S, D.
</p>
<h3>[property:Boolean noPan]</h3>
<p>
Whether or not panning is disabled. Default is *false*.
</p>
<h3>[property:Boolean noRoll]</h3>
<p>
Whether or not rolling is disabled. Default is *false*.
</p>
<h3>[property:Boolean noRotate]</h3>
<p>
Whether or not rotation is disabled. Default is *false*.
</p>
<h3>[property:Boolean noZoom]</h3>
<p>
Whether or not zooming is disabled. Default is *false*.
</p>
<h3>[property:OrthographicCamera object]</h3>
<p>
The camera being controlled.
</p>
<h3>[property:Number panSpeed]</h3>
<p>
The zoom speed. Default is *0.3*.
</p>
<h3>[property:Number rotateSpeed]</h3>
<p>
The rotation speed. Default is *1.0*.
</p>
<h3>[property:Object screen]</h3>
<p>
Represents the properties of the screen. Automatically set when [page:.handleResize handleResize]() is called.
<ul>
<li>left: Represents the offset in pixels to the screen's left boundary.</li>
<li>top: Represents the offset in pixels to the screen's top boundary.</li>
<li>width: Represents the screen width in pixels.</li>
<li>height: Represents the screen height in pixels.</li>
</ul>
</p>
<h3>[property:Boolean staticMoving]</h3>
<p>
Whether or not damping is disabled. Default is *false*.
</p>
<h3>[property:Number zoomSpeed]</h3>
<p>
The zoom speed. Default is *1.2*.
</p>
<h2>Methods</h2>
<h3>[method:null dispose] ()</h3>
<p>
Should be called if the controls is no longer required.
</p>
<h3>[method:null handleResize] ()</h3>
<p>
Should be called if the application window is resized.
</p>
<h3>[method:null panCamera] ()</h3>
<p>
Performs panning if necessary. Called by [page:.update update]().
</p>
<h3>[method:null reset] ()</h3>
<p>
Resets the controls to its initial state.
</p>
<h3>[method:null rotateCamera] ()</h3>
<p>
Rotates the camera if necessary. Called by [page:.update update]().
</p>
<h3>[method:null update] ()</h3>
<p>
Updates the controls. Usually called in the animation loop.
</p>
<h3>[method:null zoomCamera] ()</h3>
<p>
Performs zooming if necessary. Called by [page:.update update]().
</p>
<h2>Source</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/examples/js/controls/TrackballControls.js examples/js/controls/TrackballControls.js]
</p>
</body>
</html>
docs/examples/en/controls/TrackballControls.html
浏览文件 @ a709591d
......@@ -13,8 +13,13 @@
<h1>[name]</h1>
<p class="desc">
[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".
<p>
[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".
</p>
<p>
Notice that [name] can only be used with a perspective camera. Use [page:OrthographicTrackballControls] when working with an orthographic camera.
</p>
</p>
<h2>Example</h2>
......@@ -23,10 +28,10 @@
<h2>Constructor</h2>
<h3>[name]( [param:Camera camera], [param:HTMLDOMElement domElement] )</h3>
<h3>[name]( [param:PerspectiveCamera camera], [param:HTMLDOMElement domElement] )</h3>
<p>
<p>
[page:Camera camera]: The camera of the rendered scene.
[page:PerspectiveCamera camera]: The perspective camera of the rendered scene.
</p>
<p>
[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*.
</p>
<h3>[property:Camera object]</h3>
<h3>[property:PerspectiveCamera object]</h3>
<p>
The camera being controlled.
</p>
......
docs/examples/en/controls/TransformControls.html 0 → 100644
浏览文件 @ a709591d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
[page:Object3D] &rarr;
<h1>[name]</h1>
<p class="desc">
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.
</p>
<h2>Example</h2>
<p>[example:misc_controls_transform misc / controls / transform ]</p>
<h2>Constructor</h2>
<h3>[name]( [param:Camera camera], [param:HTMLDOMElement domElement] )</h3>
<p>
<p>
[page:Camera camera]: The camera of the rendered scene.
</p>
<p>
[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.
</p>
<p>
Creates a new instance of [name].
</p>
</p>
<h2>Events</h2>
<h3>change</h3>
<p>
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".
</p>
<h3>mouseDown</h3>
<p>
Fires if a pointer (mouse/touch) becomes active.
</p>
<h3>mouseUp</h3>
<p>
Fires if a pointer (mouse/touch) is no longer active.
</p>
<h3>objectChange</h3>
<p>
Fires if the controlled 3D object is changed.
</p>
<h2>Properties</h2>
<p>See the base [page:Object3D] class for common properties.</p>
<h3>[property:String axis]</h3>
<p>
The current transformation axis.
</p>
<h3>[property:Camera camera]</h3>
<p>
The camera of the rendered scene.
</p>
<h3>[property:HTMLDOMElement domElement]</h3>
<p>
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.
</p>
<h3>[property:Boolean dragging]</h3>
<p>
Whether or not dragging is currently performed. Read-only property.
</p>
<h3>[property:Boolean enabled]</h3>
<p>
Whether or not the controls are enabled.
</p>
<h3>[property:String mode]</h3>
<p>
The current transformation mode. Possible values are "translate", "rotate" and "scale". Default is *translate*.
</p>
<h3>[property:Object3D object]</h3>
<p>
The 3D object being controlled.
</p>
<h3>[property:Number rotationSnap]</h3>
<p>
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*.
</p>
<h3>[property:Boolean showX]</h3>
<p>
Whether or not the x-axis helper should be visible. Default is *true*.
</p>
<h3>[property:Boolean showY]</h3>
<p>
Whether or not the y-axis helper should be visible. Default is *true*.
</p>
<h3>[property:Boolean showZ]</h3>
<p>
Whether or not the z-axis helper should be visible. Default is *true*.
</p>
<h3>[property:Number size]</h3>
<p>
The size of the helper UI (axes/planes). Default is *1*.
</p>
<h3>[property:String space]</h3>
<p>
Defines in which coordinate space transformations should be performed. Possible values are "world" and "local". Default is *world*.
</p>
<h3>[property:Number translationSnap]</h3>
<p>
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*.
</p>
<h2>Methods</h2>
<p>See the base [page:Object3D] class for common methods.</p>
<h3>[method:TransformControls attach] ( [param:Object3D object] )</h3>
<p>
<p>
[page:Object3D object]: The 3D object that should be transformed.
</p>
<p>
Sets the 3D object that should be transformed and ensures the controls UI is visible.
</p>
</p>
<h3>[method:TransformControls detach] ()</h3>
<p>
Removes the current 3D object from the controls and makes the helper UI is invisible.
</p>
<h3>[method:null dispose] ()</h3>
<p>
Should be called if the controls is no longer required.
</p>
<h3>[method:String getMode] ()</h3>
<p>
Returns the transformation mode.
</p>
<h3>[method:null setMode] ( [param:String mode] )</h3>
<p>
<p>
[page:String mode]: The transformation mode.
</p>
<p>
Sets the transformation mode.
</p>
</p>
<h3>[method:null setRotationSnap] ( [param:Number rotationSnap] )</h3>
<p>
<p>
[page:Number rotationSnap]: The rotation snap.
</p>
<p>
Sets the rotation snap.
</p>
</p>
<h3>[method:null setSize] ( [param:Number size] )</h3>
<p>
<p>
[page:Number size]: The size of the helper UI.
</p>
<p>
Sets the size of the helper UI.
</p>
</p>
<h3>[method:null setSpace] ( [param:String space] )</h3>
<p>
<p>
[page:String space]: The coordinate space in which transformations are applied.
</p>
<p>
Sets the coordinate space in which transformations are applied.
</p>
</p>
<h3>[method:null setTranslationSnap] ( [param:Number translationSnap] )</h3>
<p>
<p>
[page:Number translationSnap]: The translation snap.
</p>
<p>
Sets the translation snap.
</p>
</p>
<h2>Source</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/examples/js/controls/TransformControls.js examples/js/controls/TransformControls.js]
</p>
</body>
</html>
docs/examples/zh/controls/FirstPersonControls.html 0 → 100644
浏览文件 @ a709591d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>
<p class="desc">
This class is an alternative implementation of [page:FlyControls].
</p>
<h2>Example</h2>
<p>[example:webgl_geometry_terrain webgl / geometry / terrain ]</p>
<h2>Constructor</h2>
<h3>[name]( [param:Camera object], [param:HTMLDOMElement domElement] )</h3>
<p>
<p>
[page:Camera object]: The camera to be controlled.
</p>
<p>
[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.
</p>
<p>
Creates a new instance of [name].
</p>
</p>
<h2>Properties</h2>
<h3>[property:Boolean activeLook]</h3>
<p>
Whether or not it's possible to look around. Default is *true*.
</p>
<h3>[property:Boolean autoForward]</h3>
<p>
Whether or not the camera is automatically moved forward. Default is *false*.
</p>
<h3>[property:Boolean constrainVertical]</h3>
<p>
Whether or not looking around is vertically constrained by [[page:.verticalMin], [page:.verticalMax]]. Default is *false*.
</p>
<h3>[property:HTMLDOMElement domElement]</h3>
<p>
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.
</p>
<h3>[property:Boolean enabled]</h3>
<p>
Whether or not the controls are enabled. Default is *true*.
</p>
<h3>[property:Number heightCoef]</h3>
<p>
Determines how much faster the camera moves when it's y-component is near [page:.heightMax]. Default is *1*.
</p>
<h3>[property:Number heightMax]</h3>
<p>
Upper camera height limit used for movement speed adjusment. Default is *1*.
</p>
<h3>[property:Number heightMin]</h3>
<p>
Lower camera height limit used for movement speed adjusment. Default is *0*.
</p>
<h3>[property:Boolean heightSpeed]</h3>
<p>
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.
</p>
<h3>[property:Boolean lookVertical]</h3>
<p>
Whether or not it's possible to vertically look around. Default is *true*.
</p>
<h3>[property:Number lookSpeed]</h3>
<p>
The look around speed. Default is *0.005*.
</p>
<h3>[property:Boolean mouseDragOn]</h3>
<p>
Whether or not the mouse is pressed down. Read-only property.
</p>
<h3>[property:Number movementSpeed]</h3>
<p>
The movement speed. Default is *1*.
</p>
<h3>[property:Camera object]</h3>
<p>
The camera to be controlled.
</p>
<h3>[property:Number verticalMax]</h3>
<p>
How far you can vertically look around, upper limit. Range is 0 to Math.PI radians. Default is *Math.PI*.
</p>
<h3>[property:Number verticalMin]</h3>
<p>
How far you can vertically look around, lower limit. Range is 0 to Math.PI radians. Default is *0*.
</p>
<h2>Methods</h2>
<h3>[method:null dispose] ()</h3>
<p>
Should be called if the controls is no longer required.
</p>
<h3>[method:null handleResize] ()</h3>
<p>
Should be called if the application window is resized.
</p>
<h3>[method:FirstPersonControls lookAt]( [param:Vector3 vector] )<br />
[method:FirstPersonControls lookAt]( [param:Float x], [param:Float y], [param:Float z] )</h3>
<p>
<p>
<p>
vector - A vector representing the target position.
</p>
<p>
Optionally, the x, y, z components of the world space position.
</p>
</p>
<p>
Ensures the controls orient the camera towards the defined target position.
</p>
</p>
<h3>[method:null update] ( [param:Number delta] )</h3>
<p>
<p>
[page:Number delta]: Time delta value.
</p>
<p>
Updates the controls. Usually called in the animation loop.
</p>
</p>
<h2>Source</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/examples/js/controls/FirstPersonControls.js examples/js/controls/FirstPersonControls.js]
</p>
</body>
</html>
docs/examples/zh/controls/OrthographicTrackballControls.html 0 → 100644
浏览文件 @ a709591d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
[page:EventDispatcher] &rarr;
<h1>[name]</h1>
<p class="desc">
<p>
This class is a special version of [page:TrackballControls] which supports orthographic cameras.
</p>
</p>
<h2>Example</h2>
<p>[example:misc_controls_trackball_orthographic misc / controls / trackball / orthographic ]</p>
<h2>Constructor</h2>
<h3>[name]( [param:OrthographicCamera camera], [param:HTMLDOMElement domElement] )</h3>
<p>
<p>
[page:OrthographicCamera camera]: The orthographic camera of the rendered scene.
</p>
<p>
[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.
</p>
<p>
Creates a new instance of [name].
</p>
</p>
<h2>Events</h2>
<h3>change</h3>
<p>
Fires when the camera has been transformed by the controls.
</p>
<h3>start</h3>
<p>
Fires when an interaction (e.g. touch) was initiated.
</p>
<h3>end</h3>
<p>
Fires when an interaction has finished.
</p>
<h2>Properties</h2>
<h3>[property:HTMLDOMElement domElement]</h3>
<p>
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.
</p>
<h3>[property:Number dynamicDampingFactor]</h3>
<p>
Defines the intensity of damping. Only considered if [page:.staticMoving staticMoving] is set to *false*. Default is *0.2*.
</p>
<h3>[property:Boolean enabled]</h3>
<p>
Whether or not the controls are enabled.
</p>
<h3>[property:Array keys]</h3>
<p>
This array holds keycodes for controlling interactions.
<ul>
<li>When the first defined key is pressed, all mouse interactions (left, middle, right) performs orbiting.</li>
<li>When the second defined key is pressed, all mouse interactions (left, middle, right) performs zooming.</li>
<li>When the third defined key is pressed, all mouse interactions (left, middle, right) performs panning.</li>
</ul>
Default is *65, 83, 68* which represents A, S, D.
</p>
<h3>[property:Boolean noPan]</h3>
<p>
Whether or not panning is disabled. Default is *false*.
</p>
<h3>[property:Boolean noRoll]</h3>
<p>
Whether or not rolling is disabled. Default is *false*.
</p>
<h3>[property:Boolean noRotate]</h3>
<p>
Whether or not rotation is disabled. Default is *false*.
</p>
<h3>[property:Boolean noZoom]</h3>
<p>
Whether or not zooming is disabled. Default is *false*.
</p>
<h3>[property:OrthographicCamera object]</h3>
<p>
The camera being controlled.
</p>
<h3>[property:Number panSpeed]</h3>
<p>
The zoom speed. Default is *0.3*.
</p>
<h3>[property:Number rotateSpeed]</h3>
<p>
The rotation speed. Default is *1.0*.
</p>
<h3>[property:Object screen]</h3>
<p>
Represents the properties of the screen. Automatically set when [page:.handleResize handleResize]() is called.
<ul>
<li>left: Represents the offset in pixels to the screen's left boundary.</li>
<li>top: Represents the offset in pixels to the screen's top boundary.</li>
<li>width: Represents the screen width in pixels.</li>
<li>height: Represents the screen height in pixels.</li>
</ul>
</p>
<h3>[property:Boolean staticMoving]</h3>
<p>
Whether or not damping is disabled. Default is *false*.
</p>
<h3>[property:Number zoomSpeed]</h3>
<p>
The zoom speed. Default is *1.2*.
</p>
<h2>Methods</h2>
<h3>[method:null dispose] ()</h3>
<p>
Should be called if the controls is no longer required.
</p>
<h3>[method:null handleResize] ()</h3>
<p>
Should be called if the application window is resized.
</p>
<h3>[method:null panCamera] ()</h3>
<p>
Performs panning if necessary. Called by [page:.update update]().
</p>
<h3>[method:null reset] ()</h3>
<p>
Resets the controls to its initial state.
</p>
<h3>[method:null rotateCamera] ()</h3>
<p>
Rotates the camera if necessary. Called by [page:.update update]().
</p>
<h3>[method:null update] ()</h3>
<p>
Updates the controls. Usually called in the animation loop.
</p>
<h3>[method:null zoomCamera] ()</h3>
<p>
Performs zooming if necessary. Called by [page:.update update]().
</p>
<h2>Source</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/examples/js/controls/TrackballControls.js examples/js/controls/TrackballControls.js]
</p>
</body>
</html>
docs/examples/zh/controls/TrackballControls.html
浏览文件 @ a709591d
......@@ -13,8 +13,13 @@
<h1>[name]</h1>
<p class="desc">
[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".
<p>
[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".
</p>
<p>
Notice that [name] can only be used with a perspective camera. Use [page:OrthographicTrackballControls] when working with an orthographic camera.
</p>
</p>
<h2>Example</h2>
......@@ -23,10 +28,10 @@
<h2>Constructor</h2>
<h3>[name]( [param:Camera camera], [param:HTMLDOMElement domElement] )</h3>
<h3>[name]( [param:PerspectiveCamera camera], [param:HTMLDOMElement domElement] )</h3>
<p>
<p>
[page:Camera camera]: The camera of the rendered scene.
[page:PerspectiveCamera camera]: The perspective camera of the rendered scene.
</p>
<p>
[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*.
</p>
<h3>[property:Camera object]</h3>
<h3>[property:PerspectiveCamera object]</h3>
<p>
The camera being controlled.
</p>
......
docs/examples/zh/controls/TransformControls.html 0 → 100644
浏览文件 @ a709591d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
[page:Object3D] &rarr;
<h1>[name]</h1>
<p class="desc">
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.
</p>
<h2>Example</h2>
<p>[example:misc_controls_transform misc / controls / transform ]</p>
<h2>Constructor</h2>
<h3>[name]( [param:Camera camera], [param:HTMLDOMElement domElement] )</h3>
<p>
<p>
[page:Camera camera]: The camera of the rendered scene.
</p>
<p>
[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.
</p>
<p>
Creates a new instance of [name].
</p>
</p>
<h2>Events</h2>
<h3>change</h3>
<p>
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".
</p>
<h3>mouseDown</h3>
<p>
Fires if a pointer (mouse/touch) becomes active.
</p>
<h3>mouseUp</h3>
<p>
Fires if a pointer (mouse/touch) is no longer active.
</p>
<h3>objectChange</h3>
<p>
Fires if the controlled 3D object is changed.
</p>
<h2>Properties</h2>
<p>See the base [page:Object3D] class for common properties.</p>
<h3>[property:String axis]</h3>
<p>
The current transformation axis.
</p>
<h3>[property:Camera camera]</h3>
<p>
The camera of the rendered scene.
</p>
<h3>[property:HTMLDOMElement domElement]</h3>
<p>
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.
</p>
<h3>[property:Boolean dragging]</h3>
<p>
Whether or not dragging is currently performed. Read-only property.
</p>
<h3>[property:Boolean enabled]</h3>
<p>
Whether or not the controls are enabled.
</p>
<h3>[property:String mode]</h3>
<p>
The current transformation mode. Possible values are "translate", "rotate" and "scale". Default is *translate*.
</p>
<h3>[property:Object3D object]</h3>
<p>
The 3D object being controlled.
</p>
<h3>[property:Number rotationSnap]</h3>
<p>
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*.
</p>
<h3>[property:Boolean showX]</h3>
<p>
Whether or not the x-axis helper should be visible. Default is *true*.
</p>
<h3>[property:Boolean showY]</h3>
<p>
Whether or not the y-axis helper should be visible. Default is *true*.
</p>
<h3>[property:Boolean showZ]</h3>
<p>
Whether or not the z-axis helper should be visible. Default is *true*.
</p>
<h3>[property:Number size]</h3>
<p>
The size of the helper UI (axes/planes). Default is *1*.
</p>
<h3>[property:String space]</h3>
<p>
Defines in which coordinate space transformations should be performed. Possible values are "world" and "local". Default is *world*.
</p>
<h3>[property:Number translationSnap]</h3>
<p>
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*.
</p>
<h2>Methods</h2>
<p>See the base [page:Object3D] class for common methods.</p>
<h3>[method:TransformControls attach] ( [param:Object3D object] )</h3>
<p>
<p>
[page:Object3D object]: The 3D object that should be transformed.
</p>
<p>
Sets the 3D object that should be transformed and ensures the controls UI is visible.
</p>
</p>
<h3>[method:TransformControls detach] ()</h3>
<p>
Removes the current 3D object from the controls and makes the helper UI is invisible.
</p>
<h3>[method:null dispose] ()</h3>
<p>
Should be called if the controls is no longer required.
</p>
<h3>[method:String getMode] ()</h3>
<p>
Returns the transformation mode.
</p>
<h3>[method:null setMode] ( [param:String mode] )</h3>
<p>
<p>
[page:String mode]: The transformation mode.
</p>
<p>
Sets the transformation mode.
</p>
</p>
<h3>[method:null setRotationSnap] ( [param:Number rotationSnap] )</h3>
<p>
<p>
[page:Number rotationSnap]: The rotation snap.
</p>
<p>
Sets the rotation snap.
</p>
</p>
<h3>[method:null setSize] ( [param:Number size] )</h3>
<p>
<p>
[page:Number size]: The size of the helper UI.
</p>
<p>
Sets the size of the helper UI.
</p>
</p>
<h3>[method:null setSpace] ( [param:String space] )</h3>
<p>
<p>
[page:String space]: The coordinate space in which transformations are applied.
</p>
<p>
Sets the coordinate space in which transformations are applied.
</p>
</p>
<h3>[method:null setTranslationSnap] ( [param:Number translationSnap] )</h3>
<p>
<p>
[page:Number translationSnap]: The translation snap.
</p>
<p>
Sets the translation snap.
</p>
</p>
<h2>Source</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/examples/js/controls/TransformControls.js examples/js/controls/TransformControls.js]
</p>
</body>
</html>
docs/list.js
浏览文件 @ a709591d
......@@ -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"
},
"几何体": {
......
editor/css/dark.css
浏览文件 @ a709591d
......@@ -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;
......
editor/css/light.css
浏览文件 @ a709591d
......@@ -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;
......
editor/css/main.css
浏览文件 @ a709591d
......@@ -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;
......
editor/js/Sidebar.Properties.js
浏览文件 @ a709591d
......@@ -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;
......
editor/js/Sidebar.js
浏览文件 @ a709591d
......@@ -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;
......
editor/js/libs/ui.js
浏览文件 @ a709591d
......@@ -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 );
......
examples/js/controls/FirstPersonControls.js
浏览文件 @ a709591d
......@@ -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;
......
examples/js/controls/OrthographicTrackballControls.js
浏览文件 @ a709591d
......@@ -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;
......
examples/jsm/controls/FirstPersonControls.d.ts
浏览文件 @ a709591d
......@@ -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;
......
examples/jsm/controls/FirstPersonControls.js
浏览文件 @ a709591d
......@@ -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;
......
examples/jsm/controls/OrthographicTrackballControls.d.ts
浏览文件 @ a709591d
......@@ -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;
......
examples/jsm/controls/OrthographicTrackballControls.js
浏览文件 @ a709591d
......@@ -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;
......
examples/jsm/controls/TransformControls.d.ts
浏览文件 @ a709591d
......@@ -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;
}
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或