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
[Example of using skinview3d](https://bs-community.github.io/skinview3d/)
```html
<div id="skin_container"></div>
<canvas id="skin_container"></canvas>
<script>
let skinViewer = new skinview3d.SkinViewer(document.getElementById("skin_container"), {
let skinViewer = new skinview3d.SkinViewer({
canvas: document.getElementById("skin_container"),
width: 300,
height: 400,
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.
```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
alpha: false
alpha: false,
...
});
// set the background color
skinViewer.renderer.setClearColor(0x5a76f3);

5
examples/index.html
View File

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

4
src/fxaa.ts
View File

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

10
src/viewer.ts
View File

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