Skip to content

Commit

Permalink
Update OrbitControls to the version included in three r158
Browse files Browse the repository at this point in the history
  • Loading branch information
vincentfretin committed Nov 18, 2023
1 parent f01f01b commit a708b22
Show file tree
Hide file tree
Showing 4 changed files with 199 additions and 43 deletions.
20 changes: 11 additions & 9 deletions components/orbit-controls/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,6 @@ Orbit controls for [A-Frame](https://aframe.io).

![](https://user-images.githubusercontent.com/674727/41206637-d58d7ec0-6cbb-11e8-8161-966396f45b79.gif)

Scene above built in [Supercraft](https://supermedium.com/supercraft) by Robert
Karpinski (@riskieee).

Automatically toggles `look-controls` on and off when entering and exiting VR.

Great for using as a viewer, better and easier than using WASD + mouse-drag,
Expand All @@ -29,10 +26,10 @@ supports all the properties.
| -------- | ----------- | ------------- |
| autoRotate | Set to true to automatically rotate around the target. | false |
| autoRotateSpeed | How fast to rotate around the target. | 2 (30 seconds per rotation at 60fps) |
| cursor | The focus point of the `minTargetRadius` and `maxTargetRadius` limits. It can be updated manually at any point to change the center of interest for the `target`. | 0 0 0 |
| dampingFactor | Damping inertia if `enableDamping`. | 0.1 |
| enabled | Whether enabled. You can also call `.pause()` on the entity. | true |
| enableDamping | Set to true to enable damping (inertia), which can be used to give a sense of weight to the controls. | true |
| enableKeys | Enable arrow keys. | true |
| enablePan | Enable panning (i.e., right click drag or three finger drag). | true |
| enableRotate | Enable rotation (i.e., left click drag or single finger drag). Use Azimuth angles to constrain to single axis. | true |
| enableZoom | Enable zoom (i.e., scroll or pinch). | true |
Expand All @@ -44,12 +41,16 @@ supports all the properties.
| maxPolarAngle | How far you can orbit vertically, upper limit. Range is 0 to 180 degrees. | 90 |
| minDistance | How far you can dolly in. | 0 |
| minPolarAngle | How far you can orbit vertically, lower limit. Range is 0 to 180 degrees. | 0 |
| minTargetRadius | How close you can get the target to the 3D `cursor`. | 0 |
| maxTargetRadius | How far you can move the target from the 3D `cursor`. | Infinity (no limit) |
| minZoom | How far you can zoom in (OrthographicCamera only). | 0 |
| maxZoom | How far you can zoom out (OrthographicCamera only). | Infinity (no limit) |
| panSpeed | Speed of panning. | 1 |
| rotateSpeed | Speed of rotation. | 1 |
| screenSpacePanning | Defines how the camera's position is translated when panning. If true, the camera pans in screen space. Otherwise, the camera pans in the plane orthogonal to the camera's up direction. | false |
| target | Focus point of controls. look-at vector. | 0 0 0 |
| zoomSpeed | Speed of zooming / dollying. | 1 |
| zoomToCursor | Setting this property to true allows to zoom to the cursor's position. | false |

### Installation

Expand All @@ -60,15 +61,16 @@ Install and use by directly including the [browser files](dist):
```html
<head>
<title>My A-Frame Scene</title>
<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-environment-component@1.3.3/dist/aframe-environment-component.min.js"></script>
<script src="https://unpkg.com/aframe-orbit-controls@1.3.2/dist/aframe-orbit-controls.min.js"></script>
<script src="https://unpkg.com/aframe-supercraft-loader@1.1.3/dist/aframe-supercraft-loader.js"></script>
</head>

<body>
<a-scene>
<a-entity supercraft-loader="name: icky-snake"></a-entity>
<a-entity camera look-controls orbit-controls="target: 0 1.6 -0.5; minDistance: 0.5; maxDistance: 180; initialPosition: 0 5 15"></a-entity>
<a-scene environment="preset: forest">
<a-torus-knot position="0 2 0"></a-torus-knot>
<a-entity camera look-controls="enabled: false" orbit-controls="target: 0 2 0; minDistance: 2; maxDistance: 180; initialPosition: 0 3 5; rotateSpeed: 0.5"></a-entity>
</a-scene>
</a-scene>
</body>
```
Expand Down
4 changes: 2 additions & 2 deletions components/orbit-controls/examples/basic/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
<meta charset="utf-8">
<title>A-Frame Orbit Controls Component - Basic</title>
<meta name="description" content="Basic example for A-Frame Orbit Controls component."></meta>
<script src="https://aframe.io/releases/1.4.1/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-environment-component@1.3.2/dist/aframe-environment-component.min.js"></script>
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-environment-component@1.3.3/dist/aframe-environment-component.min.js"></script>
<script src="../../dist/aframe-orbit-controls.min.js"></script>
</head>
<body>
Expand Down
15 changes: 12 additions & 3 deletions components/orbit-controls/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@ AFRAME.registerComponent('orbit-controls', {
schema: {
autoRotate: {type: 'boolean'},
autoRotateSpeed: {default: 2},
cursor: {type: 'vec3'},
dampingFactor: {default: 0.1},
enabled: {default: true},
enableDamping: {default: true},
enableKeys: {default: true},
enablePan: {default: true},
enableRotate: {default: true},
enableZoom: {default: true},
Expand All @@ -24,12 +24,16 @@ AFRAME.registerComponent('orbit-controls', {
maxPolarAngle: {default: AFRAME.utils.device.isMobile() ? 90 : 120},
minDistance: {default: 1},
minPolarAngle: {default: 0},
minTargetRadius: {type: 'number', default: 0},
maxTargetRadius: {type: 'number', default: Infinity},
minZoom: {default: 0},
maxZoom: {type: 'number', default: Infinity},
panSpeed: {default: 1},
rotateSpeed: {default: 0.05},
screenSpacePanning: {default: false},
target: {type: 'vec3'},
zoomSpeed: {default: 0.5}
zoomSpeed: {default: 0.5},
zoomToCursor: {default: false}
},

init: function () {
Expand All @@ -49,6 +53,7 @@ AFRAME.registerComponent('orbit-controls', {
});

this.target = new THREE.Vector3();
this.cursor = new THREE.Vector3();
el.getObject3D('camera').position.copy(this.data.initialPosition);
},

Expand Down Expand Up @@ -100,12 +105,12 @@ AFRAME.registerComponent('orbit-controls', {
if (!controls) { return; }

controls.target = this.target.copy(data.target);
controls.cursor = this.cursor.copy(data.cursor);
controls.autoRotate = data.autoRotate;
controls.autoRotateSpeed = data.autoRotateSpeed;
controls.dampingFactor = data.dampingFactor;
controls.enabled = data.enabled;
controls.enableDamping = data.enableDamping;
controls.enableKeys = data.enableKeys;
controls.enablePan = data.enablePan;
controls.enableRotate = data.enableRotate;
controls.enableZoom = data.enableZoom;
Expand All @@ -115,12 +120,16 @@ AFRAME.registerComponent('orbit-controls', {
controls.maxDistance = data.maxDistance;
controls.minDistance = data.minDistance;
controls.minPolarAngle = THREE.MathUtils.degToRad(data.minPolarAngle);
controls.minTargetRadius = data.minTargetRadius;
controls.maxTargetRadius = data.maxTargetRadius;
controls.minAzimuthAngle = THREE.MathUtils.degToRad(data.minAzimuthAngle);
controls.minZoom = data.minZoom;
controls.maxZoom = data.maxZoom;
controls.panSpeed = data.panSpeed;
controls.rotateSpeed = data.rotateSpeed;
controls.screenSpacePanning = data.screenSpacePanning;
controls.zoomSpeed = data.zoomSpeed;
controls.zoomToCursor = data.zoomToCursor;
},

tick: function () {
Expand Down
Loading

0 comments on commit a708b22

Please sign in to comment.