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

Adjust scene lighting, attach light to camera for consistent lighting

Browse Source
This commit is contained in:
Kurt Hutten
2021-08-12 06:15:23 +10:00
parent 0ae5065aaf
commit 484c50c921
2 changed files with 26 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -25,7 +25,9 @@ function Asset({ geometry: incomingGeo }) {
const mesh = useEdgeSplit((thresholdAngle * Math.PI) / 180, true, incomingGeo) const mesh = useEdgeSplit((thresholdAngle * Math.PI) / 180, true, incomingGeo)
const edges = React.useMemo( const edges = React.useMemo(
() => () =>
incomingGeo.length ? null : new THREE.EdgesGeometry(incomingGeo, thresholdAngle), incomingGeo.length
? null
: new THREE.EdgesGeometry(incomingGeo, thresholdAngle),
[incomingGeo] [incomingGeo]
) )
if (!incomingGeo) return null if (!incomingGeo) return null
@@ -211,11 +213,20 @@ const IdeViewer = ({ Loading }) => {
}) })
}} }}
/> />
<PerspectiveCamera makeDefault up={[0, 0, 1]} /> <PerspectiveCamera makeDefault up={[0, 0, 1]}>
<pointLight position={[0, 0, 100]} intensity={1.2} />
</PerspectiveCamera>
<ambientLight intensity={0.3} /> <ambientLight intensity={0.3} />
<pointLight position={[15, 5, 10]} intensity={0.1} /> <pointLight
<pointLight position={[-1000, -1000, -1000]} intensity={1} /> position={[-1000, -1000, -1000]}
<pointLight position={[-1000, 0, 1000]} intensity={1} /> color="#5555FF"
intensity={0.5}
/>
<pointLight
position={[-1000, 0, 1000]}
color="#5555FF"
intensity={0.5}
/>
<gridHelper <gridHelper
args={[200, 20, 0xff5555, 0x555555]} args={[200, 20, 0xff5555, 0x555555]}
material-opacity={0.2} material-opacity={0.2}

12
app/web/src/helpers/hooks/useEdegeSplit.ts
View File

@@ -5,7 +5,11 @@ import * as React from 'react'
import * as THREE from 'three' import * as THREE from 'three'
import { EdgeSplitModifier } from 'three-stdlib' import { EdgeSplitModifier } from 'three-stdlib'
export function useEdgeSplit(cutOffAngle: number, tryKeepNormals: boolean = true, dependantGeometry?: any) { export function useEdgeSplit(
cutOffAngle: number,
tryKeepNormals = true,
dependantGeometry?: any
) {
const ref = React.useRef<THREE.Mesh>() const ref = React.useRef<THREE.Mesh>()
const original = React.useRef<THREE.BufferGeometry>() const original = React.useRef<THREE.BufferGeometry>()
const modifier = React.useRef<EdgeSplitModifier>() const modifier = React.useRef<EdgeSplitModifier>()
@@ -19,7 +23,11 @@ export function useEdgeSplit(cutOffAngle: number, tryKeepNormals: boolean = true
React.useEffect(() => { React.useEffect(() => {
if (original.current && ref.current && modifier.current) { if (original.current && ref.current && modifier.current) {
const modifiedGeometry = modifier.current.modify(original.current, cutOffAngle, tryKeepNormals) const modifiedGeometry = modifier.current.modify(
original.current,
cutOffAngle,
tryKeepNormals
)
modifiedGeometry.computeVertexNormals() modifiedGeometry.computeVertexNormals()
ref.current.geometry = modifiedGeometry ref.current.geometry = modifiedGeometry