diff --git a/README.md b/README.md index 3d47d12..fd11fe9 100644 --- a/README.md +++ b/README.md @@ -77,12 +77,12 @@ To enable it, you need to replace `SkinViewer` with `FXAASkinViewer`. You must use an **opaque** background when FXAA is enabled, because FXAA is incompatible with transparent backgrounds. -By default, the background color is white. +By default, when FXAA is enabled, the background color is white. To use a different color: ```javascript let skinViewer = new skinview3d.FXAASkinViewer(...); // Set the background color to blue -skinViewer.renderer.setClearColor(0x5a76f3); +skinViewer.background = 0x5a76f3; ``` # Build diff --git a/examples/index.html b/examples/index.html index a6db679..aa0407c 100644 --- a/examples/index.html +++ b/examples/index.html @@ -394,9 +394,9 @@ function initializeViewer() { skinViewer = new skinview3d.FXAASkinViewer({ - canvas: document.getElementById("skin_container") + canvas: document.getElementById("skin_container"), + background: 0x5a76f3 }); - skinViewer.renderer.setClearColor(0x5a76f3); orbitControl = skinview3d.createOrbitControls(skinViewer); rotateAnimation = null; primaryAnimation = null; diff --git a/src/fxaa.ts b/src/fxaa.ts index baec39a..a584cb9 100644 --- a/src/fxaa.ts +++ b/src/fxaa.ts @@ -14,9 +14,12 @@ export class FXAASkinViewer extends SkinViewer { constructor(options?: SkinViewerOptions) { // Force options.alpha to false, because FXAA is incompatible with transparent backgrounds if (options === undefined) { - options = { alpha: false }; + options = { alpha: false, background: "white" }; } else { options.alpha = false; + if (options.background === undefined) { + options.background = "white"; + } } super(options); diff --git a/src/viewer.ts b/src/viewer.ts index 8664952..4233cc7 100644 --- a/src/viewer.ts +++ b/src/viewer.ts @@ -1,5 +1,5 @@ import { inferModelType, isTextureSource, loadCapeToCanvas, loadImage, loadSkinToCanvas, ModelType, RemoteImage, TextureSource } from "skinview-utils"; -import { NearestFilter, PerspectiveCamera, Scene, Texture, Vector2, WebGLRenderer } from "three"; +import { Color, ColorRepresentation, NearestFilter, PerspectiveCamera, Scene, Texture, Vector2, WebGLRenderer } from "three"; import { RootAnimation } from "./animation.js"; import { BackEquipment, PlayerObject } from "./model.js"; @@ -47,6 +47,11 @@ export interface SkinViewerOptions { * If this option is true, rendering and animation loops will not start. */ renderPaused?: boolean; + + /** + * The background of the scene. Default is transparent. + */ + background?: ColorRepresentation | Texture; } export class SkinViewer { @@ -116,6 +121,9 @@ export class SkinViewer { if (options.height !== undefined) { this.height = options.height; } + if (options.background !== undefined) { + this.background = options.background; + } if (options.renderPaused === true) { this._renderPaused = true; @@ -275,4 +283,16 @@ export class SkinViewer { set height(newHeight: number) { this.setSize(this.width, newHeight); } + + get background(): null | Color | Texture { + return this.scene.background; + } + + set background(value: null | ColorRepresentation | Texture) { + if (value === null || value instanceof Color || value instanceof Texture) { + this.scene.background = value; + } else { + this.scene.background = new Color(value); + } + } }