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 {