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

remove 'domElement' property & add 'canvas' property

This commit is contained in:
Haowei Wen 2020-09-06 18:27:18 +08:00
parent e7a9267b9c
commit a92b28d0e9
No known key found for this signature in database
GPG Key ID: 5BC167F73EA558E4
4 changed files with 16 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
README.md
View File

@ -18,9 +18,10 @@ Three.js powered Minecraft skin viewer.
# Usage # Usage
[Example of using skinview3d](https://bs-community.github.io/skinview3d/) [Example of using skinview3d](https://bs-community.github.io/skinview3d/)
```html ```html
<div id="skin_container"></div> <canvas id="skin_container"></canvas>
<script> <script>
let skinViewer = new skinview3d.SkinViewer(document.getElementById("skin_container"), { let skinViewer = new skinview3d.SkinViewer({
canvas: document.getElementById("skin_container"),
width: 300, width: 300,
height: 400, height: 400,
skin: "img/skin.png" skin: "img/skin.png"
@ -73,9 +74,10 @@ It's recommended to use an opaque background when FXAA is enabled,
as transparent background may look buggy. as transparent background may look buggy.
```javascript ```javascript
let skinViewer = new skinview3d.FXAASkinViewer(document.getElementById("skin_container"), { let skinViewer = new skinview3d.FXAASkinViewer({
// we do not use transparent background, so disable alpha to improve performance // we do not use transparent background, so disable alpha to improve performance
alpha: false alpha: false,
...
}); });
// set the background color // set the background color
skinViewer.renderer.setClearColor(0x5a76f3); skinViewer.renderer.setClearColor(0x5a76f3);

5
examples/index.html
View File

@ -101,7 +101,7 @@
<body> <body>
<div id="skin_container"></div> <canvas id="skin_container"></canvas>
<div class="controls"> <div class="controls">
@ -371,7 +371,8 @@
} }
function initializeViewer() { function initializeViewer() {
skinViewer = new skinview3d.FXAASkinViewer(document.getElementById("skin_container"), { skinViewer = new skinview3d.FXAASkinViewer({
canvas: document.getElementById("skin_container"),
alpha: false alpha: false
}); });
skinViewer.renderer.setClearColor(0x5a76f3); skinViewer.renderer.setClearColor(0x5a76f3);

4
src/fxaa.ts
View File

@ -10,8 +10,8 @@ export class FXAASkinViewer extends SkinViewer {
readonly renderPass: RenderPass; readonly renderPass: RenderPass;
readonly fxaaPass: ShaderPass; readonly fxaaPass: ShaderPass;
constructor(domElement: Node, options: SkinViewerOptions = {}) { constructor(options: SkinViewerOptions = {}) {
super(domElement, options); super(options);
this.composer = new EffectComposer(this.renderer); this.composer = new EffectComposer(this.renderer);
this.renderPass = new RenderPass(this.scene, this.camera); this.renderPass = new RenderPass(this.scene, this.camera);
this.fxaaPass = new ShaderPass(FXAAShader); this.fxaaPass = new ShaderPass(FXAAShader);

10
src/viewer.ts
View File

@ -16,6 +16,7 @@ export type SkinViewerOptions = {
skin?: RemoteImage | TextureSource; skin?: RemoteImage | TextureSource;
cape?: RemoteImage | TextureSource; cape?: RemoteImage | TextureSource;
alpha?: boolean; alpha?: boolean;
canvas?: HTMLCanvasElement;
} }
function toMakeVisible(options?: LoadOptions): boolean { function toMakeVisible(options?: LoadOptions): boolean {
@ -26,7 +27,7 @@ function toMakeVisible(options?: LoadOptions): boolean {
} }
class SkinViewer { class SkinViewer {
readonly domElement: Node; readonly canvas: HTMLCanvasElement;
readonly scene: Scene; readonly scene: Scene;
readonly camera: PerspectiveCamera; readonly camera: PerspectiveCamera;
readonly renderer: WebGLRenderer; readonly renderer: WebGLRenderer;
@ -41,8 +42,8 @@ class SkinViewer {
private _disposed: boolean = false; private _disposed: boolean = false;
private _renderPaused: boolean = false; private _renderPaused: boolean = false;
constructor(domElement: Node, options: SkinViewerOptions = {}) { constructor(options: SkinViewerOptions = {}) {
this.domElement = domElement; this.canvas = options.canvas === undefined ? document.createElement("canvas") : options.canvas;
// texture // texture
this.skinCanvas = document.createElement("canvas"); this.skinCanvas = document.createElement("canvas");
@ -63,11 +64,11 @@ class SkinViewer {
this.camera.position.z = 60; this.camera.position.z = 60;
this.renderer = new WebGLRenderer({ this.renderer = new WebGLRenderer({
canvas: this.canvas,
alpha: options.alpha !== false, // alpha is on by default alpha: options.alpha !== false, // alpha is on by default
preserveDrawingBuffer: true preserveDrawingBuffer: true
}); });
this.renderer.setPixelRatio(window.devicePixelRatio); this.renderer.setPixelRatio(window.devicePixelRatio);
this.domElement.appendChild(this.renderer.domElement);
this.playerObject = new PlayerObject(this.skinTexture, this.capeTexture); this.playerObject = new PlayerObject(this.skinTexture, this.capeTexture);
this.playerObject.name = "player"; this.playerObject.name = "player";
@ -135,7 +136,6 @@ class SkinViewer {
dispose(): void { dispose(): void {
this._disposed = true; this._disposed = true;
this.domElement.removeChild(this.renderer.domElement);
this.renderer.dispose(); this.renderer.dispose();
this.skinTexture.dispose(); this.skinTexture.dispose();
this.capeTexture.dispose(); this.capeTexture.dispose();