Logo

[vincerubinetti]

Idea 1

source

import * as three from "three";
import * as fiber from "@react-three/fiber";
import * as drei from "@react-three/drei";
import * as postprocessing from "@react-three/postprocessing";
import { BlendFunction } from "postprocessing";

export default function App() {
  return (
    <fiber.Canvas camera={{ position: [0, 0, 10], fov: 45 }}>
      <drei.Environment>
        <drei.Lightformer
          position={[-3, 3, -3]}
          scale={5}
          intensity={10}
          color="white"
        />
        <drei.Lightformer
          position={[3, -3, 3]}
          scale={5}
          intensity={10}
          color="white"
        />
      </drei.Environment>

      <Sphere color="hsl(200, 100%, 60%)" position={[-1, -1, -3]} />
      <Sphere color="hsl(340, 100%, 70%)" position={[1, 0, 0]} />
      <Sphere color="hsl(20, 100%, 60%)" position={[-1, 1, 3]} />

      <drei.OrbitControls />

      <postprocessing.EffectComposer>
        <postprocessing.Noise
          opacity={0.5}
          blendFunction={BlendFunction.OVERLAY}
        />
      </postprocessing.EffectComposer>
    </fiber.Canvas>
  );
}

const Sphere = ({
  color = "",
  position = [0, 0, 0] as [number, number, number],
  rotation = [0, 0, 0] as [number, number, number],
}) => {
  const [x, y, z] = position;
  return (
    <>
      <drei.Sphere
        position={[x, y, z]}
        args={[0.25, 64, 64]}
        rotation={rotation}
      >
        <meshStandardMaterial color="black" metalness={1} roughness={1} />
      </drei.Sphere>
      <drei.Sphere
        position={[x, y, z]}
        args={[1.26, 64, 64]}
        rotation={rotation}
      >
        <meshStandardMaterial
          transparent
          opacity={0.75}
          color={color}
          metalness={1}
          roughness={1}
        />
      </drei.Sphere>
    </>
  );
};