RepliCAD

1
import React, { Suspense } from "react";
2
import { Canvas } from "@react-three/fiber";
3
import { OrbitControls } from "@react-three/drei";
4
import * as THREE from "three";
5

6
// We change the default orientation - threejs tends to use Y are the height,
7
// while replicad uses Z. This is mostly a representation default.
8
THREE.Object3D.DefaultUp.set(0, 0, 1);
9

10
// This is the basics to render a nice looking model user react-three-fiber
11
//
12
// The camera is positioned for the model we present (that cannot change size.
13
// You might need to adjust this with something like the autoadjust from the
14
// `Stage` component of `drei`
15
//
16
// Depending on your needs I would advice not using a light and relying on
17
// a matcap material instead of the meshStandardMaterial used here.
18
export default function ThreeContext({ children, ...props }) {
19
  const dpr = Math.min(window.devicePixelRatio, 2);
20

21
  return (
22
    <Suspense fallback={null}>
23
      <Canvas
24
        style={{
25
          width: "100%",
26
          height: "100%",
27
          backgroundColor: "#f5f5f5",
28
        }}
29
        dpr={dpr}
30
        frameloop="demand"
31
        camera={{ position: [20, 40, 50] }}
32
        {...props}
33
      >
34
        <OrbitControls />
35
        <ambientLight />
36
        <pointLight position={[100, 100, 100]} />
37
        {children}
38
      </Canvas>
39
    </Suspense>
40
  );
41
}
42