add SkinViewer.background property

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

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;

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);

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);
+		}
+	}
 }