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

Support zoom/rotate

This commit is contained in:
yushijinhun 2017-09-02 20:39:01 +08:00
parent 4af41f72a1
commit cf8cbf3cc9
No known key found for this signature in database
GPG Key ID: 5BC167F73EA558E4
4 changed files with 787 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
README.md
View File

@ -1,16 +1,17 @@
# skinpreview3d.js # skinpreview3d.js
This is a Three.js powered Minecraft skin renderer packaged as a jQuery plugin. A Three.js powered Minecraft skin viewer.
The code was originally created by [Kent Rasmussen](https://github.com/earthiverse). You can find out more about his project [here](https://github.com/earthiverse/3D-Minecraft-Skin-Viewer). The code was originally created by [Kent Rasmussen](https://github.com/earthiverse). You can find out more about his project [here](https://github.com/earthiverse/3D-Minecraft-Skin-Viewer).
# Features # Features
* 1.8 Skins * 1.8 Skins
* HD Skins
* Capes * Capes
* Slim arms * Slim arms
# Dependencies # Dependencies
* [Three.js](https://github.com/mrdoob/three.js/) * [Three.js](https://github.com/mrdoob/three.js/)
* [jQuery](https://jquery.com/) * [jQuery](https://jquery.com/) (Optional)
# Usage # Usage
HTML HTML
@ -30,3 +31,5 @@ $(() => {
}); });
}); });
``` ```
See `example_jquery.html` and `example_purejs.html` for more examples.

