diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000..95445ed
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+ // Use IntelliSense to learn about possible attributes.
+ // Hover to view descriptions of existing attributes.
+ // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "type": "chrome",
+ "request": "launch",
+ "name": "Launch Chrome against localhost",
+ "url": "http://localhost:5173",
+ "webRoot": "${workspaceFolder}"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/playground/App.tsx b/playground/App.tsx
index f084c7f..a86b7f5 100644
--- a/playground/App.tsx
+++ b/playground/App.tsx
@@ -8,10 +8,12 @@ import "./index.css";
extend(THREE);
export const App: Component = () => {
- // return "hallo";
+
+ const ambientColor = new THREE.Color() .setRGB( 0.4, 0.4, 0.4, THREE.LinearSRGBColorSpace );
+
return (
diff --git a/playground/Box.tsx b/playground/Box.tsx
index ea1e22a..eef58a7 100644
--- a/playground/Box.tsx
+++ b/playground/Box.tsx
@@ -1,5 +1,5 @@
import { createSignal } from "solid-js";
-import { Mesh } from "three";
+import { Color, LinearSRGBColorSpace, Mesh } from "three";
import { T, useFrame } from "../src";
export function Box() {
@@ -8,6 +8,9 @@ export function Box() {
useFrame(() => (mesh!.rotation.y += 0.01));
+ const green = new Color() .setStyle( "green", LinearSRGBColorSpace );
+ const red = new Color() .setStyle( "red", LinearSRGBColorSpace );
+
return (
<>
setHovered(false)}
>
-
+
>
);
diff --git a/src/canvas.tsx b/src/canvas.tsx
index 841be74..d4dcb3a 100644
--- a/src/canvas.tsx
+++ b/src/canvas.tsx
@@ -77,7 +77,7 @@ export interface CanvasProps extends ComponentProps<"div"> {
* @returns A div element containing the WebGL canvas configured to occupy the full available space.
*/
export function Canvas(_props: CanvasProps) {
- const [props, canvasProps] = splitProps(_props, ["fallback", "camera", "children", "ref"]);
+ const [props, canvasProps] = splitProps(_props, ["fallback", "camera", "children", "ref", "linear"]);
let canvas: HTMLCanvasElement;
let container: HTMLDivElement;
diff --git a/src/props.ts b/src/props.ts
index 9a22199..0daa39a 100644
--- a/src/props.ts
+++ b/src/props.ts
@@ -10,6 +10,7 @@ import {
import {
BufferGeometry,
Color,
+ LinearSRGBColorSpace,
Fog,
Layers,
Material,
@@ -17,6 +18,7 @@ import {
RGBAFormat,
Texture,
UnsignedByteType,
+ ColorManagement,
} from "three";
import { S3 } from "./";
import { $S3C } from "./augment";
@@ -163,7 +165,7 @@ export const applyProp = (source: S3.Instance, type: string, value: any) =
const canvasProps = useCanvasProps();
try {
- // Copy if properties match signatures
+ // Copy if properties match signatures.
if (target?.copy && target?.constructor === value?.constructor) {
target.copy(value);
}
@@ -179,11 +181,12 @@ export const applyProp = (source: S3.Instance, type: string, value: any) =
// Set literal types, ignore undefined
// https://github.com/pmndrs/react-three-fiber/issues/274
else if (target?.set && typeof value !== "object") {
- const isColor = target instanceof Color;
// Allow setting array scalars
- if (!isColor && target.setScalar && typeof value === "number") target.setScalar(value);
+ if ( target.setScalar && typeof value === "number" ) target.setScalar(value);
// Otherwise just set ...
- else if (value !== undefined) target.set(value);
+ else if (value !== undefined) {
+ target.set(value);
+ }
}
// Else, just overwrite the value
else {