Pbr environment map
Lighting using environment mapping. Fork on Codesandbox
Live example
Coming Soon
Code
import React, { Suspense } from "react";
import { render } from "react-dom";
import { Canvas } from "react-three-fiber";
import { Stats, OrbitControls, Environment } from "@react-three/drei";
const Ball = ({ position, children }) => {
return (
<mesh position={position}>
<sphereGeometry args={[1, 24, 24]} />
{children}
</mesh>
);
};
const App = () => {
const materials = [
<meshStandardMaterial metalness={0.9} roughness={0.1} />,
<meshStandardMaterial metalness={0.6} roughness={0.3} />,
<meshStandardMaterial metalness={0.5} roughness={0.5} />,
<meshStandardMaterial metalness={0.3} roughness={0.6} />,
<meshPhysicalMaterial clearcoat={0.6} roughness={0.1} />
];
return (
<Canvas style=>
<Suspense fallback={null}>
{materials.map((mat, i) => (
<Ball key={`ball-${i}`} position={[-4 + 2 * i, 0, 0]}>
{mat}
</Ball>
))}
<Environment files={"colorful_studio_1k.hdr"} path={"/"} />
</Suspense>
<OrbitControls />
<Stats />
</Canvas>
);
};
render(<App />, document.getElementById("root"));
Running this example
Clone this repo, and then NPM install and NPM start from the relevant directory.
$ cd examples/lighting/pbr-environment-map
$ npm install && npm run start