Go Pro Sign Up Login
0 days 0 hrs 0 min 0 sec

Summer Sale

50% off Level Up Pro until you unsubscribe.
Get access to ALL 128 courses on Level Up Tutorials

This is your last chance to get Level Up Pro for $145/year.

or Learn More
Moon Moon

Buy Now and unlock this series

$

49

.99

$

39

.99

yours forever

Become a Pro and unlock everything

$

24

.99

per month

Orbit Controls

Now that we have our first cube made, it is time to make it better by first making it so that we can change the rotation and position of our cubes. After that, we will expand our possibilities even more by adding orbit controls.

Downloads

Become a pro to download code and videos

Comments

Rodrigo

6 months ago

If you're using TypeScript you need

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { Canvas, useThree, extend, ReactThreeFiber } from "@react-three/fiber";

declare global {
    namespace JSX {
        interface IntrinsicElements {
            orbitControls: ReactThreeFiber.Object3DNode<OrbitControls, typeof OrbitControls>
        }
    }
}

//... you'll be able to use <orbitControls /> without a problem
User avatar

Raul

almost 2 years ago

@Oby gl is the Web Graphics Library renderer, here is a list of everything you can extract from the useThree hook: https://inspiring-wiles-b4ffe0.netlify.app/4-hooks

Oby

almost 2 years ago

what is gl? the part where you added the camera and domElement

User avatar

Raul

about 2 years ago

@Didier Do you have your code up in a repo/sandbox so I can take a look at it? Hard to tell where the error is by just looking at that error

User avatar

Didier

about 2 years ago [edited]

I keep getting this error when importing OrbitControls: https://cln.sh/Zq60Ka I should note I've thoroughly checked my code for syntax errors, but it's completely free of those.

I'm using Next.js, but I don't think that should matter. Any ideas?

Want to join the conversation?

Become a Pro member today!