Why is my GLTFLoader not working?

Questions
,
1

I am creating my r3f editor.
To show Assets, I made the ContentsBrowser.

image
image605×899 71.7 KB

But, a part of gltf model is not working with my GLTFLoader.
this code functions getting imagedata in canvas after gltf loaded.

ErrorMessage: “ReferenceError: _i13 is not defined”

Problem 3DModel: man.glb - Google Drive

However, The 3DModel is good working on gltfViewer: https://gltf-viewer.donmccurdy.com/

versions

  • “three”: “^0.149.0”
  • “three-stdlib”: “^2.21.8”,
  • “meshoptimizer”: “^0.18.1”

I put code in under.

import { DirectionalLight, LoadingManager, PerspectiveCamera, Scene, SpotLight, WebGLRenderer } from "three";
import { DRACOLoader, GLTFLoader, KTX2Loader } from "three-stdlib";
import Swal from "sweetalert2";
import { MeshoptDecoder } from "meshoptimizer";

const CreateGLTFImage = (gltfUrl): Promise<string> => {
  const canvas = document.createElement("canvas");
  canvas.width = 100;
  canvas.height = 100;

  // Making Scene
  const scene = new Scene();

  // Making Camera
  const camera = new PerspectiveCamera(
    45,
    1,
    0.1,
    1000
  );
  camera.position.set(0, 0, 2);

  // Making Renderer
  const cleanup = () => {
    if (renderer) {
      renderer.dispose();
    }
    if (scene) {
      scene.clear();
    }
    if (camera) {
      camera.clear();
    }
  };

  const renderer = new WebGLRenderer({ 
    canvas: canvas,
    alpha: true,
  });
  renderer.setClearColor(0x888888, 1);
  renderer.setSize(35, 35);

  // Making Light
  const directionalLight = new DirectionalLight(0xffffff, 0.5);
  directionalLight.position.set(10, 10, 10);
  const spotLight = new SpotLight(0xffffff);
  spotLight.position.set(-3, 3, -3);
  scene.add(spotLight);
  scene.add(directionalLight);

  // Create GLTF Loader
  const MANAGER = new LoadingManager();
  const THREE_PATH = `https://unpkg.com/three@0.150.x`;
  const DRACO_LOADER = new DRACOLoader(MANAGER).setDecoderPath( `${THREE_PATH}/examples/jsm/libs/draco/gltf/` );
  const KTX2_LOADER = new KTX2Loader(MANAGER).setTranscoderPath( `${THREE_PATH}/examples/jsm/libs/basis/`);
  const gltfLoader = new GLTFLoader( MANAGER )
        .setCrossOrigin('anonymous')
        .setDRACOLoader( DRACO_LOADER )
        .setKTX2Loader( KTX2_LOADER.detectSupport( renderer ) )
        .setMeshoptDecoder( MeshoptDecoder );

  // Load GLTF and Making Image
  return new Promise((resolve) => {
    gltfLoader.load(
      gltfUrl, 
      (gltf) => {
        const model = gltf.scene || gltf.scenes[0];
        scene.add(model);
        renderer.render(scene, camera);
        const dataUrl = canvas.toDataURL();
        cleanup();
        return resolve(dataUrl);
      },
      (progress) => {},
      (error) => {
        console.error(error);
        cleanup();
        Swal.fire({
          title: "Error",
          text: `Loading GLTF Error。\nFileName: ${gltfUrl}\n\n${error}`,
          icon: "error"
        });
        resolve(null);
      }
    );
  });
};

What is wrong?

PS: I trying const "THREE_PATH = https://unpkg.com/three@0.149.0; ", but not working…

3

I’m not sure what caused it, but after adjusting the configuration in next.config.js to match that of react-three-next, the application started working properly again. I am including the code for next.js below, but I don’t know exactly what caused this issue. It’s possible that the previous configuration in next.config.js was incorrect.

next.config.js

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})

const withPWA = require('next-pwa')({
  dest: 'public',
  disable: process.env.NODE_ENV === 'development',
})

const nextConfig = {
  // uncomment the following snippet if using styled components
  compiler: {
    styledComponents: true,
  },
  experimental: {
  },
  transpilePackages: [
    "three",
    "three-stdlib",
    "@react-three/fiber",
    "@react-three/drei"
  ],
  images: {},
  reactStrictMode: true, // Recommended for the `pages` directory, default in `app`.
  webpack(config, { isServer }) {
    // audio support
    config.module.rules.push({
      test: /\.(ogg|mp3|wav|mpe?g)$/i,
      exclude: config.exclude,
      use: [
        {
          loader: require.resolve('url-loader'),
          options: {
            limit: config.inlineImageLimit,
            fallback: require.resolve('file-loader'),
            publicPath: `${config.assetPrefix}/_next/static/images/`,
            outputPath: `${isServer ? '../' : ''}static/images/`,
            name: '[name]-[hash].[ext]',
            esModule: config.esModule || false,
          },
        },
      ],
    })

    // shader support
    config.module.rules.push({
      test: /\.(glsl|vs|fs|vert|frag)$/,
      exclude: /node_modules/,
      use: ['raw-loader', 'glslify-loader'],
    })

    return config
  },
}

const KEYS_TO_OMIT = ['webpackDevMiddleware', 'configOrigin', 'target', 'analyticsId', 'webpack5', 'amp', 'assetPrefix']

module.exports = (_phase, { defaultConfig }) => {
  const plugins = [
    [withPWA], 
    [withBundleAnalyzer, {}]
  ]

  const wConfig = plugins.reduce((acc, [plugin, config]) => plugin({ ...acc, ...config }), {
    ...defaultConfig,
    ...nextConfig,
  })

  const finalConfig = {}
  Object.keys(wConfig).forEach((key) => {
    if (!KEYS_TO_OMIT.includes(key)) {
      finalConfig[key] = wConfig[key]
    }
  })

  return finalConfig
}