Integration with the three.js library

[zabpetrus]

Description

I just wanted to know the best way to integrate Vite with the Three.js library (not the npm version, but the mrdoob version (https://github.com/mrdoob/three.js/). Some modules are not resolved Any help with configuration? Thanks

Suggested solution

I hope the project builds without errors

Alternative

Error: The following dependencies are imported but could not be resolved:

three-mesh-bvh (imported by J:/gitfolder/drawinginterfaces/reactjs/version_5.0.0/src/three/examples/webgl_raycaster_bvh.html?id=0)
three/addons/renderers/webgl/nodes/WebGLNodes.js (imported by J:/gitfolder/drawinginterfaces/reactjs/version_5.0.0/src/three/examples/webgl_nodes_materials_standard.html?id=0)
three-subdivide (imported by J:/gitfolder/drawinginterfaces/reactjs/version_5.0.0/src/three/examples/webgl_modifier_subdivision.html?id=0)
web-ifc-three (imported by J:/gitfolder/drawinginterfaces/reactjs/version_5.0.0/src/three/examples/webgl_loader_ifc.html?id=0)
web-ifc (imported by J:/gitfolder/drawinginterfaces/reactjs/version_5.0.0/src/three/examples/webgl_loader_ifc.html?id=0)
three-bvh-csg (imported by J:/gitfolder/drawinginterfaces/reactjs/version_5.0.0/src/three/examples/webgl_geometry_csg.html?id=0) three-gpu-pathtracer (imported by J:/gitfolder/drawinginterfaces/reactjs/version_5.0.0/src/three/examples/webgl_renderer_pathtracer.html?id=0)
flow (imported by J:/gitfolder/drawinginterfaces/reactjs/version_5.0.0/src/three/playground/elements/CodeEditorElement.js)
three/addons/loaders/IFCLoader.js (imported by J:/gitfolder/drawinginterfaces/reactjs/version_5.0.0/src/three/editor/js/Loader.js)

Are they installed?
at file:///J:/gitfolder/drawinginterfaces/reactjs/version_5.0.0/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:65148:23
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async file:///J:/gitfolder/drawinginterfaces/reactjs/version_5.0.0/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:64548:38

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[jonasermert]

npm install --save https://github.com/mrdoob/three.js.git

In your Vite configuration file (vite.config.js), make sure to configure the optimizeDeps option to exclude certain problematic dependencies. Add the following to your vite.config.js:

export default {
  optimizeDeps: {
    exclude: [
      'three-mesh-bvh',
      'three/addons/renderers/webgl/nodes/WebGLNodes.js',
      'three-subdivide',
      'web-ifc-three',
      'web-ifc',
      'three-bvh-csg',
      'three-gpu-pathtracer',
      'flow',
      'three/addons/loaders/IFCLoader.js',
    ],
  },
};

This will prevent Vite from trying to optimize these dependencies and potentially causing import issues. Ensure that your imports in your code are correct. Since you're using a custom version of Three.js, make sure your import statements align with the mrdoob version. After making these changes, run Vite again.