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

Attempt 2 at fixing prerendering error

Browse Source
This commit is contained in:
Kurt Hutten
2021-10-07 21:25:07 +11:00
parent c4c195074b
commit 32d6ef27ad
5 changed files with 33 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/web/src/components/Hero/AssetWithGooey.tsx
View File

@@ -5,8 +5,7 @@ import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
import { useEdgeSplit } from 'src/helpers/hooks/useEdgeSplit'
import texture from 'src/components/IdeViewer/dullFrontLitMetal.png'
import { Glitch, EffectComposer } from "@react-three/postprocessing";
import useSafeTexture from 'src/helpers/hooks/useSafeTexture'
import { MeshDistortMaterial, Sphere } from '@react-three/drei'
import { MeshDistortMaterial, Sphere, useTexture } from '@react-three/drei'
const thresholdAngle = 10
export default function AssetWithGooey({
@@ -20,7 +19,7 @@ export default function AssetWithGooey({
const edgeRef = useRef(null)
const coffeeRef = useRef(null)
const mesh = useEdgeSplit((thresholdAngle * Math.PI) / 180, true, geo)
const colorMap = useSafeTexture(texture)
const colorMap = useTexture(texture)
const edges = React.useMemo(() => new THREE.EdgesGeometry(geo, 12), [geo])
const position = [0, 0, 5]
const scaleArr = Array.from({ length: 3 }).map(() => scale)

52
app/web/src/components/Hero/Hero.tsx
View File

@@ -12,6 +12,7 @@ import Gravatar from 'src/components/Gravatar/Gravatar'
import ProjectsCell from 'src/components/ProjectsCell'
import OutBound from 'src/components/OutBound/OutBound'
import { DynamicProjectButton } from 'src/components/NavPlusButton/NavPlusButton'
import FatalErrorBoundary from 'src/components/FatalErrorBoundary/FatalErrorBoundary'
// dynamic import to enable pre-render iof the homepage
const AssetWithGooey = React.lazy(
@@ -280,32 +281,35 @@ function ModelSection({
const { ref, inView } = useInView()
return (
<div className="relative h-full">
<div className="absolute inset-0" ref={ref}>
<Canvas
linear
dpr={[1, 2]}
orthographic
camera={{ zoom: 75, position: [0, 0, 500] }}
>
{!inView && <DisableRender />}
<pointLight position={[2, 3, 5]} color="#FFFFFF" intensity={2} />
<pointLight position={[2, 3, -5]} color="#FFFFFF" intensity={2} />
<pointLight position={[-6, 3, -5]} color="#FFFFFF" intensity={2} />
<pointLight position={[-6, 3, 5]} color="#FFFFFF" intensity={2} />
<pointLight position={[2, 1.5, 0]} color="#0000FF" intensity={2} />
<pointLight position={[2, 1.5, 0]} color="#FF0000" intensity={2} />
<Suspense
fallback={<Html center className="loading" children="Loading..." />}
<FatalErrorBoundary page={() => <div className="bg-gray-800 p-8 rounded-md text-ch-gray-300">something seams to have gone wrong here</div>}>
<div className="absolute inset-0" ref={ref}>
<Canvas
linear
dpr={[1, 2]}
orthographic
camera={{ zoom: 75, position: [0, 0, 500] }}
>
<AssetWithGooey assetUrl={assetUrl} scale={scale} />
</Suspense>
{!inView && <DisableRender />}
<pointLight position={[2, 3, 5]} color="#FFFFFF" intensity={2} />
<pointLight position={[2, 3, -5]} color="#FFFFFF" intensity={2} />
<pointLight position={[-6, 3, -5]} color="#FFFFFF" intensity={2} />
<pointLight position={[-6, 3, 5]} color="#FFFFFF" intensity={2} />
{/* uncomment for framerate and render time */}
{/* <Stats showPanel={0} className="three-debug-panel-1" /> */}
{/* <Stats showPanel={1} className="three-debug-panel-2" /> */}
</Canvas>
</div>
<pointLight position={[2, 1.5, 0]} color="#0000FF" intensity={2} />
<pointLight position={[2, 1.5, 0]} color="#FF0000" intensity={2} />
<Suspense
fallback={<Html center className="loading" children="Loading..." />}
>
<AssetWithGooey assetUrl={assetUrl} scale={scale} />
</Suspense>
{/* uncomment for framerate and render time */}
{/* <Stats showPanel={0} className="three-debug-panel-1" /> */}
{/* <Stats showPanel={1} className="three-debug-panel-2" /> */}
</Canvas>
</div>
</FatalErrorBoundary>
</div>
)
}

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

@@ -8,8 +8,8 @@ import {
GizmoViewport,
OrbitControls,
Environment,
useTexture,
} from '@react-three/drei'
import useSafeTexture from 'src/helpers/hooks/useSafeTexture'
import { useEdgeSplit } from 'src/helpers/hooks/useEdgeSplit'
import { Vector3 } from 'three'
import { requestRender } from 'src/helpers/hooks/useIdeState'
@@ -28,7 +28,7 @@ function Asset({ geometry: incomingGeo }) {
: new THREE.EdgesGeometry(incomingGeo, thresholdAngle),
[incomingGeo]
)
const colorMap = useSafeTexture(texture)
const colorMap = useTexture(texture)
if (!incomingGeo) return null
return (

11
app/web/src/helpers/hooks/useSafeTexture.ts
View File

@@ -1,11 +0,0 @@
import { useTexture } from '@react-three/drei'
export default function useSafeTexture(texture: string) {
let colorMap
try {
// breaks on netlify's prerendering service if not caught
// see app/web/src/components/FatalErrorBoundary/FatalErrorBoundary.tsx for more into on debugging the service
colorMap = useTexture(texture)
} catch (error) {}
return colorMap
}

2
app/web/src/pages/FatalErrorPage/FatalErrorPage.js
View File

@@ -10,7 +10,7 @@ import Seo from 'src/components/Seo/Seo'
export default () => (
<main>
<Seo title="Fatal error" description="Fatal error" lang="en-US" />
<Seo title="CadHub" description="CadHub" lang="en-US" />
<style
dangerouslySetInnerHTML={{