Ubujira
/
skinview3d
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

First pass at conversion to Typescript

This commit is contained in:
Sean Boult 2018-07-17 13:49:00 -05:00
parent 77a1bd46d0
commit a48f935f06
21 changed files with 890 additions and 894 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -59,3 +59,5 @@ typings/
build/
_ignore/
dist/
.DS_Store

12
examples/index.html
View File

@ -1,17 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>skinview3d</title>
<link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">
</head>
<body>
<div id="skin_container"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>
<script type="text/javascript" src="../build/skinview3d.js"></script>
<script type="text/javascript" src="../build/utils.js"></script>
<script type="text/javascript" src="../build/orbit_controls.js"></script>
<script type="text/javascript" src="../build/animation.js"></script>
<script type="text/javascript" src="../build/model.js"></script>
<script type="text/javascript" src="../build/viewer.js"></script>
<script>
let skinViewer = new skinview3d.SkinViewer({
@ -35,4 +42,5 @@
</body>
</html>
</html>

4
package.json
View File

@ -8,10 +8,10 @@
"scripts": {
"build": "rollup -c tools/rollup.module.js && rollup -c tools/rollup.browser.js && rollup -c tools/rollup.browser.min.js",
"prepare": "npm test && rimraf build && npm run build",
"test": "karma start && npm run lint",
"lint": "eslint src/** tools/** && tslint -c tslint.json types/**.ts",
"dev": "npm-run-all --parallel watch serve",
"watch": "rollup -w -c tools/rollup.browser.js",
"test": "tsc -p tsconfig.json",
"serve": "ws"
},
"repository": {
@ -64,4 +64,4 @@
"url-loader": "^1.0.1",
"webpack": "^4.15.1"
}
}
}

5
src/.eslintrc.js
View File

@ -1,5 +0,0 @@
module.exports = {
"env": {
"browser": true
}
}

60
src/animation.js → src/animation.ts
View File

