React-three-drei CDN

[thherve]

Select Topic Area

Question

Body

Hello to you
Does anyone have a good CDN link that works for react-three-drei?
All the ones I'm using seem to be incomplete and I can't import especially functions like float or OrbitControls. I get an error msg when I try to use them. But "useGLTF" works perfectly.

[hrishikesh-kocharekar-dev]

When using external libraries like react-three-drei (a library that provides useful helpers and abstractions for working with Three.js in React), it's important to ensure that you have the correct CDN link to include the required scripts
Unpkg CDN: This CDN provides a simple way to include individual files from npm packages. You can try using the following CDN link for react-three-drei:

<script src="https://unpkg.com/[email protected]/dist/index.js"></script>

Make sure to replace 7.10.0 with the specific version you want to use. This link should include all the necessary functionality, including the float and OrbitControls functions.

Skypack CDN: Skypack is another popular CDN that allows you to include npm packages easily. You can use the following CDN link for react-three-drei:

<script type="module"> import * as drei from 'https://cdn.skypack.dev/[email protected]'; window.drei = drei; </script>

Again, replace 7.10.0 with the desired version. This link should provide access to all the functions and components available in react-three-drei.

It's worth noting that the specific version numbers mentioned above might not be the latest ones at the time you're reading this. Make sure to check the react-three-drei documentation or the project's GitHub repository to find the latest version and confirm the correct CDN link to use.

If you continue to experience issues with importing specific functions like float or OrbitControls, please provide the error message you're encountering, and I'll be happy to assist you further in troubleshooting the problem.

[thherve]

Thanks for your reply, unfortunately it still doesn't work. Here's the error message I get when I try to use OrbitControls: 'Uncaught TypeError: Cannot read properties of null (reading 'useContext')'

When I try to use Float, I get the same message, but with 'useRef' instead of 'useContext'. And the same thing happens when I try to animate with react-spring but the error message is about useMemo in this case

This is how i import the different elements :

<script async src="https://ga.jspm.io/npm:[email protected]/dist/es-module-shims.js"></script>
    <script type="importmap">
    {
      "imports": {
        "three": "https://unpkg.com/[email protected]/build/three.module.js",
        "@react-three/fiber": "https://esm.sh/@react-three/fiber",
        "@react-three/drei": "https://cdn.jsdelivr.net/npm/@react-three/[email protected]/+esm",
        "react-dom": "https://esm.sh/react-dom",
        "react" : "https://esm.sh/react",
        "react-spring": "https://cdn.jsdelivr.net/npm/[email protected]/+esm"
        }
    }
    </script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
 
    <script type="text/babel" data-presets="react" data-type="module">
        import ReactDOM from 'react-dom'
        import React, { Suspense, useState, useEffect, useRef } from 'react'
        import { Canvas, useFrame, useLoader } from '@react-three/fiber'
        import { useGLTF, Float, OrbitControls, Html, useProgress } from '@react-three/drei'
        import { GLTFLoader } from 'https://unpkg.com/[email protected]/examples/jsm/loaders/GLTFLoader.js'
        import { useSpring, a } from "react-spring"

       ....

      </script>

[thherve]

The message when i try to use Float

TypeError: Cannot read properties of null (reading 'useRef')
at t.useRef (react.production.min.js:25:337)
at Environment.js:58:13
at Tr (react-reconciler.production.min.js:98:125)
at Lu (react-reconciler.production.min.js:222:422)
at ai (react-reconciler.production.min.js:222:422)
at ui (react-reconciler.production.min.js:222:422)
at ns (react-reconciler.production.min.js:222:422)
at At (react-reconciler.production.min.js:222:422)
at rl (react-reconciler.production.min.js:222:422)
at ei (react-reconciler.production.min.js:222:422)
at B (_entry.js:1:620)
at N (_entry.js:1:620)

[thherve]

Then with OrbitControls

TypeError: Cannot read properties of null (reading 'useContext')
at t.useContext (react.production.min.js:24:118)
at me (index-22ee0173.esm.js:1681:17)
at ve (index-22ee0173.esm.js:1535:24)
at ArcballControls.js:43:25
at Tr (react-reconciler.production.min.js:98:125)
at Lu (react-reconciler.production.min.js:222:422)
at ai (react-reconciler.production.min.js:222:422)
at ui (react-reconciler.production.min.js:222:422)
at ns (react-reconciler.production.min.js:222:422)
at At (react-reconciler.production.min.js:222:422)
at rl (react-reconciler.production.min.js:222:422)
at ei (react-reconciler.production.min.js:222:422)
at B (_entry.js:1:620)
at N (_entry.js:1:620)

[github-actions[bot]]

🕒 Discussion Activity Reminder 🕒

This Discussion has been labeled as dormant by an automated system for having no activity in the last 60 days. Please consider one the following actions:

1️⃣ Close as Out of Date: If the topic is no longer relevant, close the Discussion as out of date at the bottom of the page.

2️⃣ Provide More Information: Share additional details or context — or let the community know if you've found a solution on your own.

3️⃣ Mark a Reply as Answer: If your question has been answered by a reply, mark the most helpful reply as the solution.

Note: This dormant notification will only apply to Discussions with the Question label. To learn more, see our recent announcement.

Thank you for helping bring this Discussion to a resolution! 💬