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

Add code backdrops to homepage #522

Merged
Irev-Dev merged 1 commits from kurt/add-code-backdrops-to-home-page into main 2021-09-23 10:14:06 +02:00
Conversation 4 Commits 1 Files Changed 2 +198 -141
2 changed files with 198 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,11 +9,9 @@ import { useTexture, MeshDistortMaterial, Sphere } from '@react-three/drei'
const thresholdAngle = 10
export default function AssetWithGooey({
assetUrl,
offset,
scale,
}: {
assetUrl: string
offset: number[]
scale: number
}) {
const geo = useLoader(STLLoader, assetUrl)
@@ -22,7 +20,7 @@ export default function AssetWithGooey({
const mesh = useEdgeSplit((thresholdAngle * Math.PI) / 180, true, geo)
const colorMap = useTexture(texture)
const edges = React.useMemo(() => new THREE.EdgesGeometry(geo, 12), [geo])
const position = [offset[0], offset[1], 5]
const position = [0, 0, 5]
const scaleArr = Array.from({ length: 3 }).map(() => scale)
const { mouse } = useThree()
const [rEuler, rQuaternion] = useMemo(

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

@@ -13,39 +13,95 @@ import ProjectsCell from 'src/components/ProjectsCell'
import OutBound from 'src/components/OutBound/OutBound'
// dynamic import to enable pre-render iof the homepage
const Coffee = React.lazy(() => import('src/components/Hero/AssetWithGooey'))
const AssetWithGooey = React.lazy(() => import('src/components/Hero/AssetWithGooey'))
const cqCode = `from cadquery import *
d1 = 58.5
d2 = 56.5
d3 = 63.5
d4 = 84
d5 = 88
h1 = 8.5
h2 = 154
l1 = 14.5
l2 = 4.5
cup = (
Workplane("XY").circle(d1 / 2).extrude(h1)
.faces(">Z").circle(d3 / 2)
.workplane(offset=h2).circle(d5 / 2)
.loft()
.cut(Workplane("XY")
.circle((d3 - 3.5) / 2)
.workplane(offset=h2).circle((d5 - 3.5) / 2)
.loft()
.translate([0, 0, h1])
)
`.split('\n')
Irev-Dev commented 2021-09-21 10:04:48 +02:00 (Migrated from github.com)
Review
Copy Link

this was used to move the asset in 3d when screen size changes and can be removed now.

this was used to move the asset in 3d when screen size changes and can be removed now.
const scadCode = `hingeHalfExtrudeLength=hingeLength/2-clearance/2;
mountingHoleMoveIncrement=(hingeLength-2*mountingHoleEdgeOffset)/
(mountingHoleCount-1);
module costomizerEnd() {}
$fn=30;
tiny=0.005;
// modules
module hingeBaseProfile() {
translate([pivotRadius,0,0]){
square([baseWidth,baseThickness]);
}
}
module hingeBodyHalf() {
difference() {
union() {
linear_extrude(hingeHalfExtrudeLength){
offset(1)offset(-2)offset(1){
translate([0,pivotRadius,0]){
circle(pivotRadius);
}
square([pivotRadius,pivotRadius]);
hingeBaseProfile();
}
}
linear_extrude(hingeLength){
offset(1)offset(-1)hingeBaseProfile();
}
}
plateHoles();
}
}`.split('\n')
export const Hero = () => {
const [width, widthSetter] = React.useState(1024)
React.useEffect(() => {
const onResize = () => {
widthSetter(window.innerWidth)
}
window.addEventListener('resize', onResize)
onResize()
return () => {
window.removeEventListener('resize', onResize)
}
}, [])
const { heroOffset, tutOffset } = React.useMemo(() => {
if (width < 1024) {
return {
heroOffset: [0, -3],
tutOffset: [0, -3],
}
}
return {
heroOffset: [-5, 0],
tutOffset: [4, 0],
}
}, [width])
return (
<div className="bg-ch-gray-800">
<ModelSection assetUrl="/coffee-lid.stl" offset={heroOffset} scale={0.06}>
<div className="grid lg:grid-cols-2 py-32">
<div className="flex items-end justify-center row-start-2 lg:row-start-1 pt-96 lg:pt-0 pr-12 pl-6">
<div className="relative h-0 w-0">
<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="code-blob-clip-path" clipPathUnits="objectBoundingBox" transform="scale(0.0038 0.0056)">
<path d="M68.5 169.159C13.3 167.159 5.69181e-05 144.659 0 71.1594C3.99994 13.1594 50.9244 -14.591 121.5 7.65941C223 39.6594 266 25.1594 263.5 113.659C261.634 179.701 191.5 173.616 68.5 169.159Z" fill="#C4C4C4"/>
</clipPath>
</defs>
</svg>
</div>
<div className="grid lg:grid-cols-5 max-w-8xl mx-auto">
<div className="relative row-start-2 col-start-1 h-full lg:row-start-1 lg:col-span-3 lg:col-start-1">
<div className="absolute inset-0 my-20 mx-10 lg:mr-40 bg-gradient-to-tr from-pink-400 to-blue-600 opacity-40 overflow-hidden" style={{clipPath: 'url(#code-blob-clip-path)'}}>
<pre className="lg:ml-20 mt-12 text-blue-100 font-fira-code">
{cqCode.map((line, index) => <div key={index}><span className="w-12 pr-6 text-blue-200 text-opacity-50 inline-block text-right">{index+1}</span>{line}</div>)}
</pre>
</div>
<ModelSection assetUrl="/coffee-lid.stl" scale={0.06} />
</div>
<div className="flex items-end justify-center row-start-2 col-start-1 pt-96 pr-12 pl-6 pb-24 lg:col-span-3 lg:col-start-1 lg:row-start-1 lg:pt-0">
<Link
to={routes.project({
userName: 'irevdev',
@@ -74,7 +130,7 @@ export const Hero = () => {
</Link>
</div>
<div className="col-start-1 lg:col-start-2 px-4">
<div className="col-start-1 px-4 py-32 lg:col-start-3 lg:row-start-1 lg:col-span-3 lg:pl-52">
<div>
<span
className="text-7xl text-ch-blue-400 bg-ch-blue-640 bg-opacity-30 font-fira-code px-6 rounded-2xl shadow-ch"
@@ -105,12 +161,21 @@ export const Hero = () => {
</OutlineButton>
</div>
</div>
</ModelSection>
<ChooseYourCharacter />
<Community />
<ModelSection assetUrl="/hinge.stl" offset={tutOffset} scale={0.12}>
<div className="max-w-7xl mx-auto grid py-16 overflow-hidden">
<div className="py-0 pb-32 lg:py-32 ml-4 col-start-1 lg:col-start-1 pr-12 pl-6">
<div className="max-w-8xl mx-auto grid lg:grid-cols-5 py-16">
<div className=" row-start-2 col-start-1 lg:col-span-3 lg:col-start-3 lg:row-start-1 lg:-mx-10 h-full relative">
<div className="absolute inset-0 mb-24 mt-16 ml:10 mr:10 lg:ml-40 lg:mr-52 bg-gradient-to-tr from-pink-400 to-blue-600 opacity-30 overflow-hidden" style={{clipPath: 'url(#code-blob-clip-path)'}}>
<pre className="ml-10 mt-12 text-blue-100 text-xs font-fira-code">
{scadCode.map((line, index) => <div key={index}><span className="w-12 pr-6 text-blue-200 text-opacity-50 inline-block text-right">{index+1}</span>{line}</div>)}
</pre>
</div>
<ModelSection assetUrl="/hinge.stl" scale={0.12} />
</div>
<div className="py-12 pb-32 ml-4 row-start-1 col-start-1 pr-12 pl-6 lg:py-32 lg:col-start-1 lg:col-span-3">
<div className="text-4xl mb-6 text-ch-gray-300">Learn Code-CAD</div>
<p className="text-gray-600 max-w-lg">
@@ -128,7 +193,7 @@ export const Hero = () => {
</OutBound>
</div>
<div className="flex items-end justify-center row-start-2 lg:row-start-1 lg:col-start-2 pt-96 lg:pt-0 lg:pr-10">
<div className="flex items-end justify-center row-start-2 col-start-1 pb-24 lg:row-start-1 lg:col-start-3 lg:col-span-3 pt-96 lg:pt-0 lg:pr-10">
<Link
to={routes.project({
userName: 'irevdev',
@@ -159,7 +224,6 @@ export const Hero = () => {
</Link>
</div>
</div>
</ModelSection>
<Roadmap />
<div className="h-3 bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500" />
<Footer />
@@ -171,19 +235,14 @@ const DisableRender = () => useFrame(() => null, 1000)
function ModelSection({
assetUrl,
offset,
children,
scale,
}: {
assetUrl: string
offset: number[]
children: React.ReactNode
scale: number
}) {
const { ref, inView } = useInView()
return (
<div className="relative">
{children}
<div className="relative h-full">
<div className="absolute inset-0" ref={ref}>
<Canvas
linear
@@ -202,7 +261,7 @@ function ModelSection({
<Suspense
fallback={<Html center className="loading" children="Loading..." />}
>
<Coffee assetUrl={assetUrl} offset={offset} scale={scale} />
<AssetWithGooey assetUrl={assetUrl} scale={scale} />
</Suspense>
{/* uncomment for framerate and render time */}