@ -1,3 +1,5 @@
import { PlayerObject } from "./model"
function invokeAnimation(animation, player, time) {
if (animation instanceof CompositeAnimation) {
animation.play(player, time);
@ -8,14 +10,25 @@ function invokeAnimation(animation, player, time) {
}
}
class AnimationHandle {
interface IAnimation {
play(player: PlayerObject, time: number): void;
}
class AnimationHandle implements IAnimation {
animation: Animation;
paused = false;
speed: number = 1.0;
private _paused = false;
private _lastChange: number = null;
private _speed: number = 1.0;
private _lastChangeX: number = null;
constructor(animation) {
this.animation = animation;
this.paused = this._paused = false;
this.speed = this._speed = 1.0;
this._lastChange = null;
this._lastChangeX = null;
}
play(player, time) {
if (this._lastChange === null) {
this._lastChange = time;
@ -35,20 +48,29 @@ class AnimationHandle {
invokeAnimation(this.animation, player, x);
}
}
reset(){
reset() {
this._lastChange = null;
}
remove(animHandle: AnimationHandle) {
// stub get's overriden
}
}
class CompositeAnimation {
handle: AnimationHandle;
handles: Set<AnimationHandle>;
constructor() {
this.handles = new Set();
}
add(animation) {
let handle = new AnimationHandle(animation);
handle.remove = () => this.handles.delete(handle);
this.handles.add(handle);
return handle;
this.handle = new AnimationHandle(animation);
this.handle
this.handle.remove = () => this.handles.delete(this.handle);
this.handles.add(this.handle);
return this.handle;
}
play(player, time) {
this.handles.forEach(handle => handle.play(player, time));
@ -62,14 +84,14 @@ let WalkingAnimation = (player, time) => {
time *= 8;
// Leg swing
skin.leftLeg.rotation.x = Math.sin(time) * 0.5;
skin.leftLeg.rotation.x = Math.sin(time) * 0.5;
skin.rightLeg.rotation.x = Math.sin(time + Math.PI) * 0.5;
// Arm swing
skin.leftArm.rotation.x = Math.sin(time + Math.PI) * 0.5;
skin.leftArm.rotation.x = Math.sin(time + Math.PI) * 0.5;
skin.rightArm.rotation.x = Math.sin(time) * 0.5;
let basicArmRotationZ = Math.PI * 0.02;
skin.leftArm.rotation.z = Math.cos(time) * 0.03 + basicArmRotationZ;
let basicArmRotationZ = Math.PI * 0.02;
skin.leftArm.rotation.z = Math.cos(time) * 0.03 + basicArmRotationZ;
skin.rightArm.rotation.z = Math.cos(time + Math.PI) * 0.03 - basicArmRotationZ;
// Head shaking with different frequency & amplitude
@ -87,14 +109,14 @@ let RunningAnimation = (player, time) => {
time *= 15;
// Leg swing with larger amplitude
skin.leftLeg.rotation.x = Math.cos(time + Math.PI) * 1.3;
skin.leftLeg.rotation.x = Math.cos(time + Math.PI) * 1.3;
skin.rightLeg.rotation.x = Math.cos(time) * 1.3;
// Arm swing
skin.leftArm.rotation.x = Math.cos(time) * 1.5;
skin.leftArm.rotation.x = Math.cos(time) * 1.5;
skin.rightArm.rotation.x = Math.cos(time + Math.PI) * 1.5;
let basicArmRotationZ = Math.PI * 0.1;
skin.leftArm.rotation.z = Math.cos(time) * 0.1 + basicArmRotationZ;
let basicArmRotationZ = Math.PI * 0.1;
skin.leftArm.rotation.z = Math.cos(time) * 0.1 + basicArmRotationZ;
skin.rightArm.rotation.z = Math.cos(time + Math.PI) * 0.1 - basicArmRotationZ;
// Jumping

45
src/model.js → src/model.ts
View File

@ -1,5 +1,6 @@
import * as THREE from "three";
// TODO move to a util class
function toFaceVertices(x1, y1, x2, y2, w, h) {
return [
new THREE.Vector2(x1 / w, 1.0 - y2 / h),
@ -9,14 +10,17 @@ function toFaceVertices(x1, y1, x2, y2, w, h) {
];
}
// TODO move to a util class
function toSkinVertices(x1, y1, x2, y2) {
return toFaceVertices(x1, y1, x2, y2, 64.0, 64.0);
}
// TODO move to a util class
function toCapeVertices(x1, y1, x2, y2) {
return toFaceVertices(x1, y1, x2, y2, 64.0, 32.0);
}
// TODO move to a util class
function setVertices(box, top, bottom, left, front, right, back) {
box.faceVertexUvs[0] = [];
box.faceVertexUvs[0][0] = [right[3], right[0], right[2]];
@ -33,9 +37,23 @@ function setVertices(box, top, bottom, left, front, right, back) {
box.faceVertexUvs[0][11] = [back[0], back[1], back[2]];
}
// why is this a global constant?
const esp = 0.002;
class SkinObject extends THREE.Group {
// parts
head: THREE.Group;
body: THREE.Group;
rightArm: THREE.Group;
leftArm: THREE.Group;
rightLeg: THREE.Group;
leftLeg: THREE.Group;
modelListeners: Array<Function>;
slim = false;
constructor(layer1Material, layer2Material) {
super();
@ -208,7 +226,7 @@ class SkinObject extends THREE.Group {
);
}
leftArmBox.uvsNeedUpdate = true;
leftArmBox.elementsNeedUpdate=true;
leftArmBox.elementsNeedUpdate = true;
});
let leftArm2Box = new THREE.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related
@ -324,19 +342,22 @@ class SkinObject extends THREE.Group {
this.slim = false;
}
get slim() {
return this._slim;
}
// get slim() {
// return this._slim;
// }
set slim(value) {
if (this._slim !== value) {
this._slim = value;
this.modelListeners.forEach(listener => listener());
}
}
// set slim(value) {
// if (this._slim !== value) {
// this._slim = value;
// this.modelListeners.forEach(listener => listener());
// }
// }
}
class CapeObject extends THREE.Group {
cape: THREE.Mesh;
constructor(capeMaterial) {
super();
@ -359,6 +380,10 @@ class CapeObject extends THREE.Group {
}
class PlayerObject extends THREE.Group {
skin: SkinObject;
cape: CapeObject;
constructor(layer1Material, layer2Material, capeMaterial) {
super();

609
src/orbit_controls.js
View File

@ -1,609 +0,0 @@
import * as THREE from "three";
class OrbitControls extends THREE.EventDispatcher {
/**
* @preserve
* The code was originally from https://github.com/mrdoob/three.js/blob/d45a042cf962e9b1aa9441810ba118647b48aacb/examples/js/controls/OrbitControls.js
*/
/**
* @license
* Copyright (C) 2010-2017 three.js authors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*
*
* @author qiao / https://github.com/qiao
* @author mrdoob / http://mrdoob.com
* @author alteredq / http://alteredqualia.com/
* @author WestLangley / http://github.com/WestLangley
* @author erich666 / http://erichaines.com
*/
// This set of controls performs orbiting, dollying (zooming), and panning.
// Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default).
//
// Orbit - left mouse / touch: one finger move
// Zoom - middle mouse, or mousewheel / touch: two finger spread or squish
// Pan - right mouse, or arrow keys / touch: three finger swipe
constructor(object, domElement) {
super();
this.object = object;
this.domElement = (domElement !== undefined) ? domElement : document;
// Set to false to disable this control
this.enabled = true;
// "target" sets the location of focus, where the object orbits around
this.target = new THREE.Vector3();
// How far you can dolly in and out (PerspectiveCamera only)
this.minDistance = 0;
this.maxDistance = Infinity;
// How far you can zoom in and out (OrthographicCamera only)
this.minZoom = 0;
this.maxZoom = Infinity;
// How far you can orbit vertically, upper and lower limits.
// Range is 0 to Math.PI radians.
this.minPolarAngle = 0; // radians
this.maxPolarAngle = Math.PI; // radians
// How far you can orbit horizontally, upper and lower limits.
// If set, must be a sub-interval of the interval [ - Math.PI, Math.PI ].
this.minAzimuthAngle = -Infinity; // radians
this.maxAzimuthAngle = Infinity; // radians
// Set to true to enable damping (inertia)
// If damping is enabled, you must call controls.update() in your animation loop
this.enableDamping = false;
this.dampingFactor = 0.25;
// This option actually enables dollying in and out; left as "zoom" for backwards compatibility.
// Set to false to disable zooming
this.enableZoom = true;
this.zoomSpeed = 1.0;
// Set to false to disable rotating
this.enableRotate = true;
this.rotateSpeed = 1.0;
// Set to false to disable panning
this.enablePan = true;
this.keyPanSpeed = 7.0; // pixels moved per arrow key push
// Set to true to automatically rotate around the target
// If auto-rotate is enabled, you must call controls.update() in your animation loop
this.autoRotate = false;
this.autoRotateSpeed = 2.0; // 30 seconds per round when fps is 60
// Set to false to disable use of the keys
this.enableKeys = true;
// The four arrow keys
this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 };
// Mouse buttons
this.mouseButtons = { ORBIT: THREE.MOUSE.LEFT, ZOOM: THREE.MOUSE.MIDDLE, PAN: THREE.MOUSE.RIGHT };
// for reset
this.target0 = this.target.clone();
this.position0 = this.object.position.clone();
this.zoom0 = this.object.zoom;
//
// public methods
//
this.getPolarAngle = function () {
return spherical.phi;
};
this.getAzimuthalAngle = function () {
return spherical.theta;
};
this.saveState = function () {
scope.target0.copy(scope.target);
scope.position0.copy(scope.object.position);
scope.zoom0 = scope.object.zoom;
};
this.reset = function () {
scope.target.copy(scope.target0);
scope.object.position.copy(scope.position0);
scope.object.zoom = scope.zoom0;
scope.object.updateProjectionMatrix();
scope.dispatchEvent(changeEvent);
scope.update();
state = STATE.NONE;
};
// this method is exposed, but perhaps it would be better if we can make it private...
this.update = function () {
let offset = new THREE.Vector3();
// so camera.up is the orbit axis
let quat = new THREE.Quaternion().setFromUnitVectors(object.up, new THREE.Vector3(0, 1, 0));
let quatInverse = quat.clone().inverse();
let lastPosition = new THREE.Vector3();
let lastQuaternion = new THREE.Quaternion();
return function update() {
let position = scope.object.position;
offset.copy(position).sub(scope.target);
// rotate offset to "y-axis-is-up" space
offset.applyQuaternion(quat);
// angle from z-axis around y-axis
spherical.setFromVector3(offset);
if (scope.autoRotate && state === STATE.NONE) {
rotateLeft(getAutoRotationAngle());
}
spherical.theta += sphericalDelta.theta;
spherical.phi += sphericalDelta.phi;
// restrict theta to be between desired limits
spherical.theta = Math.max(scope.minAzimuthAngle, Math.min(scope.maxAzimuthAngle, spherical.theta));
// restrict phi to be between desired limits
spherical.phi = Math.max(scope.minPolarAngle, Math.min(scope.maxPolarAngle, spherical.phi));
spherical.makeSafe();
spherical.radius *= scale;
// restrict radius to be between desired limits
spherical.radius = Math.max(scope.minDistance, Math.min(scope.maxDistance, spherical.radius));
// move target to panned location
scope.target.add(panOffset);
offset.setFromSpherical(spherical);
// rotate offset back to "camera-up-vector-is-up" space
offset.applyQuaternion(quatInverse);
position.copy(scope.target).add(offset);
scope.object.lookAt(scope.target);
if (scope.enableDamping === true) {
sphericalDelta.theta *= (1 - scope.dampingFactor);
sphericalDelta.phi *= (1 - scope.dampingFactor);
}
else {
sphericalDelta.set(0, 0, 0);
}
scale = 1;
panOffset.set(0, 0, 0);
// update condition is:
// min(camera displacement, camera rotation in radians)^2 > EPS
// using small-angle approximation cos(x/2) = 1 - x^2 / 8
if (zoomChanged ||
lastPosition.distanceToSquared(scope.object.position) > EPS ||
8 * (1 - lastQuaternion.dot(scope.object.quaternion)) > EPS) {
scope.dispatchEvent(changeEvent);
lastPosition.copy(scope.object.position);
lastQuaternion.copy(scope.object.quaternion);
zoomChanged = false;
return true;
}
return false;
};
}();
this.dispose = function () {
scope.domElement.removeEventListener("contextmenu", onContextMenu, false);
scope.domElement.removeEventListener("mousedown", onMouseDown, false);
scope.domElement.removeEventListener("wheel", onMouseWheel, false);
scope.domElement.removeEventListener("touchstart", onTouchStart, false);
scope.domElement.removeEventListener("touchend", onTouchEnd, false);
scope.domElement.removeEventListener("touchmove", onTouchMove, false);
document.removeEventListener("mousemove", onMouseMove, false);
document.removeEventListener("mouseup", onMouseUp, false);
window.removeEventListener("keydown", onKeyDown, false);
//scope.dispatchEvent({ type: "dispose" }); // should this be added here?
};
//
// internals
//
let scope = this;
let changeEvent = { type: "change" };
let startEvent = { type: "start" };
let endEvent = { type: "end" };
let STATE = { NONE: -1, ROTATE: 0, DOLLY: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_DOLLY: 4, TOUCH_PAN: 5 };
let state = STATE.NONE;
let EPS = 0.000001;
// current position in spherical coordinates
let spherical = new THREE.Spherical();
let sphericalDelta = new THREE.Spherical();
let scale = 1;
let panOffset = new THREE.Vector3();
let zoomChanged = false;
let rotateStart = new THREE.Vector2();
let rotateEnd = new THREE.Vector2();
let rotateDelta = new THREE.Vector2();
let panStart = new THREE.Vector2();
let panEnd = new THREE.Vector2();
let panDelta = new THREE.Vector2();
let dollyStart = new THREE.Vector2();
let dollyEnd = new THREE.Vector2();
let dollyDelta = new THREE.Vector2();
function getAutoRotationAngle() {
return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed;
}
function getZoomScale() {
return Math.pow(0.95, scope.zoomSpeed);
}
function rotateLeft(angle) {
sphericalDelta.theta -= angle;
}
function rotateUp(angle) {
sphericalDelta.phi -= angle;
}
let panLeft = function () {
let v = new THREE.Vector3();
return function panLeft(distance, objectMatrix) {
v.setFromMatrixColumn(objectMatrix, 0); // get X column of objectMatrix
v.multiplyScalar(-distance);
panOffset.add(v);
};
}();
let panUp = function () {
let v = new THREE.Vector3();
return function panUp(distance, objectMatrix) {
v.setFromMatrixColumn(objectMatrix, 1); // get Y column of objectMatrix
v.multiplyScalar(distance);
panOffset.add(v);
};
}();
// deltaX and deltaY are in pixels; right and down are positive
let pan = function () {
let offset = new THREE.Vector3();
return function pan(deltaX, deltaY) {
let element = scope.domElement === document ? scope.domElement.body : scope.domElement;
if (scope.object instanceof THREE.PerspectiveCamera) {
// perspective
let position = scope.object.position;
offset.copy(position).sub(scope.target);
let targetDistance = offset.length();
// half of the fov is center to top of screen
targetDistance *= Math.tan((scope.object.fov / 2) * Math.PI / 180.0);
// we actually don't use screenWidth, since perspective camera is fixed to screen height
panLeft(2 * deltaX * targetDistance / element.clientHeight, scope.object.matrix);
panUp(2 * deltaY * targetDistance / element.clientHeight, scope.object.matrix);
}
else if (scope.object instanceof THREE.OrthographicCamera) {
// orthographic
panLeft(deltaX * (scope.object.right - scope.object.left) / scope.object.zoom / element.clientWidth, scope.object.matrix);
panUp(deltaY * (scope.object.top - scope.object.bottom) / scope.object.zoom / element.clientHeight, scope.object.matrix);
}
else {
// camera neither orthographic nor perspective
console.warn("WARNING: OrbitControls.js encountered an unknown camera type - pan disabled.");
scope.enablePan = false;
}
};
}();
function dollyIn(dollyScale) {
if (scope.object instanceof THREE.PerspectiveCamera) {
scale /= dollyScale;
}
else if (scope.object instanceof THREE.OrthographicCamera) {
scope.object.zoom = Math.max(scope.minZoom, Math.min(scope.maxZoom, scope.object.zoom * dollyScale));
scope.object.updateProjectionMatrix();
zoomChanged = true;
}
else {
console.warn("WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.");
scope.enableZoom = false;
}
}
function dollyOut(dollyScale) {
if (scope.object instanceof THREE.PerspectiveCamera) {
scale *= dollyScale;
}
else if (scope.object instanceof THREE.OrthographicCamera) {
scope.object.zoom = Math.max(scope.minZoom, Math.min(scope.maxZoom, scope.object.zoom / dollyScale));
scope.object.updateProjectionMatrix();
zoomChanged = true;
}
else {
console.warn("WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.");
scope.enableZoom = false;
}
}
//
// event callbacks - update the object state
//
function handleMouseDownRotate(event) {
rotateStart.set(event.clientX, event.clientY);
}
function handleMouseDownDolly(event) {
dollyStart.set(event.clientX, event.clientY);
}
function handleMouseDownPan(event) {
panStart.set(event.clientX, event.clientY);
}
function handleMouseMoveRotate(event) {
rotateEnd.set(event.clientX, event.clientY);
rotateDelta.subVectors(rotateEnd, rotateStart);
let element = scope.domElement === document ? scope.domElement.body : scope.domElement;
// rotating across whole screen goes 360 degrees around
rotateLeft(2 * Math.PI * rotateDelta.x / element.clientWidth * scope.rotateSpeed);
// rotating up and down along whole screen attempts to go 360, but limited to 180
rotateUp(2 * Math.PI * rotateDelta.y / element.clientHeight * scope.rotateSpeed);
rotateStart.copy(rotateEnd);
scope.update();
}
function handleMouseMoveDolly(event) {
dollyEnd.set(event.clientX, event.clientY);
dollyDelta.subVectors(dollyEnd, dollyStart);
if (dollyDelta.y > 0) {
dollyIn(getZoomScale());
}
else if (dollyDelta.y < 0) {
dollyOut(getZoomScale());
}
dollyStart.copy(dollyEnd);
scope.update();
}
function handleMouseMovePan(event) {
panEnd.set(event.clientX, event.clientY);
panDelta.subVectors(panEnd, panStart);
pan(panDelta.x, panDelta.y);
panStart.copy(panEnd);
scope.update();
}
function handleMouseUp(event) {
}
function handleMouseWheel(event) {
if (event.deltaY < 0) {
dollyOut(getZoomScale());
}
else if (event.deltaY > 0) {
dollyIn(getZoomScale());
}
scope.update();
}
function handleKeyDown(event) {
switch (event.keyCode) {
case scope.keys.UP:
pan(0, scope.keyPanSpeed);
scope.update();
break;
case scope.keys.BOTTOM:
pan(0, -scope.keyPanSpeed);
scope.update();
break;
case scope.keys.LEFT:
pan(scope.keyPanSpeed, 0);
scope.update();
break;
case scope.keys.RIGHT:
pan(-scope.keyPanSpeed, 0);
scope.update();
break;
}
}
function handleTouchStartRotate(event) {
rotateStart.set(event.touches[0].pageX, event.touches[0].pageY);
}
function handleTouchStartDolly(event) {
let dx = event.touches[0].pageX - event.touches[1].pageX;
let dy = event.touches[0].pageY - event.touches[1].pageY;
let distance = Math.sqrt(dx * dx + dy * dy);
dollyStart.set(0, distance);
}
function handleTouchStartPan(event) {
panStart.set(event.touches[0].pageX, event.touches[0].pageY);
}
function handleTouchMoveRotate(event) {
rotateEnd.set(event.touches[0].pageX, event.touches[0].pageY);
rotateDelta.subVectors(rotateEnd, rotateStart);
let element = scope.domElement === document ? scope.domElement.body : scope.domElement;
rotateLeft(2 * Math.PI * rotateDelta.x / element.clientWidth * scope.rotateSpeed);
rotateUp(2 * Math.PI * rotateDelta.y / element.clientHeight * scope.rotateSpeed);
rotateStart.copy(rotateEnd);
scope.update();
}
function handleTouchMoveDolly(event) {
let dx = event.touches[0].pageX - event.touches[1].pageX;
let dy = event.touches[0].pageY - event.touches[1].pageY;
let distance = Math.sqrt(dx * dx + dy * dy);
dollyEnd.set(0, distance);
dollyDelta.subVectors(dollyEnd, dollyStart);
if (dollyDelta.y > 0) {
dollyOut(getZoomScale());
}
else if (dollyDelta.y < 0) {
dollyIn(getZoomScale());
}
dollyStart.copy(dollyEnd);
scope.update();
}
function handleTouchMovePan(event) {
panEnd.set(event.touches[0].pageX, event.touches[0].pageY);
panDelta.subVectors(panEnd, panStart);
pan(panDelta.x, panDelta.y);
panStart.copy(panEnd);
scope.update();
}
function handleTouchEnd(event) {
}
//
// event handlers - FSM: listen for events and reset state
//
function onMouseDown(event) {
if (scope.enabled === false)
return;
switch (event.button) {
case scope.mouseButtons.ORBIT:
if (scope.enableRotate === false)
return;
handleMouseDownRotate(event);
state = STATE.ROTATE;
break;
case scope.mouseButtons.ZOOM:
if (scope.enableZoom === false)
return;
handleMouseDownDolly(event);
state = STATE.DOLLY;
break;
case scope.mouseButtons.PAN:
if (scope.enablePan === false)
return;
handleMouseDownPan(event);
state = STATE.PAN;
break;
}
event.preventDefault();
if (state !== STATE.NONE) {
document.addEventListener("mousemove", onMouseMove, false);
document.addEventListener("mouseup", onMouseUp, false);
scope.dispatchEvent(startEvent);
}
}
function onMouseMove(event) {
if (scope.enabled === false)
return;
switch (state) {
case STATE.ROTATE:
if (scope.enableRotate === false)
return;
handleMouseMoveRotate(event);
break;
case STATE.DOLLY:
if (scope.enableZoom === false)
return;
handleMouseMoveDolly(event);
break;
case STATE.PAN:
if (scope.enablePan === false)
return;
handleMouseMovePan(event);
break;
}
event.preventDefault();
}
function onMouseUp(event) {
if (scope.enabled === false)
return;
handleMouseUp(event);
document.removeEventListener("mousemove", onMouseMove, false);
document.removeEventListener("mouseup", onMouseUp, false);
scope.dispatchEvent(endEvent);
state = STATE.NONE;
}
function onMouseWheel(event) {
if (scope.enabled === false || scope.enableZoom === false || (state !== STATE.NONE && state !== STATE.ROTATE))
return;
event.preventDefault();
event.stopPropagation();
handleMouseWheel(event);
scope.dispatchEvent(startEvent); // not sure why these are here...
scope.dispatchEvent(endEvent);
}
function onKeyDown(event) {
if (scope.enabled === false || scope.enableKeys === false || scope.enablePan === false)
return;
handleKeyDown(event);
}
function onTouchStart(event) {
if (scope.enabled === false)
return;
switch (event.touches.length) {
case 1:// one-fingered touch: rotate
if (scope.enableRotate === false)
return;
handleTouchStartRotate(event);
state = STATE.TOUCH_ROTATE;
break;
case 2:// two-fingered touch: dolly
if (scope.enableZoom === false)
return;
handleTouchStartDolly(event);
state = STATE.TOUCH_DOLLY;
break;
case 3:// three-fingered touch: pan
if (scope.enablePan === false)
return;
handleTouchStartPan(event);
state = STATE.TOUCH_PAN;
break;
default:
state = STATE.NONE;
}
if (state !== STATE.NONE) {
scope.dispatchEvent(startEvent);
}
}
function onTouchMove(event) {
if (scope.enabled === false)
return;
switch (event.touches.length) {
case 1:// one-fingered touch: rotate
if (scope.enableRotate === false)
return;
if (state !== STATE.TOUCH_ROTATE)
return; // is this needed?...
handleTouchMoveRotate(event);
break;
case 2:// two-fingered touch: dolly
if (scope.enableZoom === false)
return;
if (state !== STATE.TOUCH_DOLLY)
return; // is this needed?...
handleTouchMoveDolly(event);
break;
case 3:// three-fingered touch: pan
if (scope.enablePan === false)
return;
if (state !== STATE.TOUCH_PAN)
return; // is this needed?...
handleTouchMovePan(event);
break;
default:
state = STATE.NONE;
}
event.preventDefault();
event.stopPropagation();
}
function onTouchEnd(event) {
if (scope.enabled === false)
return;
handleTouchEnd(event);
scope.dispatchEvent(endEvent);
state = STATE.NONE;
}
function onContextMenu(event) {
if (scope.enabled === false || scope.enablePan === false)
return;
event.preventDefault();
}
//
scope.domElement.addEventListener("contextmenu", onContextMenu, false);
scope.domElement.addEventListener("mousedown", onMouseDown, false);
scope.domElement.addEventListener("wheel", onMouseWheel, false);
scope.domElement.addEventListener("touchstart", onTouchStart, false);
scope.domElement.addEventListener("touchend", onTouchEnd, false);
scope.domElement.addEventListener("touchmove", onTouchMove, false);
window.addEventListener("keydown", onKeyDown, false);
// force an update at start
this.update();
}
}
function createOrbitControls(skinViewer) {
let control = new OrbitControls(skinViewer.camera, skinViewer.renderer.domElement);
// default configuration
control.enablePan = false;
control.target = new THREE.Vector3(0, -12, 0);
control.minDistance = 10;
control.maxDistance = 256;
control.update();
return control;
}
export { OrbitControls, createOrbitControls };

692
src/orbit_controls.ts Normal file
View File

@ -0,0 +1,692 @@
import * as THREE from "three";
const STATE = {
NONE: - 1,
ROTATE: 0,
DOLLY: 1,
PAN: 2,
TOUCH_ROTATE: 3,
TOUCH_DOLLY: 4,
TOUCH_PAN: 5
};
const CHANGE_EVENT = { type: 'change' };
const START_EVENT = { type: 'start' };
const END_EVENT = { type: 'end' };
const EPS = 0.000001;
/**
* @author qiao / https://github.com/qiao
* @author mrdoob / http://mrdoob.com
* @author alteredq / http://alteredqualia.com/
* @author WestLangley / http://github.com/WestLangley
* @author erich666 / http://erichaines.com
* @author nicolaspanel / http://github.com/nicolaspanel
*
* This set of controls performs orbiting, dollying (zooming), and panning.
* Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default).
* Orbit - left mouse / touch: one finger move
* Zoom - middle mouse, or mousewheel / touch: two finger spread or squish
* Pan - right mouse, or arrow keys / touch: three finger swipe
*/
export class OrbitControls extends THREE.EventDispatcher {
object: THREE.Camera;
domElement: HTMLElement | HTMLDocument;
window: Window;
// API
enabled: boolean;
target: THREE.Vector3;
enableZoom: boolean;
zoomSpeed: number;
minDistance: number;
maxDistance: number;
enableRotate: boolean;
rotateSpeed: number;
enablePan: boolean;
keyPanSpeed: number;
autoRotate: boolean;
autoRotateSpeed: number;
minZoom: number;
maxZoom: number;
minPolarAngle: number;
maxPolarAngle: number;
minAzimuthAngle: number;
maxAzimuthAngle: number;
enableKeys: boolean;
keys: { LEFT: number; UP: number; RIGHT: number; BOTTOM: number; };
mouseButtons: { ORBIT: THREE.MOUSE; ZOOM: THREE.MOUSE; PAN: THREE.MOUSE; };
enableDamping: boolean;
dampingFactor: number;
private spherical: THREE.Spherical;
private sphericalDelta: THREE.Spherical;
private scale: number;
private target0: THREE.Vector3;
private position0: THREE.Vector3;
private zoom0: any;
private state: number;
private panOffset: THREE.Vector3;
private zoomChanged: boolean;
private rotateStart: THREE.Vector2;
private rotateEnd: THREE.Vector2;
private rotateDelta: THREE.Vector2
private panStart: THREE.Vector2;
private panEnd: THREE.Vector2;
private panDelta: THREE.Vector2;
private dollyStart: THREE.Vector2;
private dollyEnd: THREE.Vector2;
private dollyDelta: THREE.Vector2;
private updateLastPosition: THREE.Vector3;
private updateOffset: THREE.Vector3;
private updateQuat: THREE.Quaternion;
private updateLastQuaternion: THREE.Quaternion;
private updateQuatInverse: THREE.Quaternion;
private panLeftV: THREE.Vector3;
private panUpV: THREE.Vector3;
private panInternalOffset: THREE.Vector3;
private onContextMenu: EventListener;
private onMouseUp: EventListener;
private onMouseDown: EventListener;
private onMouseMove: EventListener;
private onMouseWheel: EventListener;
private onTouchStart: EventListener;
private onTouchEnd: EventListener;
private onTouchMove: EventListener;
private onKeyDown: EventListener;
constructor(object: THREE.Camera, domElement?: HTMLElement, domWindow?: Window) {
super();
this.object = object;
this.domElement = (domElement !== undefined) ? domElement : document;
this.window = (domWindow !== undefined) ? domWindow : window;
// Set to false to disable this control
this.enabled = true;
// "target" sets the location of focus, where the object orbits around
this.target = new THREE.Vector3();
// How far you can dolly in and out ( PerspectiveCamera only )
this.minDistance = 0;
this.maxDistance = Infinity;
// How far you can zoom in and out ( OrthographicCamera only )
this.minZoom = 0;
this.maxZoom = Infinity;
// How far you can orbit vertically, upper and lower limits.
// Range is 0 to Math.PI radians.
this.minPolarAngle = 0; // radians
this.maxPolarAngle = Math.PI; // radians
// How far you can orbit horizontally, upper and lower limits.
// If set, must be a sub-interval of the interval [ - Math.PI, Math.PI ].
this.minAzimuthAngle = - Infinity; // radians
this.maxAzimuthAngle = Infinity; // radians
// Set to true to enable damping (inertia)
// If damping is enabled, you must call controls.update() in your animation loop
this.enableDamping = false;
this.dampingFactor = 0.25;
// This option actually enables dollying in and out; left as "zoom" for backwards compatibility.
// Set to false to disable zooming
this.enableZoom = true;
this.zoomSpeed = 1.0;
// Set to false to disable rotating
this.enableRotate = true;
this.rotateSpeed = 1.0;
// Set to false to disable panning
this.enablePan = true;
this.keyPanSpeed = 7.0; // pixels moved per arrow key push
// Set to true to automatically rotate around the target
// If auto-rotate is enabled, you must call controls.update() in your animation loop
this.autoRotate = false;
this.autoRotateSpeed = 2.0; // 30 seconds per round when fps is 60
// Set to false to disable use of the keys
this.enableKeys = true;
// The four arrow keys
this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 };
// Mouse buttons
this.mouseButtons = { ORBIT: THREE.MOUSE.LEFT, ZOOM: THREE.MOUSE.MIDDLE, PAN: THREE.MOUSE.RIGHT };
// for reset
this.target0 = this.target.clone();
this.position0 = this.object.position.clone();
this.zoom0 = (this.object as any).zoom;
// for update speedup
this.updateOffset = new THREE.Vector3();
// so camera.up is the orbit axis
this.updateQuat = new THREE.Quaternion().setFromUnitVectors(object.up, new THREE.Vector3(0, 1, 0));
this.updateQuatInverse = this.updateQuat.clone().inverse();
this.updateLastPosition = new THREE.Vector3();
this.updateLastQuaternion = new THREE.Quaternion();
this.state = STATE.NONE;
this.scale = 1;
// current position in spherical coordinates
this.spherical = new THREE.Spherical();
this.sphericalDelta = new THREE.Spherical();
this.panOffset = new THREE.Vector3();
this.zoomChanged = false;
this.rotateStart = new THREE.Vector2();
this.rotateEnd = new THREE.Vector2();
this.rotateDelta = new THREE.Vector2();
this.panStart = new THREE.Vector2();
this.panEnd = new THREE.Vector2();
this.panDelta = new THREE.Vector2();
this.dollyStart = new THREE.Vector2();
this.dollyEnd = new THREE.Vector2();
this.dollyDelta = new THREE.Vector2();
this.panLeftV = new THREE.Vector3();
this.panUpV = new THREE.Vector3();
this.panInternalOffset = new THREE.Vector3();
// event handlers - FSM: listen for events and reset state
this.onMouseDown = (event: ThreeEvent) => {
if (this.enabled === false) return;
event.preventDefault();
if ((event as any).button === this.mouseButtons.ORBIT) {
if (this.enableRotate === false) return;
this.rotateStart.set(event.clientX, event.clientY);
this.state = STATE.ROTATE;
} else if (event.button === this.mouseButtons.ZOOM) {
if (this.enableZoom === false) return;
this.dollyStart.set(event.clientX, event.clientY);
this.state = STATE.DOLLY;
} else if (event.button === this.mouseButtons.PAN) {
if (this.enablePan === false) return;
this.panStart.set(event.clientX, event.clientY);
this.state = STATE.PAN;
}
if (this.state !== STATE.NONE) {
document.addEventListener('mousemove', this.onMouseMove, false);
document.addEventListener('mouseup', this.onMouseUp, false);
this.dispatchEvent(START_EVENT);
}
};
this.onMouseMove = (event: ThreeEvent) => {
if (this.enabled === false) return;
event.preventDefault();
if (this.state === STATE.ROTATE) {
if (this.enableRotate === false) return;
this.rotateEnd.set(event.clientX, event.clientY);
this.rotateDelta.subVectors(this.rotateEnd, this.rotateStart);
const element = this.domElement === document ? this.domElement.body : this.domElement;
// rotating across whole screen goes 360 degrees around
this.rotateLeft(2 * Math.PI * this.rotateDelta.x / (element as any).clientWidth * this.rotateSpeed);
// rotating up and down along whole screen attempts to go 360, but limited to 180
this.rotateUp(2 * Math.PI * this.rotateDelta.y / (element as any).clientHeight * this.rotateSpeed);
this.rotateStart.copy(this.rotateEnd);
this.update();
} else if (this.state === STATE.DOLLY) {
if (this.enableZoom === false) return;
this.dollyEnd.set(event.clientX, event.clientY);
this.dollyDelta.subVectors(this.dollyEnd, this.dollyStart);
if (this.dollyDelta.y > 0) {
this.dollyIn(this.getZoomScale());
} else if (this.dollyDelta.y < 0) {
this.dollyOut(this.getZoomScale());
}
this.dollyStart.copy(this.dollyEnd);
this.update();
} else if (this.state === STATE.PAN) {
if (this.enablePan === false) return;
this.panEnd.set(event.clientX, event.clientY);
this.panDelta.subVectors(this.panEnd, this.panStart);
this.pan(this.panDelta.x, this.panDelta.y);
this.panStart.copy(this.panEnd);
this.update();
}
}
this.onMouseUp = (event: ThreeEvent) => {
if (this.enabled === false) return;
document.removeEventListener('mousemove', this.onMouseMove, false);
document.removeEventListener('mouseup', this.onMouseUp, false);
this.dispatchEvent(END_EVENT);
this.state = STATE.NONE;
};
this.onMouseWheel = (event: ThreeEvent) => {
if (this.enabled === false || this.enableZoom === false || (this.state !== STATE.NONE && this.state !== STATE.ROTATE)) return;
event.preventDefault();
event.stopPropagation();
if (event.deltaY < 0) {
this.dollyOut(this.getZoomScale());
} else if (event.deltaY > 0) {
this.dollyIn(this.getZoomScale());
}
this.update();
this.dispatchEvent(START_EVENT); // not sure why these are here...
this.dispatchEvent(END_EVENT);
};
this.onKeyDown = (event: ThreeEvent) => {
if (this.enabled === false || this.enableKeys === false || this.enablePan === false) return;
switch (event.keyCode) {
case this.keys.UP: {
this.pan(0, this.keyPanSpeed);
this.update();
} break;
case this.keys.BOTTOM: {
this.pan(0, - this.keyPanSpeed);
this.update();
} break;
case this.keys.LEFT: {
this.pan(this.keyPanSpeed, 0);
this.update();
} break;
case this.keys.RIGHT: {
this.pan(- this.keyPanSpeed, 0);
this.update();
} break;
}
};
this.onTouchStart = (event: ThreeEvent) => {
if (this.enabled === false) return;
switch (event.touches.length) {
// one-fingered touch: rotate
case 1: {
if (this.enableRotate === false) return;
this.rotateStart.set(event.touches[0].pageX, event.touches[0].pageY);
this.state = STATE.TOUCH_ROTATE;
} break;
// two-fingered touch: dolly
case 2: {
if (this.enableZoom === false) return;
var dx = event.touches[0].pageX - event.touches[1].pageX;
var dy = event.touches[0].pageY - event.touches[1].pageY;
var distance = Math.sqrt(dx * dx + dy * dy);
this.dollyStart.set(0, distance);
this.state = STATE.TOUCH_DOLLY;
} break;
// three-fingered touch: pan
case 3: {
if (this.enablePan === false) return;
this.panStart.set(event.touches[0].pageX, event.touches[0].pageY);
this.state = STATE.TOUCH_PAN;
} break;
default: {
this.state = STATE.NONE;
}
}
if (this.state !== STATE.NONE) {
this.dispatchEvent(START_EVENT);
}
};
this.onTouchMove = (event: ThreeEvent) => {
if (this.enabled === false) return;
event.preventDefault();
event.stopPropagation();
switch (event.touches.length) {
// one-fingered touch: rotate
case 1: {
if (this.enableRotate === false) return;
if (this.state !== STATE.TOUCH_ROTATE) return; // is this needed?...
this.rotateEnd.set(event.touches[0].pageX, event.touches[0].pageY);
this.rotateDelta.subVectors(this.rotateEnd, this.rotateStart);
var element = this.domElement === document ? this.domElement.body : this.domElement;
// rotating across whole screen goes 360 degrees around
this.rotateLeft(2 * Math.PI * this.rotateDelta.x / (element as any).clientWidth * this.rotateSpeed);
// rotating up and down along whole screen attempts to go 360, but limited to 180
this.rotateUp(2 * Math.PI * this.rotateDelta.y / (element as any).clientHeight * this.rotateSpeed);
this.rotateStart.copy(this.rotateEnd);
this.update();
} break;
// two-fingered touch: dolly
case 2: {
if (this.enableZoom === false) return;
if (this.state !== STATE.TOUCH_DOLLY) return; // is this needed?...
//console.log( 'handleTouchMoveDolly' );
var dx = event.touches[0].pageX - event.touches[1].pageX;
var dy = event.touches[0].pageY - event.touches[1].pageY;
var distance = Math.sqrt(dx * dx + dy * dy);
this.dollyEnd.set(0, distance);
this.dollyDelta.subVectors(this.dollyEnd, this.dollyStart);
if (this.dollyDelta.y > 0) {
this.dollyOut(this.getZoomScale());
} else if (this.dollyDelta.y < 0) {
this.dollyIn(this.getZoomScale());
}
this.dollyStart.copy(this.dollyEnd);
this.update();
} break;
// three-fingered touch: pan
case 3: {
if (this.enablePan === false) return;
if (this.state !== STATE.TOUCH_PAN) return; // is this needed?...
this.panEnd.set(event.touches[0].pageX, event.touches[0].pageY);
this.panDelta.subVectors(this.panEnd, this.panStart);
this.pan(this.panDelta.x, this.panDelta.y);
this.panStart.copy(this.panEnd);
this.update();
} break;
default: {
this.state = STATE.NONE;
}
}
};
this.onTouchEnd = (event: Event) => {
if (this.enabled === false) return;
this.dispatchEvent(END_EVENT);
this.state = STATE.NONE;
}
this.onContextMenu = (event) => {
event.preventDefault();
};
this.domElement.addEventListener('contextmenu', this.onContextMenu, false);
this.domElement.addEventListener('mousedown', this.onMouseDown, false);
this.domElement.addEventListener('wheel', this.onMouseWheel, false);
this.domElement.addEventListener('touchstart', this.onTouchStart, false);
this.domElement.addEventListener('touchend', this.onTouchEnd, false);
this.domElement.addEventListener('touchmove', this.onTouchMove, false);
this.window.addEventListener('keydown', this.onKeyDown, false);
// force an update at start
this.update();
}
update() {
const position = this.object.position;
this.updateOffset.copy(position).sub(this.target);
// rotate offset to "y-axis-is-up" space
this.updateOffset.applyQuaternion(this.updateQuat);
// angle from z-axis around y-axis
this.spherical.setFromVector3(this.updateOffset);
if (this.autoRotate && this.state === STATE.NONE) {
this.rotateLeft(this.getAutoRotationAngle());
}
(this.spherical as any).theta += (this.sphericalDelta as any).theta;
(this.spherical as any).phi += (this.sphericalDelta as any).phi;
// restrict theta to be between desired limits
(this.spherical as (any) as any).theta = Math.max(this.minAzimuthAngle, Math.min(this.maxAzimuthAngle, (this.spherical as any).theta));
// restrict phi to be between desired limits
(this.spherical as any).phi = Math.max(this.minPolarAngle, Math.min(this.maxPolarAngle, (this.spherical as any).phi));
this.spherical.makeSafe();
(this.spherical as any).radius *= this.scale;
// restrict radius to be between desired limits
(this.spherical as any).radius = Math.max(this.minDistance, Math.min(this.maxDistance, (this.spherical as any).radius));
// move target to panned location
this.target.add(this.panOffset);
this.updateOffset.setFromSpherical(this.spherical);
// rotate offset back to "camera-up-vector-is-up" space
this.updateOffset.applyQuaternion(this.updateQuatInverse);
position.copy(this.target).add(this.updateOffset);
this.object.lookAt(this.target);
if (this.enableDamping === true) {
(this.sphericalDelta as any).theta *= (1 - this.dampingFactor);
(this.sphericalDelta as any).phi *= (1 - this.dampingFactor);
} else {
this.sphericalDelta.set(0, 0, 0);
}
this.scale = 1;
this.panOffset.set(0, 0, 0);
// update condition is:
// min(camera displacement, camera rotation in radians)^2 > EPS
// using small-angle approximation cos(x/2) = 1 - x^2 / 8
if (this.zoomChanged ||
this.updateLastPosition.distanceToSquared(this.object.position) > EPS ||
8 * (1 - this.updateLastQuaternion.dot(this.object.quaternion)) > EPS) {
this.dispatchEvent(CHANGE_EVENT);
this.updateLastPosition.copy(this.object.position);
this.updateLastQuaternion.copy(this.object.quaternion);
this.zoomChanged = false;
return true;
}
return false;
}
panLeft(distance: number, objectMatrix) {
this.panLeftV.setFromMatrixColumn(objectMatrix, 0); // get X column of objectMatrix
this.panLeftV.multiplyScalar(- distance);
this.panOffset.add(this.panLeftV);
}
panUp(distance: number, objectMatrix) {
this.panUpV.setFromMatrixColumn(objectMatrix, 1); // get Y column of objectMatrix
this.panUpV.multiplyScalar(distance);
this.panOffset.add(this.panUpV);
}
// deltaX and deltaY are in pixels; right and down are positive
pan(deltaX: number, deltaY: number) {
const element = this.domElement === document ? this.domElement.body : this.domElement;
if (this.object instanceof THREE.PerspectiveCamera) {
// perspective
const position = this.object.position;
this.panInternalOffset.copy(position).sub(this.target);
var targetDistance = this.panInternalOffset.length();
// half of the fov is center to top of screen
targetDistance *= Math.tan((this.object.fov / 2) * Math.PI / 180.0);
// we actually don't use screenWidth, since perspective camera is fixed to screen height
this.panLeft(2 * deltaX * targetDistance / (element as any).clientHeight, this.object.matrix);
this.panUp(2 * deltaY * targetDistance / (element as any).clientHeight, this.object.matrix);
} else if (this.object instanceof THREE.OrthographicCamera) {
// orthographic
this.panLeft(deltaX * (this.object.right - this.object.left) / this.object.zoom / (element as any).clientWidth, this.object.matrix);
this.panUp(deltaY * (this.object.top - this.object.bottom) / this.object.zoom / (element as any).clientHeight, this.object.matrix);
} else {
// camera neither orthographic nor perspective
console.warn('WARNING: OrbitControls.js encountered an unknown camera type - pan disabled.');
this.enablePan = false;
}
}
dollyIn(dollyScale) {
if (this.object instanceof THREE.PerspectiveCamera) {
this.scale /= dollyScale;
} else if (this.object instanceof THREE.OrthographicCamera) {
this.object.zoom = Math.max(this.minZoom, Math.min(this.maxZoom, this.object.zoom * dollyScale));
this.object.updateProjectionMatrix();
this.zoomChanged = true;
} else {
console.warn('WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.');
this.enableZoom = false;
}
}
dollyOut(dollyScale) {
if (this.object instanceof THREE.PerspectiveCamera) {
this.scale *= dollyScale;
} else if (this.object instanceof THREE.OrthographicCamera) {
this.object.zoom = Math.max(this.minZoom, Math.min(this.maxZoom, this.object.zoom / dollyScale));
this.object.updateProjectionMatrix();
this.zoomChanged = true;
} else {
console.warn('WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.');
this.enableZoom = false;
}
}
getAutoRotationAngle() {
return 2 * Math.PI / 60 / 60 * this.autoRotateSpeed;
}
getZoomScale() {
return Math.pow(0.95, this.zoomSpeed);
}
rotateLeft(angle: number) {
(this.sphericalDelta as any).theta -= angle;
}
rotateUp(angle: number) {
(this.sphericalDelta as any).phi -= angle;
}
getPolarAngle(): number {
return (this.spherical as any).phi;
}
getAzimuthalAngle(): number {
return (this.spherical as any).theta;
}
dispose(): void {
this.domElement.removeEventListener('contextmenu', this.onContextMenu, false);
this.domElement.removeEventListener('mousedown', this.onMouseDown, false);
this.domElement.removeEventListener('wheel', this.onMouseWheel, false);
this.domElement.removeEventListener('touchstart', this.onTouchStart, false);
this.domElement.removeEventListener('touchend', this.onTouchEnd, false);
this.domElement.removeEventListener('touchmove', this.onTouchMove, false);
document.removeEventListener('mousemove', this.onMouseMove, false);
document.removeEventListener('mouseup', this.onMouseUp, false);
this.window.removeEventListener('keydown', this.onKeyDown, false);
//this.dispatchEvent( { type: 'dispose' } ); // should this be added here?
}
reset(): void {
this.target.copy(this.target0);
this.object.position.copy(this.position0);
(this.object as any).zoom = this.zoom0;
(this.object as any).updateProjectionMatrix();
this.dispatchEvent(CHANGE_EVENT);
this.update();
this.state = STATE.NONE;
}
// backward compatibility
// get center(): THREE.Vector3 {
// console.warn('THREE.OrbitControls: .center has been renamed to .target');
// return this.target;
// }
// get noZoom(): boolean {
// console.warn('THREE.OrbitControls: .noZoom has been deprecated. Use .enableZoom instead.');
// return !this.enableZoom;
// }
// set noZoom(value: boolean) {
// console.warn('THREE.OrbitControls: .noZoom has been deprecated. Use .enableZoom instead.');
// this.enableZoom = !value;
// }
}
interface ThreeEvent extends Event {
clientX: number;
clientY: number;
deltaY: number;
button: THREE.MOUSE;
touches: Array<any>;
keyCode: number;
}
export function createOrbitControls(skinViewer) {
let control = new OrbitControls(skinViewer.camera, skinViewer.renderer.domElement);
// default configuration
control.enablePan = false;
control.target = new THREE.Vector3(0, -12, 0);
control.minDistance = 10;
control.maxDistance = 256;
control.update();
return control;
}

26
src/skinview3d.js
View File

@ -1,26 +0,0 @@
export {
SkinObject,
CapeObject,
PlayerObject
} from "./model";
export {
SkinViewer
} from "./viewer";
export {
OrbitControls,
createOrbitControls
} from "./orbit_controls";
export {
invokeAnimation,
CompositeAnimation,
WalkingAnimation,
RunningAnimation,
RotatingAnimation
} from "./animation";
export {
isSlimSkin
} from "./utils";

0
src/skinview3d.ts Normal file
View File

0
src/utils.js → src/utils.ts
View File

96
src/viewer.js → src/viewer.ts
View File

@ -1,9 +1,36 @@
import * as THREE from "three";
import { PlayerObject } from "./model";
import { invokeAnimation } from "./animation";
import { loadSkinToCanvas,loadCapeToCanvas, isSlimSkin } from "./utils";
import { loadSkinToCanvas, loadCapeToCanvas, isSlimSkin } from "./utils";
class SkinViewer {
domElement: HTMLElement;
animation: Animation;
detectModel: boolean = false;
animationPaused: boolean = false;
animationTime: number = 0;
disposed: boolean = false;
skinImg: HTMLImageElement;
skinCanvas: HTMLCanvasElement;
skinTexture: THREE.Texture;
capeImg: HTMLImageElement;
capeCanvas: HTMLCanvasElement;
capeTexture: THREE.Texture;
layer1Material: THREE.MeshBasicMaterial;
layer2Material: THREE.MeshBasicMaterial;
scene: THREE.Scene;
camera: THREE.PerspectiveCamera;
capeMaterial: THREE.MeshBasicMaterial;
renderer: THREE.WebGLRenderer;
playerObject: PlayerObject;
constructor(options) {
this.domElement = options.domElement;
this.animation = options.animation || null;
@ -37,7 +64,7 @@ class SkinViewer {
this.camera.position.y = -12;
this.camera.position.z = 60;
this.renderer = new THREE.WebGLRenderer({ angleRot: true, alpha: true, antialias: false });
this.renderer = new THREE.WebGLRenderer({ alpha: true, antialias: false });
this.renderer.setSize(300, 300); // default size
this.renderer.context.getShaderInfoLog = () => ""; // shut firefox up
this.domElement.appendChild(this.renderer.domElement);
@ -73,10 +100,19 @@ class SkinViewer {
this.playerObject.cape.visible = true;
};
if (options.skinUrl) this.skinUrl = options.skinUrl;
if (options.capeUrl) this.capeUrl = options.capeUrl;
if (options.width) this.width = options.width;
if (options.height) this.height = options.height;
if (options.skinUrl) this.skinImg.src = options.skinUrl;
if (options.capeUrl) this.capeImg.src = options.capeUrl;
if (options.width) {
this.setSize(options.width, this.renderer.getSize().height);
}
if (options.height) {
this.setSize(this.renderer.getSize().width, options.height);
}
// if (options.skinUrl) this.skinUrl = options.skinUrl;
// if (options.capeUrl) this.capeUrl = options.capeUrl;
// if (options.width) this.width = options.width;
// if (options.height) this.height = options.height;
let draw = () => {
if (this.disposed) return;
@ -106,37 +142,37 @@ class SkinViewer {
this.capeTexture.dispose();
}
get skinUrl() {
return this.skinImg.src;
}
// get skinUrl() {
// return this.skinImg.src;
// }
set skinUrl(url) {
this.skinImg.src = url;
}
// set skinUrl(url) {
// this.skinImg.src = url;
// }
get capeUrl() {
return this.capeImg.src;
}
// get capeUrl() {
// return this.capeImg.src;
// }
set capeUrl(url) {
this.capeImg.src = url;
}
// set capeUrl(url) {
// this.capeImg.src = url;
// }
get width() {
return this.renderer.getSize().width;
}
// get width() {
// return this.renderer.getSize().width;
// }
set width(newWidth) {
this.setSize(newWidth, this.height);
}
// set width(newWidth) {
// this.setSize(newWidth, this.height);
// }
get height() {
return this.renderer.getSize().height;
}
// get height() {
// return this.renderer.getSize().height;
// }
set height(newHeight) {
this.setSize(this.width, newHeight);
}
// set height(newHeight) {
// this.setSize(this.width, newHeight);
// }
}
export { SkinViewer };

50
test/test.js
View File

@ -1,29 +1,29 @@
import { expect } from "chai";
import * as skinview3d from "../src/skinview3d";
// import { expect } from "chai";
// import * as skinview3d from "../src/skinview3d";
import skin1_8Default from "./textures/skin-1.8-default-no_hd.png";
import skin1_8Slim from "./textures/skin-1.8-slim-no_hd.png";
import skinOldDefault from "./textures/skin-old-default-no_hd.png";
// import skin1_8Default from "./textures/skin-1.8-default-no_hd.png";
// import skin1_8Slim from "./textures/skin-1.8-slim-no_hd.png";
// import skinOldDefault from "./textures/skin-old-default-no_hd.png";
describe("detect model of texture", () => {
it("1.8 default", async () => {
const image = document.createElement("img");
image.src = skin1_8Default;
await Promise.resolve();
expect(skinview3d.isSlimSkin(image)).to.equal(false);
});
// describe("detect model of texture", () => {
// it("1.8 default", async () => {
// const image = document.createElement("img");
// image.src = skin1_8Default;
// await Promise.resolve();
// expect(skinview3d.isSlimSkin(image)).to.equal(false);
// });
it("1.8 slim", async () => {
const image = document.createElement("img");
image.src = skin1_8Slim;
await Promise.resolve();
expect(skinview3d.isSlimSkin(image)).to.equal(true);
});
// it("1.8 slim", async () => {
// const image = document.createElement("img");
// image.src = skin1_8Slim;
// await Promise.resolve();
// expect(skinview3d.isSlimSkin(image)).to.equal(true);
// });
it("old default", async () => {
const image = document.createElement("img");
image.src = skinOldDefault;
await Promise.resolve();
expect(skinview3d.isSlimSkin(image)).to.equal(false);
});
});
// it("old default", async () => {
// const image = document.createElement("img");
// image.src = skinOldDefault;
// await Promise.resolve();
// expect(skinview3d.isSlimSkin(image)).to.equal(false);
// });
// });

2
tools/rollup-util.js
View File

@ -6,7 +6,7 @@ import fs from "fs";
let buildType = config => {
let options = {
input: "src/skinview3d.js",
input: "dist/skinview3d.js",
output: [],
external: [
"three"

16
tsconfig.json Normal file
View File

@ -0,0 +1,16 @@
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./build/",
"module": "none",
"sourceMap": true,
"target": "es3",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2017",
"dom"
]
}
}

33
types/animation.d.ts vendored
View File

@ -1,33 +0,0 @@
import { PlayerObject } from "./model";
export interface IAnimation {
play(player: PlayerObject, time: number): void;
}
export type AnimationFn = (player: PlayerObject, time: number) => void;
export type Animation = AnimationFn | IAnimation;
export function invokeAnimation(
animation: Animation,
player: PlayerObject,
time: number,
): void;
export interface AnimationHandle extends IAnimation {
readonly animation: Animation;
paused: boolean;
speed: number;
reset(): void;
}
export class CompositeAnimation implements IAnimation {
constructor();
public add(animation: Animation): AnimationHandle;
public play(player: PlayerObject, time: number): void;
}
export const WalkingAnimation: AnimationFn;
export const RunningAnimation: AnimationFn;
export const RotatingAnimation: AnimationFn;

33
types/model.d.ts vendored
View File

@ -1,33 +0,0 @@
import * as THREE from "three";
export class SkinObject extends THREE.Group {
public slim: boolean;
public readonly head: THREE.Group;
public readonly body: THREE.Group;
public readonly rightArm: THREE.Group;
public readonly leftArm: THREE.Group;
public readonly rightLeg: THREE.Group;
public readonly leftLeg: THREE.Group;
constructor(
layer1Material: THREE.Material,
layer2Material: THREE.Material,
);
}
export class CapeObject extends THREE.Group {
public readonly cape: THREE.Mesh;
constructor(capeMaterial: THREE.Material);
}
export class PlayerObject extends THREE.Group {
public readonly skin: SkinObject;
public readonly cape: CapeObject;
constructor(
layer1Material: THREE.Material,
layer2Material: THREE.Material,
capeMaterial: THREE.Material,
);
}

57
types/orbit_controls.d.ts vendored
View File

@ -1,57 +0,0 @@
import * as THREE from "three";
import { SkinViewer } from "./viewer";
export class OrbitControls {
public readonly object: THREE.Camera;
public readonly domElement: HTMLElement | HTMLDocument;
public enabled: boolean;
public target: THREE.Vector3;
public minDistance: number;
public maxDistance: number;
public minZoom: number;
public maxZoom: number;
public minPolarAngle: number;
public maxPolarAngle: number;
public minAzimuthAngle: number;
public maxAzimuthAngle: number;
public enableDamping: boolean;
public dampingFactor: number;
public enableZoom: boolean;
public zoomSpeed: number;
public enableRotate: boolean;
public rotateSpeed: number;
public enablePan: boolean;
public keyPanSpeed: number;
public autoRotate: boolean;
public autoRotateSpeed: number;
public enableKeys: boolean;
public keys: { LEFT: number, UP: number, RIGHT: number, BOTTOM: number };
public mouseButtons: { ORBIT: THREE.MOUSE, ZOOM: THREE.MOUSE, PAN: THREE.MOUSE };
constructor(object: THREE.Camera, domElement?: HTMLElement);
public getPolarAngle(): number;
public getAzimuthalAngle(): number;
public saveState(): void;
public reset(): void;
public update(): boolean;
public dispose(): void;
}
export function createOrbitControls(skinViewer: SkinViewer): OrbitControls;

5
types/skinview3d.d.ts vendored
View File

@ -1,5 +0,0 @@
export * from "./model";
export * from "./animation";
export * from "./viewer";
export * from "./orbit_controls";
export * from "./utils";

1
types/utils.d.ts vendored
View File

@ -1 +0,0 @@
export function isSlimSkin(skinImage: HTMLImageElement): boolean;

36
types/viewer.d.ts vendored
View File

@ -1,36 +0,0 @@
import * as THREE from "three";
import { Animation } from "./animation";
import { PlayerObject } from "./model";
export interface SkinViewerOptions {
domElement: Node;
animation?: Animation;
skinUrl?: string;
capeUrl?: string;
width?: number;
height?: number;
detectModel?: boolean;
}
export class SkinViewer {
public readonly domElement: Node;
public readonly disposed: boolean;
public width: number;
public height: number;
public skinUrl: string;
public capeUrl: string;
public animation: Animation;
public animationPaused: boolean;
public animationTime: number;
public detectModel: boolean;
public readonly playerObject: PlayerObject;
public readonly scene: THREE.Scene;
public readonly camera: THREE.PerspectiveCamera;
public readonly renderer: THREE.Renderer;
constructor(options: SkinViewerOptions);
public setSize(width: number, height: number): void;
public dispose(): void;
}