h3n3/cadhub
1
0
Fork 0
Code Issues 35 Pull Requests Packages Projects Releases Wiki Activity

Add more scene tweaks

Browse Source
This commit is contained in:
Kurt Hutten
2021-08-12 06:49:30 +10:00
parent 484c50c921
commit 74677c89a2
2 changed files with 33 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
app/web/src/components/IdeViewer/IdeViewer.tsx
View File

@@ -7,18 +7,16 @@ import {
GizmoHelper, GizmoHelper,
GizmoViewport, GizmoViewport,
OrbitControls, OrbitControls,
Environment,
useTexture,
} from '@react-three/drei' } from '@react-three/drei'
import { useEdgeSplit } from 'src/helpers/hooks/useEdegeSplit' import { useEdgeSplit } from 'src/helpers/hooks/useEdegeSplit'
import { Vector3 } from 'three' import { Vector3 } from 'three'
import { requestRender } from 'src/helpers/hooks/useIdeState' import { requestRender } from 'src/helpers/hooks/useIdeState'
import texture from './dullFrontLitMetal.png' import texture from './dullFrontLitMetal.png'
import { TextureLoader } from 'three/src/loaders/TextureLoader'
import Customizer from 'src/components/Customizer/Customizer' import Customizer from 'src/components/Customizer/Customizer'
import DelayedPingAnimation from 'src/components/DelayedPingAnimation/DelayedPingAnimation' import DelayedPingAnimation from 'src/components/DelayedPingAnimation/DelayedPingAnimation'
const loader = new TextureLoader()
const colorMap = loader.load(texture)
const thresholdAngle = 12 const thresholdAngle = 12
function Asset({ geometry: incomingGeo }) { function Asset({ geometry: incomingGeo }) {
@@ -30,6 +28,7 @@ function Asset({ geometry: incomingGeo }) {
: new THREE.EdgesGeometry(incomingGeo, thresholdAngle), : new THREE.EdgesGeometry(incomingGeo, thresholdAngle),
[incomingGeo] [incomingGeo]
) )
const colorMap = useTexture(texture)
if (!incomingGeo) return null if (!incomingGeo) return null
if (incomingGeo.length) if (incomingGeo.length)
@@ -40,10 +39,19 @@ function Asset({ geometry: incomingGeo }) {
return ( return (
<group dispose={null}> <group dispose={null}>
<mesh ref={mesh} scale={[1, 1, 1]} geometry={incomingGeo}> <mesh ref={mesh} scale={[1, 1, 1]} geometry={incomingGeo}>
<meshStandardMaterial map={colorMap} color="#F472B6" /> <meshPhysicalMaterial
envMapIntensity={2}
color="#F472B6"
map={colorMap}
clearcoat={0.1}
clearcoatRoughness={0.2}
roughness={10}
metalness={0.9}
smoothShading
/>
</mesh> </mesh>
<lineSegments geometry={edges} renderOrder={100} opac> <lineSegments geometry={edges} renderOrder={100}>
<lineBasicMaterial color="#555588" opacity={0.5} transparent /> <lineBasicMaterial color="#aaaaff" opacity={0.5} transparent />
</lineSegments> </lineSegments>
</group> </group>
) )
@@ -163,6 +171,12 @@ const IdeViewer = ({ Loading }) => {
const pink400 = '#F472B6' const pink400 = '#F472B6'
const indigo300 = '#A5B4FC' const indigo300 = '#A5B4FC'
const indigo900 = '#312E81' const indigo900 = '#312E81'
const jscadLightIntensity =
state.objectData?.type === 'geometry' &&
state.objectData?.data &&
state.objectData?.data.length
? 0.5
: 1.2
return ( return (
<div className="relative h-full bg-ch-gray-800"> <div className="relative h-full bg-ch-gray-800">
{state.isLoading && Loading} {state.isLoading && Loading}
@@ -188,7 +202,7 @@ const IdeViewer = ({ Loading }) => {
}`} }`}
onMouseDown={() => setIsDragging(true)} onMouseDown={() => setIsDragging(true)}
> >
<Canvas> <Canvas linear={true} dpr={[1, 2]}>
<Controls <Controls
onDragStart={() => setIsDragging(true)} onDragStart={() => setIsDragging(true)}
onInit={onInit} onInit={onInit}
@@ -214,9 +228,13 @@ const IdeViewer = ({ Loading }) => {
}} }}
/> />
<PerspectiveCamera makeDefault up={[0, 0, 1]}> <PerspectiveCamera makeDefault up={[0, 0, 1]}>
<pointLight position={[0, 0, 100]} intensity={1.2} /> <pointLight
position={[0, 0, 100]}
intensity={jscadLightIntensity}
/>
</PerspectiveCamera> </PerspectiveCamera>
<ambientLight intensity={0.3} /> <ambientLight intensity={0.3} />
<Environment preset="warehouse" />
<pointLight <pointLight
position={[-1000, -1000, -1000]} position={[-1000, -1000, -1000]}
color="#5555FF" color="#5555FF"

12
app/yarn.lock
View File

@@ -7859,9 +7859,9 @@ detect-file@^1.0.0:
integrity sha1-8NZtA2cqglyxtzvbP+YjEMjlUrc= integrity sha1-8NZtA2cqglyxtzvbP+YjEMjlUrc=
detect-gpu@^3.0.0: detect-gpu@^3.0.0:
version "3.1.12" version "3.1.11"
resolved "https://registry.yarnpkg.com/detect-gpu/-/detect-gpu-3.1.12.tgz#fc343765d9e4c1a5c6543441ae246778c5e87569" resolved "https://registry.yarnpkg.com/detect-gpu/-/detect-gpu-3.1.11.tgz#433f07fb8e505cb5e8975d23820fd4d00ec65f9b"
integrity sha512-cjSD8wyHykxun3TdEv2HfQZOs5iBmQFf/xoVWTrnz3Ktvjn5vNs6vAoFzsyTrW4KPtOtzCnJHrkc3YKj81Okkw== integrity sha512-JcmbzhdVfOPf0wNheytEEVD+tRZ3Lj6XQUBGKNdDjWW5Fb9xitTuBXdXnB1vcLy5DQMeSzYGFJVI66uAk4vnvA==
dependencies: dependencies:
webgl-constants "^1.1.1" webgl-constants "^1.1.1"
@@ -17239,9 +17239,9 @@ text-table@0.2.0, text-table@^0.2.0:
integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ= integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
three-mesh-bvh@^0.4.1: three-mesh-bvh@^0.4.1:
version "0.4.2" version "0.4.1"
resolved "https://registry.yarnpkg.com/three-mesh-bvh/-/three-mesh-bvh-0.4.2.tgz#d6ad431a1a1e5bce6f309e27cbb2db0142c9fb27" resolved "https://registry.yarnpkg.com/three-mesh-bvh/-/three-mesh-bvh-0.4.1.tgz#ba0bf1dac7cbd41f2132c8446545c8ad9fbeb892"
integrity sha512-dApttQDxi8aFaRqRJt6JQ+UYUQpIwZ4Zu4VhoVv9GugTaT0gFcPeo7ud9dzmq6HsLGX8p2i7VrO/zLu7mQ4VDQ== integrity sha512-1ALlGVjArZpi0SdqZhjwFA3DZHgBF/Uo4LnL8G7PczI7rpOoBK87CaBL073DVrrbIE4OONJvpq/PEzluKoRHbg==
three-stdlib@^2.4.0: three-stdlib@^2.4.0:
version "2.4.0" version "2.4.0"