Skip to content

Docs: Add FirstPersonControls page. #17493

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 13, 2019
Merged

Docs: Add FirstPersonControls page. #17493

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
166 changes: 166 additions & 0 deletions docs/examples/en/controls/FirstPersonControls.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,166 @@
<!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>
166 changes: 166 additions & 0 deletions docs/examples/zh/controls/FirstPersonControls.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,166 @@
<!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>
2 changes: 2 additions & 0 deletions docs/list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -356,6 +356,7 @@ 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",
Expand Down Expand Up @@ -798,6 +799,7 @@ 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",
Expand Down
8 changes: 6 additions & 2 deletions examples/js/controls/FirstPersonControls.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ THREE.FirstPersonControls = function ( object, domElement ) {

this.domElement = ( domElement !== undefined ) ? domElement : document;

// API

this.enabled = true;

this.movementSpeed = 1.0;
Expand All @@ -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;
Expand All @@ -39,8 +45,6 @@ THREE.FirstPersonControls = function ( object, domElement ) {
this.moveLeft = false;
this.moveRight = false;

this.mouseDragOn = false;

this.viewHalfX = 0;
this.viewHalfY = 0;

Expand Down
2 changes: 1 addition & 1 deletion examples/jsm/controls/FirstPersonControls.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Loading