OrthographicCamera Typescript.

[tosiek88]

Hi everyone! I am trying to get simple OrthographicCamera example with Typescript to work. For now I am getting error:

Type '{ ref: MutableRefObject<undefined>; position: [number, number, number]; zoom: number; }' is missing the
 following properties from type 'Pick<Props, "children" | "attach" | "attachArray" | "attachObject" | "args" | "key" | 
"onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | ... 88 more ... |
 "makeDefault">': children, makeDefault  TS2739

should I extend this type or make properties alternative?

import { OrthographicCamera, OrbitControls, Shadow, Text } from "drei";
import { default as React, useMemo, useRef, ReactNode } from "react";
import { Canvas, createPortal, useFrame } from "react-three-fiber";
import * as THREE from "three";
import "./App.css";

interface IProps {
  children: ReactNode;
}

function Sphere({ children }: IProps) {
  const cam = useRef();
  const [scene, target] = useMemo(() => {
    const scene = new THREE.Scene();
    scene.background = new THREE.Color("white");
    const target = new THREE.WebGLMultisampleRenderTarget(2048, 2048, {
      format: THREE.RGBFormat,
      stencilBuffer: false,
    });
    target.samples = 8;
    return [scene, target];
  }, []);

  useFrame((state) => {
    if (cam && cam.current) {
      console.log(cam);
      //   state.gl.setRenderTarget(target);
      //   state.gl.render(scene, cam.current);
      //   state.gl.setRenderTarget(null);
    }
  });

  return (
    <>
      <OrthographicCamera ref={cam} position={[0, 0, 10]} zoom={10} />
      {createPortal(
        <Text
          color="#171717"
          fontSize={4}
          maxWidth={60}
          lineHeight={1}
          letterSpacing={-0.1}
          textAlign="left"
          text={children}
          font="https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwK4vaqI.woff"
          anchorX="center"
          anchorY="middle"
        >
          {children}
        </Text>,
        scene
      )}
      <mesh>
        <sphereBufferGeometry attach="geometry" args={[2, 64, 64]} />
        <meshStandardMaterial attach="material" map={target.texture} />
      </mesh>
      <Shadow
        scale={[2, 2, 1]}
        opacity={0.2}
        position={[0, -2.1, 0]}
        rotation={[-Math.PI / 2, 0, 0]}
      />
      <Shadow
        color="#C12020"
        scale={[4, 4, 1]}
        opacity={0.2}
        position={[0, -2, 0]}
        rotation={[-Math.PI / 2, 0, 0]}
      />
    </>
  );
}

function App() {
  const cam = useRef();
  return (
    <Canvas
      colorManagement
      pixelRatio={window.devicePixelRatio}
      camera={{ position: [3, 3, 15], fov: 35 }}
    >
      <ambientLight intensity={0.5} />
      <spotLight
        position={[10, 10, 10]}
        angle={0.2}
        penumbra={1}
        intensity={2}
      />
      <pointLight position={[-10, -10, -5]} color="red" intensity={5} />
      <pointLight position={[0, -10, 0]} intensity={1.5} />
      <Sphere>
        LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT, SED DO EIUSMOD
        TEMPOR INCIDIDUNT UT LABORE ET DOLORE MAGNA ALIQUA. UT ENIM AD MINIM
        VENIAM, QUIS NOSTRUD EXERCITATION ULLAMCO LABORIS NISI UT ALIQUIP EX EA
        COMMODO CONSEQUAT. DUIS AUTE IRURE DOLOR IN REPREHENDERIT IN VOLUPTATE
        VELIT ESSE CILLUM DOLORE EU FUGIAT NULLA PARIATUR. EXCEPTEUR SINT
        OCCAECAT CUPIDATAT NON PROIDENT, SUNT IN CULPA QUI OFFICIA DESERUNT
        MOLLIT ANIM ID EST LABORUM.
      </Sphere>
      <OrbitControls />
    </Canvas>
  );
}

export default App;

[dangrabcad]

What line do you get that error on? That's key information for debugging the problem.

[SamStonehouse]

In case anyone else finds this page, I think the problem is missing the @types/three package. It worked fine for me after I added that.