diff --git a/package-lock.json b/package-lock.json index b5dc32f..7d612e4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,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", @@ -18522,6 +18523,11 @@ "node": ">= 0.8" } }, + "node_modules/ray-tracing-renderer": { + "version": "0.10.15", + "resolved": "https://registry.npmjs.org/ray-tracing-renderer/-/ray-tracing-renderer-0.10.15.tgz", + "integrity": "sha512-1/tlCuKBZ392Ih2c61eIf2OIHwU4qVmIzULwQoX3WCHPlEoPhVUKAqJCDdNjZfUnXsraIJDPqCf6haACUZDsXQ==" + }, "node_modules/react": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", @@ -39388,6 +39394,11 @@ } } }, + "ray-tracing-renderer": { + "version": "0.10.15", + "resolved": "https://registry.npmjs.org/ray-tracing-renderer/-/ray-tracing-renderer-0.10.15.tgz", + "integrity": "sha512-1/tlCuKBZ392Ih2c61eIf2OIHwU4qVmIzULwQoX3WCHPlEoPhVUKAqJCDdNjZfUnXsraIJDPqCf6haACUZDsXQ==" + }, "react": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", diff --git a/package.json b/package.json index 8bd7106..f1559a7 100644 --- a/package.json +++ b/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", diff --git a/src/components/ControlPanel.js b/src/components/ControlPanel.js index 8e84faa..dab6e3e 100644 --- a/src/components/ControlPanel.js +++ b/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} /> + + + + {decalPath && ( diff --git a/src/components/PhotoButton.js b/src/components/PhotoButton.js index c895c0f..34ac5f1 100644 --- a/src/components/PhotoButton.js +++ b/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() diff --git a/src/components/three/Back.js b/src/components/three/Back.js deleted file mode 100644 index a984123..0000000 --- a/src/components/three/Back.js +++ /dev/null @@ -1,10 +0,0 @@ -const Back = ({color}) => { - return ( - - - - - ); -}; - -export default Back; diff --git a/src/components/three/Scenes.js b/src/components/three/Scenes.js new file mode 100644 index 0000000..b8f77a4 --- /dev/null +++ b/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" && + + + } + {set == "ShapesBg" && + + + } + + ) +} + +export default Scenes diff --git a/src/components/three/Viewer.js b/src/components/three/Viewer.js index e71c651..5cf7ed0 100644 --- a/src/components/three/Viewer.js +++ b/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 = () => { <> setGl(gl)} style={decalPath && { cursor: "none" }} gl={{ - pixelratio: window.devicePixelRatio, preserveDrawingBuffer: true, + antialias: false, }} camera={{ position: [0, 0, 2.2], fov: 50 }} //frameloop="demand" diff --git a/src/components/three/sets/PlainBg.js b/src/components/three/sets/PlainBg.js new file mode 100644 index 0000000..98274f4 --- /dev/null +++ b/src/components/three/sets/PlainBg.js @@ -0,0 +1,10 @@ +const PlainBg = ({backgroundColor}) => { + return ( + + + + + ); +}; + +export default PlainBg; diff --git a/src/components/three/sets/ShapesBg.js b/src/components/three/sets/ShapesBg.js new file mode 100644 index 0000000..07a1b87 --- /dev/null +++ b/src/components/three/sets/ShapesBg.js @@ -0,0 +1,52 @@ +const ShapesBg = ({backgroundColor}) => { + + return ( + + + + + + + + + + + + + + + + + + + + + + + ) +} + +export default ShapesBg diff --git a/src/states/modelState.js b/src/states/modelState.js index e050259..687857e 100644 --- a/src/states/modelState.js +++ b/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