5
example.html → example_jquery.html
View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>skinpreview3d.js</title> <title>skinpreview3d.js example using jquery</title>
</head> </head>
<body> <body>
@ -12,11 +12,12 @@
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>
<script type="text/javascript" src="js/skinpreview3d.js"></script> <script type="text/javascript" src="js/skinpreview3d.js"></script>
<script> <script>
$(function() { $(() => {
$("#skin_container").skinPreview3d({ $("#skin_container").skinPreview3d({
skinUrl: 'img/hatsune_miku.png', skinUrl: 'img/hatsune_miku.png',
capeUrl: 'img/mojang_cape.png', capeUrl: 'img/mojang_cape.png',
slim: true, slim: true,
// disableControl: true, // This disables the mouse control feature
width: 600, width: 600,
height: 600 height: 600
}); });

31
example_purejs.html Normal file
View File

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>skinpreview3d.js example using pure javascript</title>
</head>
<body>
<div id="skin_container"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>
<script type="text/javascript" src="js/skinpreview3d.js"></script>
<script>
var skinViewer = new skinpreview3d.SkinViewer(document.getElementById('skin_container'), 600, 600, true);
skinViewer.skinUrl = 'img/hatsune_miku.png';
skinViewer.capeUrl = 'img/mojang_cape.png';
// this enables the mouse control feature
var control = new skinpreview3d.SkinControl(skinViewer);
// this makes the animation paused
// skinViewer.animationPaused = true;
// this changes the animation speed
// skinViewer.animationSpeed = 8;
// this disables the 'right click to play/pause' feature
// control.enableAnimationControl = false;
</script>
</body>
</html>

790
js/skinpreview3d.js
View File

@ -84,16 +84,10 @@ var skinpreview3d = new function(){
box.faceVertexUvs[0][11] = [back[0], back[1], back[2]]; box.faceVertexUvs[0][11] = [back[0], back[1], back[2]];
}; };
this.SkinViewer = function(model, canvasW, canvasH, isSlim){ this.SkinViewer = function(domElement, canvasW, canvasH, isSlim){
var angleRot = 0; var angleRot = 0;
var initialized = false; var initialized = false;
var camera = new THREE.PerspectiveCamera(75, canvasW / canvasH, 1, 10000);
camera.position.y = -12;
camera.position.z = 32;
var scene = new THREE.Scene();
var skinImg = new Image(); var skinImg = new Image();
var skinCanvas = document.createElement('canvas'); var skinCanvas = document.createElement('canvas');
var skinContext = skinCanvas.getContext('2d'); var skinContext = skinCanvas.getContext('2d');
@ -112,7 +106,6 @@ var skinpreview3d = new function(){
var layer2Material = new THREE.MeshBasicMaterial({map: skinTexture, transparent: true, opacity: 1, side: THREE.DoubleSide}); var layer2Material = new THREE.MeshBasicMaterial({map: skinTexture, transparent: true, opacity: 1, side: THREE.DoubleSide});
var capeMaterial = new THREE.MeshBasicMaterial({map: capeTexture}); var capeMaterial = new THREE.MeshBasicMaterial({map: capeTexture});
var renderer;
var capePivot; var capePivot;
var headBox, headMesh, var headBox, headMesh,
@ -129,10 +122,30 @@ var skinpreview3d = new function(){
leftLeg2Box, leftLeg2Mesh, leftLeg2Box, leftLeg2Mesh,
capeBox, capeMesh; capeBox, capeMesh;
this.paused = false; this.domElement = domElement;
this.animationPaused = false;
this.animationSpeed = 3; this.animationSpeed = 3;
this.setSkin = url => skinImg.src = url;
this.setCape = url => capeImg.src = url; this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(75, canvasW / canvasH, 1, 10000);
this.camera.position.y = -12;
this.camera.position.z = 30;
this.renderer = new THREE.WebGLRenderer({angleRot: true, alpha: true, antialias: false});
this.renderer.setSize(canvasW, canvasH);
this.renderer.context.getShaderInfoLog = () => ''; // shut firefox up
Object.defineProperties(this, {
'skinUrl': {
get: () => skinImg.src,
set: url => skinImg.src = url
},
'capeUrl': {
get: () => capeImg.src,
set: url => capeImg.src = url
}
});
var initialize = () => { var initialize = () => {
// Head Parts // Head Parts
@ -147,7 +160,7 @@ var skinpreview3d = new function(){
); );
headMesh = new THREE.Mesh(headBox, layer1Material); headMesh = new THREE.Mesh(headBox, layer1Material);
headMesh.name = 'head'; headMesh.name = 'head';
scene.add(headMesh); this.scene.add(headMesh);
// Body Parts // Body Parts
bodyBox = new THREE.BoxGeometry(8, 12, 4, 0, 0, 0); bodyBox = new THREE.BoxGeometry(8, 12, 4, 0, 0, 0);
@ -162,7 +175,7 @@ var skinpreview3d = new function(){
bodyMesh = new THREE.Mesh(bodyBox, layer1Material); bodyMesh = new THREE.Mesh(bodyBox, layer1Material);
bodyMesh.name = 'body'; bodyMesh.name = 'body';
bodyMesh.position.y = -10; bodyMesh.position.y = -10;
scene.add(bodyMesh); this.scene.add(bodyMesh);
// Right Arm Parts // Right Arm Parts
rightArmBox = new THREE.BoxGeometry(isSlim?3:4, 12, 4, 0, 0, 0); rightArmBox = new THREE.BoxGeometry(isSlim?3:4, 12, 4, 0, 0, 0);
@ -189,7 +202,7 @@ var skinpreview3d = new function(){
rightArmMesh.name = 'rightArm'; rightArmMesh.name = 'rightArm';
rightArmMesh.position.y = -10; rightArmMesh.position.y = -10;
rightArmMesh.position.x = isSlim?-5.5:-6; rightArmMesh.position.x = isSlim?-5.5:-6;
scene.add(rightArmMesh); this.scene.add(rightArmMesh);
// Left Arm Parts // Left Arm Parts
leftArmBox = new THREE.BoxGeometry(isSlim?3:4, 12, 4, 0, 0, 0); leftArmBox = new THREE.BoxGeometry(isSlim?3:4, 12, 4, 0, 0, 0);
@ -216,7 +229,7 @@ var skinpreview3d = new function(){
leftArmMesh.name = 'leftArm'; leftArmMesh.name = 'leftArm';
leftArmMesh.position.y = -10; leftArmMesh.position.y = -10;
leftArmMesh.position.x = isSlim?5.5:6; leftArmMesh.position.x = isSlim?5.5:6;
scene.add(leftArmMesh); this.scene.add(leftArmMesh);
// Right Leg Parts // Right Leg Parts
rightLegBox = new THREE.BoxGeometry(4, 12, 4, 0, 0, 0); rightLegBox = new THREE.BoxGeometry(4, 12, 4, 0, 0, 0);
@ -232,7 +245,7 @@ var skinpreview3d = new function(){
rightLegMesh.name = 'rightLeg' rightLegMesh.name = 'rightLeg'
rightLegMesh.position.y = -22; rightLegMesh.position.y = -22;
rightLegMesh.position.x = -2; rightLegMesh.position.x = -2;
scene.add(rightLegMesh); this.scene.add(rightLegMesh);
// Left Leg Parts // Left Leg Parts
leftLegBox = new THREE.BoxGeometry(4, 12, 4, 0, 0, 0); leftLegBox = new THREE.BoxGeometry(4, 12, 4, 0, 0, 0);
@ -248,7 +261,7 @@ var skinpreview3d = new function(){
leftLegMesh.name = 'leftLeg'; leftLegMesh.name = 'leftLeg';
leftLegMesh.position.y = -22; leftLegMesh.position.y = -22;
leftLegMesh.position.x = 2; leftLegMesh.position.x = 2;
scene.add(leftLegMesh); this.scene.add(leftLegMesh);
// Head Overlay Parts // Head Overlay Parts
head2Box = new THREE.BoxGeometry(9, 9, 9, 0, 0, 0); head2Box = new THREE.BoxGeometry(9, 9, 9, 0, 0, 0);
@ -262,7 +275,7 @@ var skinpreview3d = new function(){
); );
head2Mesh = new THREE.Mesh(head2Box, layer2Material); head2Mesh = new THREE.Mesh(head2Box, layer2Material);
head2Mesh.name = 'head2' head2Mesh.name = 'head2'
scene.add(head2Mesh); this.scene.add(head2Mesh);
// Body Overlay Parts // Body Overlay Parts
body2Box = new THREE.BoxGeometry(9, 13.5, 4.5, 0, 0, 0); body2Box = new THREE.BoxGeometry(9, 13.5, 4.5, 0, 0, 0);
@ -277,7 +290,7 @@ var skinpreview3d = new function(){
body2Mesh = new THREE.Mesh(body2Box, layer2Material); body2Mesh = new THREE.Mesh(body2Box, layer2Material);
body2Mesh.name = 'body2'; body2Mesh.name = 'body2';
body2Mesh.position.y = -10; body2Mesh.position.y = -10;
scene.add(body2Mesh); this.scene.add(body2Mesh);
// Right Arm Overlay Parts // Right Arm Overlay Parts
rightArm2Box = new THREE.BoxGeometry(isSlim?3.375:4.5, 13.5, 4.5, 0, 0, 0); rightArm2Box = new THREE.BoxGeometry(isSlim?3.375:4.5, 13.5, 4.5, 0, 0, 0);
@ -304,7 +317,7 @@ var skinpreview3d = new function(){
rightArm2Mesh.name = 'rightArm2'; rightArm2Mesh.name = 'rightArm2';
rightArm2Mesh.position.y = -10; rightArm2Mesh.position.y = -10;
rightArm2Mesh.position.x = -6; rightArm2Mesh.position.x = -6;
scene.add(rightArm2Mesh); this.scene.add(rightArm2Mesh);
// Left Arm Overlay Parts // Left Arm Overlay Parts
leftArm2Box = new THREE.BoxGeometry(isSlim?3.375:4.5, 13.5, 4.5, 0, 0, 0); leftArm2Box = new THREE.BoxGeometry(isSlim?3.375:4.5, 13.5, 4.5, 0, 0, 0);
@ -332,7 +345,7 @@ var skinpreview3d = new function(){
leftArm2Mesh.position.y = -10; leftArm2Mesh.position.y = -10;
leftArm2Mesh.position.x = 6; leftArm2Mesh.position.x = 6;
// leftArm2Mesh.visible = true; // leftArm2Mesh.visible = true;
scene.add(leftArm2Mesh); this.scene.add(leftArm2Mesh);
// Right Leg Overlay Parts // Right Leg Overlay Parts
rightLeg2Box = new THREE.BoxGeometry(4.5, 13.5, 4.5, 0, 0, 0); rightLeg2Box = new THREE.BoxGeometry(4.5, 13.5, 4.5, 0, 0, 0);
@ -348,7 +361,7 @@ var skinpreview3d = new function(){
rightLeg2Mesh.name = 'rightLeg2' rightLeg2Mesh.name = 'rightLeg2'
rightLeg2Mesh.position.y = -22; rightLeg2Mesh.position.y = -22;
rightLeg2Mesh.position.x = -2; rightLeg2Mesh.position.x = -2;
scene.add(rightLeg2Mesh); this.scene.add(rightLeg2Mesh);
// Left Leg Overlay Parts // Left Leg Overlay Parts
leftLeg2Box = new THREE.BoxGeometry(4.5, 13.5, 4.5, 0, 0, 0); leftLeg2Box = new THREE.BoxGeometry(4.5, 13.5, 4.5, 0, 0, 0);
@ -364,7 +377,7 @@ var skinpreview3d = new function(){
leftLeg2Mesh.name = 'leftLeg2'; leftLeg2Mesh.name = 'leftLeg2';
leftLeg2Mesh.position.y = -22; leftLeg2Mesh.position.y = -22;
leftLeg2Mesh.position.x = 2; leftLeg2Mesh.position.x = 2;
scene.add(leftLeg2Mesh); this.scene.add(leftLeg2Mesh);
// Cape Parts // Cape Parts
// back = outside // back = outside
@ -384,13 +397,9 @@ var skinpreview3d = new function(){
capeMesh.position.z = -0.55; capeMesh.position.z = -0.55;
capePivot = new THREE.Group(); capePivot = new THREE.Group();
capePivot.rotation.x = 25 * (Math.PI/180); capePivot.rotation.x = 25 * (Math.PI/180);
scene.add(capePivot); this.scene.add(capePivot);
renderer = new THREE.WebGLRenderer({angleRot: true, alpha: true, antialias: false}); this.domElement.append(this.renderer.domElement);
renderer.setSize(canvasW, canvasH);
renderer.context.getShaderInfoLog = () => ''; // shut firefox up
model.append(renderer.domElement);
} }
skinImg.crossOrigin = ''; skinImg.crossOrigin = '';
@ -454,7 +463,7 @@ var skinpreview3d = new function(){
var drawSkin = () => { var drawSkin = () => {
requestAnimationFrame(drawSkin); requestAnimationFrame(drawSkin);
var time = (Date.now() - startTime)/1000; var time = (Date.now() - startTime)/1000;
if(!this.paused) if(!this.animationPaused)
angleRot += 0.01; angleRot += 0.01;
//Leg Swing //Leg Swing
@ -473,31 +482,728 @@ var skinpreview3d = new function(){
rightArm2Mesh.position.z = rightArmMesh.position.z = 0 - 6*Math.sin(rightArmMesh.rotation.x); rightArm2Mesh.position.z = rightArmMesh.position.z = 0 - 6*Math.sin(rightArmMesh.rotation.x);
rightArm2Mesh.position.y = rightArmMesh.position.y = -4 - 6*Math.abs(Math.cos(rightArmMesh.rotation.x)); rightArm2Mesh.position.y = rightArmMesh.position.y = -4 - 6*Math.abs(Math.cos(rightArmMesh.rotation.x));
renderer.render(scene, camera); this.renderer.render(this.scene, this.camera);
if(angleRot > 360) if(angleRot > 360)
angleRot = 0; angleRot = 0;
} }
} }
// ====== OrbitControls ======
// The code was originally from https://github.com/mrdoob/three.js/blob/d45a042cf962e9b1aa9441810ba118647b48aacb/examples/js/controls/OrbitControls.js
/**
* The MIT License
*
* Copyright © 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.
*/
this.OrbitControls = function (object, domElement) {
/**
* @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
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 () {
var offset = new THREE.Vector3();
// so camera.up is the orbit axis
var quat = new THREE.Quaternion().setFromUnitVectors(object.up, new THREE.Vector3(0, 1, 0));
var quatInverse = quat.clone().inverse();
var lastPosition = new THREE.Vector3();
var lastQuaternion = new THREE.Quaternion();
return function update() {
var 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
//
var scope = this;
var changeEvent = { type: 'change' };
var startEvent = { type: 'start' };
var endEvent = { type: 'end' };
var STATE = { NONE: - 1, ROTATE: 0, DOLLY: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_DOLLY: 4, TOUCH_PAN: 5 };
var state = STATE.NONE;
var EPS = 0.000001;
// current position in spherical coordinates
var spherical = new THREE.Spherical();
var sphericalDelta = new THREE.Spherical();
var scale = 1;
var panOffset = new THREE.Vector3();
var zoomChanged = false;
var rotateStart = new THREE.Vector2();
var rotateEnd = new THREE.Vector2();
var rotateDelta = new THREE.Vector2();
var panStart = new THREE.Vector2();
var panEnd = new THREE.Vector2();
var panDelta = new THREE.Vector2();
var dollyStart = new THREE.Vector2();
var dollyEnd = new THREE.Vector2();
var 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;
}
var panLeft = function () {
var v = new THREE.Vector3();
return function panLeft(distance, objectMatrix) {
v.setFromMatrixColumn(objectMatrix, 0); // get X column of objectMatrix
v.multiplyScalar(- distance);
panOffset.add(v);
};
}();
var panUp = function () {
var 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
var pan = function () {
var offset = new THREE.Vector3();
return function pan(deltaX, deltaY) {
var element = scope.domElement === document ? scope.domElement.body : scope.domElement;
if (scope.object instanceof THREE.PerspectiveCamera) {
// perspective
var position = scope.object.position;
offset.copy(position).sub(scope.target);
var 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);
var 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) {
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);
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);
var 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) {
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);
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();
};
this.OrbitControls.prototype = Object.create(THREE.EventDispatcher.prototype);
this.OrbitControls.prototype.constructor = this.OrbitControls;
// ============
this.SkinControl = function(skinViewer) {
this.enableAnimationControl = true;
this.skinViewer = skinViewer;
this.orbitControls = new skinpreview3d.OrbitControls(skinViewer.camera, skinViewer.renderer.domElement);
this.orbitControls.enablePan = false;
this.orbitControls.target = new THREE.Vector3(0, -12 ,0);
this.orbitControls.minDistance = 10;
this.orbitControls.maxDistance = 256;
this.orbitControls.update();
this.skinViewer.domElement.addEventListener('contextmenu', e => {
if(this.enableAnimationControl) {
e.preventDefault();
this.skinViewer.animationPaused = !this.skinViewer.animationPaused;
}
}, false);
}
} }
if(window.jQuery){ if(window.jQuery){
(function($) { (function($) {
$.fn.skinPreview3d = function (options) { $.fn.skinPreview3d = function (options) {
var sp = new skinpreview3d.SkinViewer(this, options.width, options.height, options.slim === true); var skinViewer = new skinpreview3d.SkinViewer(this.get(0), options.width, options.height, options.slim === true);
sp.setSkin(options.skinUrl); skinViewer.skinUrl = options.skinUrl;
if(options.capeUrl != null) if(options.capeUrl != null)
sp.setCape(options.capeUrl); skinViewer.capeUrl = options.capeUrl;
if(options.disableControl!==true){ if(options.disableControl !== true)
this.bind('contextmenu', e => { skinViewer.control = new skinpreview3d.SkinControl(skinViewer);
e.preventDefault();
sp.paused = !sp.paused;
});
}
return sp;
}; };
} (window.jQuery)); } (window.jQuery));
} }