Does Hydrogen work with React three fiber and DREI libraries? I want to create an interactive 3d landing page for my website and as far as I’ve tested out, there’s no way to integrate them together.
Alternatively? What’s the best way to have interactable 3d assets on your landing page?
Topic summary
Initial Question:
A developer asks whether Hydrogen (Shopify’s React framework) is compatible with React Three Fiber and DREI libraries for creating an interactive 3D landing page, noting initial integration difficulties.
Community Response:
Another user encounters the same compatibility issue, confirming the problem exists.
Solutions Provided:
Vanilla Three.js Approach:
- One solution references using plain Three.js (vanilla JavaScript) instead of React wrappers
- Involves manually creating a canvas element, camera, and renderer
- Requires direct DOM manipulation and standard Three.js setup code
React Three Fiber Integration:
- A working solution demonstrates successful R3F/DREI integration with Hydrogen
- Uses lazy loading to import the Canvas component
- Implements
<Canvas>from@react-three/fiberand<Box>,<OrbitControls>from@react-three/drei - Wraps the 3D component in
<Suspense>with a fallback for loading states - Code snippets show complete implementation including component structure and homepage integration
Status: Resolved with two viable approaches—vanilla Three.js or React Three Fiber with lazy loading.
Hi, do you ever find the solution? I in the same case as you’re
A little late to the party, so better late than never I always say; See Here a separate post defining an answer to all of our problems. I hope you have already solved the issue! However if not, glad I could point you in the right direction. I’ll include the snippet below in case you don’t want to click the link.
#id3DCanvas { width: 500px; height: 1000px }
// get data from Canvas
const canvas = document.querySelector('#id3DCanvas');
// Create a basic perspective camera
// var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var camera = new THREE.PerspectiveCamera( 75, canvas.clientWidth/canvas.clientHeight, 0.1, 1000 );
camera.position.z = 4;
// Create a renderer with Antialiasing
const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
// Configure renderer clear color
renderer.setClearColor("#000000");
// Configure renderer size
// renderer.setSize( window.innerWidth/2, window.innerHeight/2);
renderer.setSize( canvas.clientWidth, canvas.clientHeight);
// Append Renderer to DOM
document.getElementById("id_canvasdiv").appendChild( renderer.domElement );
// document.body.appendChild( renderer.domElement );
and in that time alone I’ve come up with a way to (instead of running the vanilla.js route) use the R3F libs.
import {Canvas} from '@react-three/fiber';
import {Box, OrbitControls} from '@react-three/drei';
export default function ThreeCanvas() {
return (
);
}
function My3dObject() {
return (
);
}
const ThreeCanvas = lazy(() => import('~/components/ThreeCanvas'));
export default function Homepage() {
/** {LoaderReturnData} */
const data = useLoaderData();
return (
# Awesome Product
}>
);
}