added alternative background

package.json

@@ -8,6 +8,7 @@
     "@testing-library/jest-dom": "^5.11.10",
     "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^12.8.3",
+    "ray-tracing-renderer": "^0.10.15",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-icons": "^4.2.0",

src/components/ControlPanel.js

@@ -17,6 +17,7 @@ export default function ControlPanel({ activeDecalPath, setActiveDecalPath }) {
         setBackgroundColor,
         setDecalPath,
         setModelColor,
+        setSet,
     } = useStore()
 
     // SET ACTIVE DECAL PATH
@@ -73,6 +74,22 @@ export default function ControlPanel({ activeDecalPath, setActiveDecalPath }) {
                         setColor={setBackgroundColor}
                     />
                 </Card>
+                <Card title="Backgrounds">
+                    <button
+                        onClick={() => {
+                            setSet("PlainBg")
+                        }}
+                    >
+                        Plain
+                    </button>
+                    <button
+                        onClick={() => {
+                            setSet("ShapesBg")
+                        }}
+                    >
+                        Shapes
+                    </button>
+                </Card>
 
                 {decalPath && (
                     <Card title="Design">

src/components/PhotoButton.js

@@ -6,9 +6,10 @@ const PhotoButton = ({ gl }) => {
 
     // Take screenshot
     const screenshot = () => {
-        var strMime = "image/jpeg"
-        const imgData = gl.domElement.toDataURL(strMime)
+        var strMime = "image/png"
+        const imgData = gl.domElement.toDataURL(strMime, { pixelRatio: 4 })
         var a = document.createElement("a")
+
         a.setAttribute("download", "fotura.png")
         a.setAttribute("href", imgData)
         a.click()

src/components/three/Scenes.js

@@ -0,0 +1,23 @@
+import React from "react"
+import PlainBg from "./sets/PlainBg"
+import Lights from "./Lights"
+import ShapesBg from "./sets/ShapesBg"
+import useStore from "../../states/modelState"
+
+const Scenes = () => {
+    const { backgroundColor, set } = useStore()
+    return (
+        <>
+            {set == "PlainBg" && <group>
+                <PlainBg backgroundColor={backgroundColor} />
+                <Lights />
+            </group>}
+            {set == "ShapesBg" && <group>
+                <ShapesBg backgroundColor={backgroundColor} />
+                <Lights />
+            </group>}
+        </>
+    )
+}
+
+export default Scenes

src/components/three/Viewer.js

@@ -3,6 +3,7 @@ import { Canvas } from "@react-three/fiber"
 import { Suspense, useEffect, useState } from "react"
 import { useSpring } from "react-spring/three"
 import Fps from "../../helpers/Fps"
+import { RayTracingRenderer } from 'ray-tracing-renderer'
 
 import useStore from "../../states/modelState"
 import ControlPanel from "../ControlPanel"
@@ -53,11 +54,12 @@ const Viewer = () => {
         <>
             <Fps />
             <Canvas
+                pixelRatio={window.devicePixelRatio}
                 onCreated={({ gl }) => setGl(gl)}
                 style={decalPath && { cursor: "none" }}
                 gl={{
-                    pixelratio: window.devicePixelRatio,
                     preserveDrawingBuffer: true,
+                    antialias: false,
                 }}
                 camera={{ position: [0, 0, 2.2], fov: 50 }}
                 //frameloop="demand"

src/components/three/sets/PlainBg.js

@@ -0,0 +1,10 @@
+const PlainBg = ({backgroundColor}) => {
+	return (
+		<mesh position={[0, 0, -.5]} receiveShadow>
+			<planeBufferGeometry args={[100, 100]} />
+			<meshStandardMaterial color={backgroundColor} />
+		</mesh>
+	);
+};
+
+export default PlainBg;

src/components/three/sets/ShapesBg.js

@@ -0,0 +1,52 @@
+const ShapesBg = ({backgroundColor}) => {
+
+    return (
+        <group>
+            <mesh position={[0, 0, -0.5]} receiveShadow>
+                <planeBufferGeometry args={[10, 10]} />
+                <meshStandardMaterial
+                    attach="material"
+                    color={backgroundColor}
+                />
+            </mesh>
+            <mesh position={[0.5, 0, 0.5]} rotation={[4, 0, 0]} receiveShadow>
+                <boxBufferGeometry args={[0.06, 0.06, 0.06]} />
+                <meshStandardMaterial
+                    attach="material"
+                    color={backgroundColor}
+                />
+            </mesh>
+            <mesh position={[-0.5, -0.2, 0.5]} receiveShadow>
+                <sphereBufferGeometry args={[0.05, 20, 20]} />
+                <meshStandardMaterial
+                    attach="material"
+                    color={backgroundColor}
+                />
+            </mesh>
+            <mesh
+                position={[-0.5, 0.6, 0]}
+                rotation={[3, 5.5, 0]}
+                receiveShadow
+            >
+                <torusBufferGeometry args={[0.07, 0.03, 10, 30]} />
+                <meshStandardMaterial
+                    attach="material"
+                    color={backgroundColor}
+                />
+            </mesh>
+            <mesh
+                position={[0.15, -0.45, 0.3]}
+                rotation={[2.2, 3.5, 2]}
+                receiveShadow
+            >
+                <torusBufferGeometry args={[0.05, 0.02, 10, 30]} />
+                <meshStandardMaterial
+                    attach="material"
+                    color={backgroundColor}
+                />
+            </mesh>
+        </group>
+    )
+}
+
+export default ShapesBg

src/states/modelState.js

@@ -10,6 +10,7 @@ const useStore = create((set) => ({
     initialDecalSize: initialDecalSize,
     decalSize: initialDecalSize,
     modelColor: "#ffffff",
+    set: "ShapesBg",
     setBackgroundColor: (color) =>
         set((state) => (state.backgroundColor = color)),
     addDecal: (decalObject) =>
@@ -29,6 +30,7 @@ const useStore = create((set) => ({
         set((state) => (state.decalSize = state.decalSize - value)),
     setDecalSize: (size) => set((state) => (state.decalSize = size)),
     setModelColor: (color) => set((state) => (state.modelColor = color)),
+    setSet: (componentName) => set((state) => (state.set = componentName)),
 }))
 
 export default useStore