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

Merge pull request #10 from yushijinhun/impl-9 

implement #9
This commit is contained in:
Sean Boult 2017-09-13 19:20:11 -05:00 committed by GitHub
parent 10958ba462 2840778bc5
commit 61e261487e
2 changed files with 31 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
example_purejs.html
View File

@ -11,9 +11,18 @@
<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';
var skinViewer = new skinpreview3d.SkinViewer({
domElement: document.getElementById('skin_container'),
slim: true,
width: 600,
height: 600,
skinUrl: 'img/hatsune_miku.png',
capeUrl: 'img/mojang_cape.png'
});
// skin and cape can also be changed at runtime
// skinViewer.skinUrl = 'img/hatsune_miku.png';
// skinViewer.capeUrl = 'img/mojang_cape.png';
// this enables the mouse control feature
var control = new skinpreview3d.SkinControl(skinViewer);

28
js/skinpreview3d.js
View File

@ -84,7 +84,12 @@ var skinpreview3d = new function(){
box.faceVertexUvs[0][11] = [back[0], back[1], back[2]];
};
this.SkinViewer = function(domElement, canvasW, canvasH, isSlim){
this.SkinViewer = function(options){
this.domElement = options.domElement;
this.slim = options.slim || false;
this.width = options.width;
this.height = options.height;
var angleRot = 0;
var skinInitialized = false;
var capeInitialized = false;
@ -123,18 +128,17 @@ var skinpreview3d = new function(){
leftLeg2Box, leftLeg2Mesh,
capeBox, capeMesh;
this.domElement = domElement;
this.animationPaused = false;
this.animationSpeed = 3;
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(75, canvasW / canvasH, 1, 10000);
this.camera = new THREE.PerspectiveCamera(75, this.width / this.height, 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.setSize(this.width, this.height);
this.renderer.context.getShaderInfoLog = () => ''; // shut firefox up
this.domElement.appendChild(this.renderer.domElement);
@ -150,6 +154,8 @@ var skinpreview3d = new function(){
});
var initializeSkin = () => {
var isSlim = this.slim;
// Head Parts
headBox = new THREE.BoxGeometry(8, 8, 8, 0, 0, 0);
addVertices(headBox,
@ -498,6 +504,11 @@ var skinpreview3d = new function(){
this.renderer.render(this.scene, this.camera);
}
draw();
if(options.skinUrl)
this.skinUrl = options.skinUrl;
if(options.capeUrl)
this.capeUrl = options.capeUrl;
}
// ====== OrbitControls ======
@ -1207,11 +1218,10 @@ var skinpreview3d = new function(){
if(window.jQuery){
(function($) {
$.fn.skinPreview3d = function (options) {
var skinViewer = new skinpreview3d.SkinViewer(this.get(0), options.width, options.height, options.slim === true);
skinViewer.skinUrl = options.skinUrl;
if(options.capeUrl != null)
skinViewer.capeUrl = options.capeUrl;
$.fn.skinPreview3d = function (jqueryOptions) {
var options = Object.create(jqueryOptions);
options.domElement = this.get(0);
var skinViewer = new skinpreview3d.SkinViewer(options);
if(options.disableControl !== true)
skinViewer.control = new skinpreview3d.SkinControl(skinViewer);