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

changable size

This commit is contained in:
yushijinhun 2017-09-09 19:00:10 +08:00
parent 61e261487e
commit 1635b808e9
No known key found for this signature in database
GPG Key ID: 5BC167F73EA558E4
2 changed files with 25 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
example_purejs.html
View File

@ -20,10 +20,14 @@
capeUrl: 'img/mojang_cape.png' capeUrl: 'img/mojang_cape.png'
}); });
// skin and cape can also be changed at runtime // change the skin and cape
// skinViewer.skinUrl = 'img/hatsune_miku.png'; // skinViewer.skinUrl = 'img/hatsune_miku.png';
// skinViewer.capeUrl = 'img/mojang_cape.png'; // skinViewer.capeUrl = 'img/mojang_cape.png';
// change the width and height
// skinViewer.width = 300;
// skinViewer.height = 400;
// 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

@ -87,8 +87,6 @@ var skinpreview3d = new function(){
this.SkinViewer = function(options){ this.SkinViewer = function(options){
this.domElement = options.domElement; this.domElement = options.domElement;
this.slim = options.slim || false; 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;
@ -133,15 +131,21 @@ var skinpreview3d = new function(){
this.scene = new THREE.Scene(); this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(75, this.width / this.height, 1, 10000); this.camera = new THREE.PerspectiveCamera(75);
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(this.width, this.height); this.renderer.setSize(300, 300); // default size
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);
var setSize = (width,height) => {
this.camera.aspect = width / height;
this.camera.updateProjectionMatrix();
this.renderer.setSize(width, height);
};
Object.defineProperties(this, { Object.defineProperties(this, {
'skinUrl': { 'skinUrl': {
get: () => skinImg.src, get: () => skinImg.src,
@ -150,6 +154,14 @@ var skinpreview3d = new function(){
'capeUrl': { 'capeUrl': {
get: () => capeImg.src, get: () => capeImg.src,
set: url => capeImg.src = url set: url => capeImg.src = url
},
'width': {
get: () => this.renderer.getSize().width,
set: newWidth => setSize(newWidth, this.height)
},
'height': {
get: () => this.renderer.getSize().height,
set: newHeight => setSize(this.width, newHeight)
} }
}); });
@ -505,10 +517,10 @@ var skinpreview3d = new function(){
} }
draw(); draw();
if(options.skinUrl) if(options.skinUrl) this.skinUrl = options.skinUrl;
this.skinUrl = options.skinUrl; if(options.capeUrl) this.capeUrl = options.capeUrl;
if(options.capeUrl) if(options.width) this.width = options.width;
this.capeUrl = options.capeUrl; if(options.height) this.height = options.height;
} }
// ====== OrbitControls ====== // ====== OrbitControls ======