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 { useEdgeSplit } from 'src/helpers/hooks/useEdgeSplit'
import texture from 'src/components/IdeViewer/dullFrontLitMetal.png' import texture from 'src/components/IdeViewer/dullFrontLitMetal.png'
import { Glitch, EffectComposer } from "@react-three/postprocessing"; import { Glitch, EffectComposer } from "@react-three/postprocessing";
import useSafeTexture from 'src/helpers/hooks/useSafeTexture' import { MeshDistortMaterial, Sphere, useTexture } from '@react-three/drei'
import { MeshDistortMaterial, Sphere } from '@react-three/drei'
const thresholdAngle = 10 const thresholdAngle = 10
export default function AssetWithGooey({ export default function AssetWithGooey({
@@ -20,7 +19,7 @@ export default function AssetWithGooey({
const edgeRef = useRef(null) const edgeRef = useRef(null)
const coffeeRef = useRef(null) const coffeeRef = useRef(null)
const mesh = useEdgeSplit((thresholdAngle * Math.PI) / 180, true, geo) 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 edges = React.useMemo(() => new THREE.EdgesGeometry(geo, 12), [geo])
const position = [0, 0, 5] const position = [0, 0, 5]
const scaleArr = Array.from({ length: 3 }).map(() => scale) 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 ProjectsCell from 'src/components/ProjectsCell'
import OutBound from 'src/components/OutBound/OutBound' import OutBound from 'src/components/OutBound/OutBound'
import { DynamicProjectButton } from 'src/components/NavPlusButton/NavPlusButton' import { DynamicProjectButton } from 'src/components/NavPlusButton/NavPlusButton'
import FatalErrorBoundary from 'src/components/FatalErrorBoundary/FatalErrorBoundary'
// dynamic import to enable pre-render iof the homepage // dynamic import to enable pre-render iof the homepage
const AssetWithGooey = React.lazy( const AssetWithGooey = React.lazy(
@@ -280,32 +281,35 @@ function ModelSection({
const { ref, inView } = useInView() const { ref, inView } = useInView()
return ( return (
<div className="relative h-full"> <div className="relative h-full">
<div className="absolute inset-0" ref={ref}> <FatalErrorBoundary page={() => <div className="bg-gray-800 p-8 rounded-md text-ch-gray-300">something seams to have gone wrong here</div>}>
<Canvas <div className="absolute inset-0" ref={ref}>
linear <Canvas
dpr={[1, 2]} linear
orthographic dpr={[1, 2]}
camera={{ zoom: 75, position: [0, 0, 500] }} 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..." />}
> >
<AssetWithGooey assetUrl={assetUrl} scale={scale} /> {!inView && <DisableRender />}
</Suspense> <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 */} <pointLight position={[2, 1.5, 0]} color="#0000FF" intensity={2} />
{/* <Stats showPanel={0} className="three-debug-panel-1" /> */} <pointLight position={[2, 1.5, 0]} color="#FF0000" intensity={2} />
{/* <Stats showPanel={1} className="three-debug-panel-2" /> */}
</Canvas> <Suspense
</div> 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> </div>
) )
} }

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

@@ -8,8 +8,8 @@ import {
GizmoViewport, GizmoViewport,
OrbitControls, OrbitControls,
Environment, Environment,
useTexture,
} from '@react-three/drei' } from '@react-three/drei'
import useSafeTexture from 'src/helpers/hooks/useSafeTexture'
import { useEdgeSplit } from 'src/helpers/hooks/useEdgeSplit' import { useEdgeSplit } from 'src/helpers/hooks/useEdgeSplit'
import { Vector3 } from 'three' import { Vector3 } from 'three'
import { requestRender } from 'src/helpers/hooks/useIdeState' import { requestRender } from 'src/helpers/hooks/useIdeState'
@@ -28,7 +28,7 @@ function Asset({ geometry: incomingGeo }) {
: new THREE.EdgesGeometry(incomingGeo, thresholdAngle), : new THREE.EdgesGeometry(incomingGeo, thresholdAngle),
[incomingGeo] [incomingGeo]
) )
const colorMap = useSafeTexture(texture) const colorMap = useTexture(texture)
if (!incomingGeo) return null if (!incomingGeo) return null
return ( 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 () => ( export default () => (
<main> <main>
<Seo title="Fatal error" description="Fatal error" lang="en-US" /> <Seo title="CadHub" description="CadHub" lang="en-US" />
<style <style
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{