search

pmndrs / drei

🥉 useful helpers for react-three-fiber
https://drei.pmnd.rs/
MIT License
7.85k stars 641 forks source link

Framer importing react-three-fiber / react-three/drei Error from Three.JS version update. #1062

Open Dasty-Captain opened 1 year ago

Dasty-Captain commented 1 year ago

image As it shows, there's an error exporting NoColors. In three.js, 0.144.0/build/three.module.js, it seems like NoColors module was deleted from latest update (15 days ago.) How this would be solved?

Following is used code. 

import React, { useRef } from "react"
import { useGLTF } from "@react-three/drei"

export function Model(props) {
    const GLTF = useGLTF("https://models-eight.vercel.app/cafe_remake.gltf")
    const { nodes, materials } = useGLTF(
        "https://models-eight.vercel.app/cafe_remake.gltf"
    )
    return (
        <group {...props} dispose={null}>
            <mesh
                castShadow
                receiveShadow
                geometry={nodes.Plane.geometry}
                material={materials["Material.001"]}
                position={[0, 22.13, 0]}
                rotation={[-Math.PI, 0, 0]}
                scale={13.7}
            />
            <group position={[6.97, 4.5, -3.87]} scale={1.4}>
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cube018.geometry}
                    material={materials.table_black}
                />
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cube018_1.geometry}
                    material={materials.table_top}
                />
            </group>
            <group position={[-1.25, 4.5, -3.87]} scale={1.4}>
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cube019.geometry}
                    material={materials.table_black}
                />
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cube019_1.geometry}
                    material={materials.table_top}
                />
            </group>
            <mesh
                castShadow
                receiveShadow
                geometry={nodes.C_shelf.geometry}
                material={materials.table_top}
                position={[-8.98, 0.3, 9.45]}
                rotation={[0, Math.PI / 2, 0]}
                scale={1.31}
            />
            <mesh
                castShadow
                receiveShadow
                geometry={nodes.C_desk_long.geometry}
                material={materials.table_top}
                position={[-9.5, 2.51, -2]}
                scale={1.38}
            />
            <group position={[-5.54, 12.36, 9.78]} scale={[0.37, 0.46, 0.37]}>
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cube044.geometry}
                    material={materials.bottle_body}
                />
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cube044_1.geometry}
                    material={materials.bottle_cap}
                />
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cube044_2.geometry}
                    material={materials.bottle_label}
                />
            </group>
            <group
                position={[4.9, 5.03, 3.96]}
                rotation={[0, 0.05, 0]}
                scale={[3.05, 1.57, 1.57]}
            >
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cube033.geometry}
                    material={materials.metal_gray}
                />
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cube033_1.geometry}
                    material={materials.MC_body}
                />
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cube033_2.geometry}
                    material={materials.MC_black}
                />
            </group>
            <mesh
                castShadow
                receiveShadow
                geometry={nodes.C_beanbag_small.geometry}
                material={materials.papercup_cover}
                position={[-7.82, 7.42, 9.7]}
                rotation={[0, -0.37, 0]}
                scale={[0.58, 0.58, 0.43]}
            />
            <mesh
                castShadow
                receiveShadow
                geometry={nodes.C_beanbag_mid.geometry}
                material={materials.papercup_cover}
                position={[-7.74, 4.48, 9.79]}
                rotation={[0, -0.35, 0]}
                scale={[0.79, 0.79, 0.59]}
            />
            <group position={[-7.81, 1, 2.87]} scale={[0.41, 0.5, 0.41]}>
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cube006.geometry}
                    material={materials.chair_leg}
                />
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cube006_1.geometry}
                    material={materials.chair_top}
                />
            </group>
            <group position={[6.91, 2.05, 4.44]} scale={[7.58, 10.24, 12.78]}>
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cube056.geometry}
                    material={materials.main_desk_black}
                />
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cube056_1.geometry}
                    material={materials.maindesk_wood}
                />
            </group>
            <group position={[-11.01, 9.48, -0.98]} scale={[1.01, 0.97, 1.01]}>
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cube024.geometry}
                    material={materials.screen_glass}
                />
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cube024_1.geometry}
                    material={materials.screen_black}
                />
            </group>
            <group position={[0.67, 6.13, 3.15]} scale={0.47}>
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cylinder010.geometry}
                    material={materials.grinder_glass}
                />
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cylinder010_1.geometry}
                    material={materials.grinder_cap}
                />
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cylinder010_2.geometry}
                    material={materials.grinder_body}
                />
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cylinder010_3.geometry}
                    material={materials.botten_gray}
                />
            </group>
            <mesh
                castShadow
                receiveShadow
                geometry={nodes.C_wall_shelf.geometry}
                material={materials.table_top}
                position={[-5, 11.5, 10]}
                scale={0.67}
            />
            <mesh
                castShadow
                receiveShadow
                geometry={nodes.C_teacup.geometry}
                material={materials.cup_white}
                position={[7.12, 4.21, -5.11]}
                scale={[0.32, 0.21, 0.32]}
            />
            <mesh
                castShadow
                receiveShadow
                geometry={nodes.C_teacup_saucer.geometry}
                material={nodes.C_teacup_saucer.material}
                position={[7.02, 4.03, -5.11]}
                scale={[0.39, 0.65, 0.39]}
            />
            <group
                position={[7.95, 4.4, -2.29]}
                rotation={[0, -Math.PI / 2, 0]}
                scale={-0.47}
            >
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cylinder003.geometry}
                    material={materials.papercup_cover}
                />
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cylinder003_1.geometry}
                    material={materials.papaercup}
                />
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cylinder003_2.geometry}
                    material={materials.papercup_top}
                />
            </group>
            <group position={[-2.84, 12.36, 9.78]} scale={[0.37, 0.46, 0.37]}>
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cube002_1.geometry}
                    material={materials.bottle_body}
                />
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cube002_2.geometry}
                    material={materials.bottle_cap}
                />
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cube002_3.geometry}
                    material={materials.bottle_label}
                />
            </group>
            <group position={[-4.12, 12.36, 9.78]} scale={[0.37, 0.46, 0.37]}>
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cube003.geometry}
                    material={materials.bottle_body}
                />
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cube003_1.geometry}
                    material={materials.bottle_cap}
                />
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cube003_2.geometry}
                    material={materials.bottle_label}
                />
            </group>
            <group position={[-6.92, 12.39, 9.68]} scale={[0.37, 0.46, 0.37]}>
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cube004.geometry}
                    material={materials.bottle_body}
                />
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cube004_1.geometry}
                    material={materials.bottle_cap}
                />
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cube004_2.geometry}
                    material={materials.bottle_label}
                />
            </group>
            <mesh
                castShadow
                receiveShadow
                geometry={nodes.C_beanbag_small001.geometry}
                material={materials.papercup_cover}
                position={[-8.76, 7.42, 9.51]}
                rotation={[0, -0.37, 0]}
                scale={[0.58, 0.58, 0.43]}
            />
            <mesh
                castShadow
                receiveShadow
                geometry={nodes.C_beanbag_mid001.geometry}
                material={materials.papercup_cover}
                position={[-8.93, 4.48, 9.4]}
                rotation={[0, -0.35, 0]}
                scale={[0.79, 0.79, 0.59]}
            />
            <mesh
                castShadow
                receiveShadow
                geometry={nodes.C_beanbag_mid002.geometry}
                material={materials.papercup_cover}
                position={[-7.74, 1.19, 9.78]}
                rotation={[0, -0.34, 0]}
                scale={[0.79, 0.79, 0.59]}
            />
            <mesh
                castShadow
                receiveShadow
                geometry={nodes.C_beanbag_mid003.geometry}
                material={materials.papercup_cover}
                position={[-8.93, 1.19, 9.4]}
                rotation={[0, -0.34, 0]}
                scale={[0.79, 0.79, 0.59]}
            />
            <group position={[-7.81, 1, -1.61]} scale={[0.41, 0.5, 0.41]}>
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cube010.geometry}
                    material={materials.chair_leg}
                />
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cube010_1.geometry}
                    material={materials.chair_top}
                />
            </group>
            <group position={[-7.81, 1, -6.09]} scale={[0.41, 0.5, 0.41]}>
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cube011.geometry}
                    material={materials.chair_leg}
                />
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cube011_1.geometry}
                    material={materials.chair_top}
                />
            </group>
            <group position={[10.01, 1, -4.01]} scale={[0.41, 0.5, 0.41]}>
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cube012.geometry}
                    material={materials.chair_leg}
                />
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cube012_1.geometry}
                    material={materials.chair_top}
                />
            </group>
            <group position={[7.05, 1, -6.92]} scale={[0.41, 0.5, 0.41]}>
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cube013.geometry}
                    material={materials.chair_leg}
                />
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cube013_1.geometry}
                    material={materials.chair_top}
                />
            </group>
            <mesh
                castShadow
                receiveShadow
                geometry={nodes.C_wall_shelf001.geometry}
                material={materials.table_top}
                position={[-1.73, 9.75, 10]}
                scale={0.67}
            />
            <group position={[-1.24, 1, -6.92]} scale={[0.41, 0.5, 0.41]}>
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cube020.geometry}
                    material={materials.chair_leg}
                />
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cube020_1.geometry}
                    material={materials.chair_top}
                />
            </group>
            <group position={[-1.24, 1, -0.92]} scale={[0.41, 0.5, 0.41]}>
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cube021.geometry}
                    material={materials.chair_leg}
                />
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cube021_1.geometry}
                    material={materials.chair_top}
                />
            </group>
            <group position={[6, 11, 10.65]}>
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cube036.geometry}
                    material={materials["Material.005"]}
                />
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cube036_1.geometry}
                    material={materials.table_top}
                />
            </group>
            <group position={[0, 11, 0]} scale={11}>
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cube049.geometry}
                    material={materials.wall}
                />
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cube049_1.geometry}
                    material={materials["Material.023"]}
                />
            </group>
            <group position={[9.37, 5.53, 2.57]} scale={[0.86, 1.23, 0.1]}>
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cube031.geometry}
                    material={materials.menu_texture}
                />
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cube031_1.geometry}
                    material={materials.main_desk_black}
                />
                <mesh
                    castShadow
                    receiveShadow
                    geometry={nodes.Cube031_2.geometry}
                    material={materials.menu_back}
                />
            </group>
        </group>
    )
    useGLTF.preload(GLTF)
}
davo commented 1 year ago

I'm experiencing the same issue with the module three.model.js @ 0.148.0 from jspm.

Here's the module three@0.148.0.

Here's the GLTF Model I'm using, working perfectly fine.

While on Framer, this is what I see.

Screenshot 2023-01-05 at 11 34 46 AM

I'm not really sure how to troubleshoot this.

Thanks in advance for any kind of pointers.

davo commented 1 year ago

@Dasty-Captain I solved the issue simply by reaching out to Framer for support.

What happened? Framer creates a dependency map when you import a module. Once modules are loaded and freezes the dependency map, so it's doesn't re-request the module.

Internally @ Framer they are aware of this, and eventually they'll build some form of request a manual update.

In the meantime, they can quickly do it for you, just reach out to them on Discord.

For the maintainers, you can close this issue, since it's unrelated with DREI.