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

implement #9

This commit is contained in:
yushijinhun 2017-09-09 18:21:54 +08:00
parent 10958ba462
commit 2840778bc5
No known key found for this signature in database
GPG Key ID: 5BC167F73EA558E4
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="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>
var skinViewer = new skinpreview3d.SkinViewer(document.getElementById('skin_container'), 600, 600, true); var skinViewer = new skinpreview3d.SkinViewer({
skinViewer.skinUrl = 'img/hatsune_miku.png'; domElement: document.getElementById('skin_container'),
skinViewer.capeUrl = 'img/mojang_cape.png'; 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 // this enables the mouse control feature
var control = new skinpreview3d.SkinControl(skinViewer); 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]]; 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 angleRot = 0;
var skinInitialized = false; var skinInitialized = false;
var capeInitialized = false; var capeInitialized = false;
@ -123,18 +128,17 @@ var skinpreview3d = new function(){
leftLeg2Box, leftLeg2Mesh, leftLeg2Box, leftLeg2Mesh,
capeBox, capeMesh; capeBox, capeMesh;
this.domElement = domElement;
this.animationPaused = false; this.animationPaused = false;
this.animationSpeed = 3; this.animationSpeed = 3;
this.scene = new THREE.Scene(); 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.y = -12;
this.camera.position.z = 30; this.camera.position.z = 30;
this.renderer = new THREE.WebGLRenderer({angleRot: true, alpha: true, antialias: false}); 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.renderer.context.getShaderInfoLog = () => ''; // shut firefox up
this.domElement.appendChild(this.renderer.domElement); this.domElement.appendChild(this.renderer.domElement);
@ -150,6 +154,8 @@ var skinpreview3d = new function(){
}); });
var initializeSkin = () => { var initializeSkin = () => {
var isSlim = this.slim;
// Head Parts // Head Parts
headBox = new THREE.BoxGeometry(8, 8, 8, 0, 0, 0); headBox = new THREE.BoxGeometry(8, 8, 8, 0, 0, 0);
addVertices(headBox, addVertices(headBox,
@ -498,6 +504,11 @@ var skinpreview3d = new function(){
this.renderer.render(this.scene, this.camera); this.renderer.render(this.scene, this.camera);
} }
draw(); draw();
if(options.skinUrl)
this.skinUrl = options.skinUrl;
if(options.capeUrl)
this.capeUrl = options.capeUrl;
} }
// ====== OrbitControls ====== // ====== OrbitControls ======
@ -1207,11 +1218,10 @@ var skinpreview3d = new function(){
if(window.jQuery){ if(window.jQuery){
(function($) { (function($) {
$.fn.skinPreview3d = function (options) { $.fn.skinPreview3d = function (jqueryOptions) {
var skinViewer = new skinpreview3d.SkinViewer(this.get(0), options.width, options.height, options.slim === true); var options = Object.create(jqueryOptions);
skinViewer.skinUrl = options.skinUrl; options.domElement = this.get(0);
if(options.capeUrl != null) var skinViewer = new skinpreview3d.SkinViewer(options);
skinViewer.capeUrl = options.capeUrl;
if(options.disableControl !== true) if(options.disableControl !== true)
skinViewer.control = new skinpreview3d.SkinControl(skinViewer); skinViewer.control = new skinpreview3d.SkinControl(skinViewer);