Describe the feature you'd like:

Move imports in drei that are not related to #4 over to TS

• Simplex Noise
• HorizontalBlurShader
• VerticalBlurShader
• CurveModifier
• GammaCorrectionShader
• LineGeometry
• LineMaterial
• Line2
• EdgeSplitModifier
• SimplifyModifier
• TessellateModifier
• Sky
• RGBELoader

As a result of mrdoob/three.js#22560 the font loader was removed from Three's core and lives in the example dir. Would you folks be interested in adding it as part of the stdlib?

Related

• mrdoob/three.js#22536

• three version: 0.126.0
• three-stdlib version: 1.0.1

Problem description:

Line2 causes runtime error:

TypeError: _LineSegmentsGeometry_js__WEBPACK_IMPORTED_MODULE_1__.LineSegmentsGeometry.prototype.setPositions is undefined

This is because the constructor tries to instantiate a LineGeometry, which tries to call parent method setPositions here.

LineSegmentsGeometry does not end up having this property because we use arrow functions to define setPositions in LineGeometry here. Arrow functions in classes compile to properties on the instance of a class, instead of on the prototype itself.

Suggested solution:

Move all methods in LineSegmentsGeometry to use function syntax. This will solve this initial bug, but part of me thinks this issue will crop up again and there's a more sophisticated approach to avoiding it in the future.

• three version: 0.132.2
• three-stdlib version: 2.4.0

Problem description:

touchstart and touchend event listeners use preventDefault() in some camera controls, such as TrackballControls, this prevents any further mouse events from firing. When using TrackballControls and GizmoViewcube together from @react-three/drei, GizmoViewcube is not clickable because click events are prevented in TrackballControls. I wonder why preventDefault() is necessary in such listeners, or is there a solution for such situation.

Relevant code:

Use mobile or toggle mobile mode on Chrome DevTools.

https://codesandbox.io/s/lingering-http-d22qu

Suggested solution:

Remove preventDefault() in touchstart and touchend listeners within such camera controls. Using preventDefault() in touchmove listener should be enough for disabling scroll behavior on mobile.

What is your question:

This is a problem, I think @drcmda has done some initial investigation into it, it'd be helpful if you could share what you've found?

What is your question:

Currently to use drei in next.js I need to do:

const withTM = require("next-transpile-modules")([
  "three/examples/jsm/lines/LineGeometry",
  "@react-three/drei",
])

Would this library work with drei somehow and eliminate the needs for "next-transpile-modules"?

Thanks.

Hi,

I tried to load a GLTF and OBJ File into a Scene with the actual versions of three and RTF.
Unfortunately RTF break's with the newest version of ThreeJS (0.128.0)

Easy to reproduce with

• https://codesandbox.io/s/objloader-51zks?from-embed
• https://codesandbox.io/s/gltfjsx-vbnbf?from-embed

Errors:

• TypeError: Class constructor CompressedTextureLoader cannot be invoked without 'new'
• TypeError: Class constructor Loader cannot be invoked without 'new'

Just change Three version to 0.128.0 and the error will appear in console.

Kind regards

• three version: 0.134.0
• three-stdlib version: 2.5.9

Problem description:

The USDZExporter is not working correctly when exporting materials.
The exported model.usda file is not valid, because a curly bracket is in the wrong line.

Relevant code:

That's how I call the exporter:

const exporter = new USDZExporter();
const arraybuffer = await exporter.parse(scene);
const blob = new Blob([arraybuffer], {
  type: "application/octet-stream",
});

Suggested solution:

Line 386 and 387 need to be switched.

This is the current implementation in three.js:

https://github.com/mrdoob/three.js/blob/9c57b2e117e7e615cf8c9645fad90e4ad8ce6757/examples/js/exporters/USDZExporter.js#L460-L484

Describe the feature you'd like:

Consider adding @babel/runtime as a peer dependency. After installing the lib for the first time, and calling new OrbitControls, I received an error flagging that this dependency was required.

🚨 The automated release from the alpha branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the alpha branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

Good luck with your project ✨

Your semantic-release bot 📦🚀

• three version: n/a
• three-stdlib version: 1.0.0

Problem description:

We currently import the package @webgpu/glslang, which by default imports the node version of it's library which then requires fs. If you change it to a the web version it then has issues with a token, which makes me think there's an issue with their build process for js.

Relevant code:

See a recent fail in vercel deployment.

Suggested solution:

Not sure, can we compile that node_module on our build process so it works correctly...?

• three version: 126
• three-stdlib version: current

Problem description:

Line Material is badly broken

Relevant code:

Check the storybook on alpha

Suggested solution:

Suggested implementation:

• low/IFFParser
• lwo/LWO2Parser
• lwo/LWO3Parser
• 3DMLoader
• 3MFLoader
• AMFLoader
• AssimpLoader
• BasisTextureLoader
• BVHLoader
• ColladaLoader
• DDSLoader
• DRACOLoader
• EXRLoader
• FBXLoader
• GCodeLoader
• GLTFLoader
• HRDCubeTextureLoader
• KMZLoader
• LDrawLoader
• LottieLoader
• LUT3dlLoader
• LUTCubeLoader
• LWOLoader
• MD2Loader
• MDDLoader
• MMDLoader
• MTLLoader
• NodeMaterialLoader
• NRRDLoader
• OBJLoader
• PCDLoader
• PDBLoader
• PLYLoader
• PRWMLoader
• PVRLoader
• RGBELoader
• RGBMLoader
• STLLoader
• SVGLoader
• RDSLoader
• TGALoader
• TiltLoader
• TTFLoader
• VOXLoader
• VRMLoader
• VTKLoader
• XLoader
• XYZLoader

• three version:
• three-stdlib version:

Problem description:

Relevant code:

let your = (code, tell) => `the ${story}`

Suggested solution:

I see a setAzimuthalAngle and a setPolarAngle implementation in OrbitControls but I can't understand how to use it. I passed degrees and radians but nothing happens.

My goal is to rotate the orbit controls some radians after the component mounted.

Describe the feature you'd like:

I would like to be able to manage all files in three.js/examples/jsm/libs with three-stdlib.

For now, only meshopt_decoder.module.js is copied from three.js/examples/jsm/libs to three-stdlib as MeshoptDecorder.js ( https://github.com/pmndrs/three-stdlib/blob/main/src/libs/MeshoptDecoder.js ), but other files should be moved to three-stdlib as well. By moving other files to three-stdlib and rewriting them into TypeScript if possible, I think three-stdlib can better support people using three.js/examples.

Suggested implementation:

Follow the steps below

• copy from three.js/examples/jsm/libs to three-stdlib/src/libs
• move three-stdlib/src/libs/*.module.js into three-stdlib/src/libs/*.js
• (if possible) move three-stdlib/src/libs/*.js into three-stdlib/src/libs/*.ts

• three version: 0.129.0
• three-stdlib version: 2.1.0

Problem description:

When I try to get a production build with shadow-cljs (It uses Google Closure library), I get the following error:

Closure compilation failed with 2 errors
--- node_modules/three-stdlib/index.cjs.js:2
Illegal variable reference before declaration: i
--- node_modules/three-stdlib/index.cjs.js:2
Illegal variable reference before declaration: t

If I don't require @react-three/drei library in the namespace/class/my project everything seems fine, I assume some code in the library is broken/invalid, but Webpack is able to ignore it and process it.

Here is the discussion with the author of shadow-cljs:

• Camera Controls
• DeviceOrientationControls
• DragControls
• FirstPersonControls
• FlyControls
• OrbitControls
• PointerLockControls
• TrackballControls
• TransformControls

• three version: 0.132.2
• three-stdlib version: 2.4.0

Problem description:

mouseDown event is no more triggered in TransformControls, probably since f59f1e2

Relevant code:

Suggested solution:

this.mouseDownEvent.type = this._mode 

should be

this.mouseDownEvent.mode = this._mode 

Otherwise the dispatchEvent will trigger a 'translate'|'scale'|'rotate' event instead of mouseDown event

As shown on the three.js current master branch:
https://github.com/mrdoob/three.js/blob/e62b253081438c030d6af1ee3c3346a89124f277/examples/jsm/controls/TransformControls.js#L278-L282

• three version: 0.126.1
• @react-three/fiber version: 6.0.0
• node version: 12.18.3
• npm (or yarn) version: 1.22.5
• browser version: chrome@latest/edge@latest

Problem description:

When visiting https://drei.pmnd.rs/?path=/story/controls-mapcontrols--map-controls-scene-st everything works as expected.

When I tried running drei's storybook locally, I get this:

CC: pmndrs/drei#351

• three version: 0.127.0
• three-stdlib version: ^1.1.4

Problem description:

TransformControls events do not fire and control does not respond to changes in the mode property. Originally reported in pmndrs/drei#355

• Storybook implementation appears that it is intended to disable OrbitControls when the TransformControls is dragged, but this is not working (tested in Safari 14 + Chrome 89). As the transform is dragged, both it and the camera move
• Changing the knobs for TransformControlsLockSt does not make any change in the appearance or function of the TransformControl, e.g. changing from translation to rotation leaves TransformControl in 'translate' mode.

Relevant code:

Try the stories here:

https://drei.pmnd.rs/?path=/story/controls-transformcontrols--transform-controls-lock-st

This drop in JS replacement that references three/examples/jsm/controls/TransformControls instead of three-stdlib appears to work as expected.

import * as React from 'react'
import { useThree } from '@react-three/fiber'
import { TransformControls as TransformControlsImpl } from 'three/examples/jsm/controls/TransformControls'
import pick from 'lodash.pick'
import omit from 'lodash.omit'

export const PatchedTransformControls = React.forwardRef(({ children, ...props }, ref) => {
  const transformOnlyPropNames = [
    'enabled',
    'axis',
    'mode',
    'translationSnap',
    'rotationSnap',
    'scaleSnap',
    'space',
    'size',
    'dragging',
    'showX',
    'showY',
    'showZ',
  ]

  const { camera, ...rest } = props
  const transformProps = pick(rest, transformOnlyPropNames)
  const objectProps = omit(rest, transformOnlyPropNames)

  const gl = useThree(({ gl }) => gl)
  const defaultCamera = useThree(({ camera }) => camera)
  const invalidate = useThree(({ invalidate }) => invalidate)

  const explCamera = camera || defaultCamera

  const [controls] = React.useState(() => new TransformControlsImpl(explCamera, gl.domElement))

  const group = React.useRef()
  React.useLayoutEffect(() => void controls?.attach(group.current), [children, controls])

  React.useEffect(() => {
    controls?.addEventListener?.('change', invalidate)
    return () => controls?.removeEventListener?.('change', invalidate)
  }, [controls, invalidate])

  return controls ? (
    <>
      <primitive ref={ref} dispose={undefined} object={controls} {...transformProps} />
      <group ref={group} {...objectProps}>
        {children}
      </group>
    </>
  ) : null
})

Suggested solution:

No idea of the root cause as yet, but will update if I discover more.

• three version: 0.134.0
• three-stdlib version: 2.5.10

Problem description:

GLTFExporter from three-stdlib results in empty export.

Relevant code:

https://codesandbox.io/s/exporter-9zlzn?file=/src/index.js:575-703

When loading the Storybook

the page doesn't load.

Console says:

619.4a46c130.iframe.bundle.js:2 Uncaught TypeError: esm.ConfigApi is not a constructor
    at start (619.4a46c130.iframe.bundle.js:2:200791)
    at Object../node_modules/@storybook/html/dist/esm/client/preview/index.js (619.4a46c130.iframe.bundle.js:2:148182)
    at __webpack_require__ (runtime~main.536d0841.iframe.bundle.js:1:357)
    at Module../node_modules/@storybook/html/dist/esm/client/index.js (619.4a46c130.iframe.bundle.js:2:144149)
    at __webpack_require__ (runtime~main.536d0841.iframe.bundle.js:1:357)
    at Object../storybook-init-framework-entry.js (main.a87180a5.iframe.bundle.js:1:171140)
    at __webpack_require__ (runtime~main.536d0841.iframe.bundle.js:1:357)
    at __webpack_exec__ (main.a87180a5.iframe.bundle.js:1:171304)
    at main.a87180a5.iframe.bundle.js:1:171566
    at Function.__webpack_require__.O (runtime~main.536d0841.iframe.bundle.js:1:963)
    ```

jsm/contorls/Trackball controls has this line a /= instead of *=

ThreeJS has updated the XRHand Mesh to use the official model from immersive-web/webxr-input-profiles rather than the inbuilt Oculus one, in addition there have been some changes in the way hand tracking works which may be out of date.

https://github.com/mrdoob/three.js/blob/dev/examples/jsm/webxr/XRHandMeshModel.js

• three version: r129
• three-stdlib version: 2.0.5

Problem description:

VertexTangentsHelper plugged into drei's useHelper causes an error, while the corresponding helpers in three/examples work as expected

Relevant code:

https://codesandbox.io/s/oiix2

Commenting out the three/examples import and uncommenting the three-stdlib one produces the error:

ReferenceError
Must call super constructor in derived class before accessing 'this' or returning from derived constructor

Suggested solution:

null

It's possible that this is actually an issue with useHelper but I expect that three-stdlib should work the same three/examples.

• three version: [email protected]
• three-stdlib version: [email protected]

Problem description:

Please see pmndrs/drei#638

• three version: 0.134.0
• three-stdlib version: 2.8.2

In Lensflare.js, there are import of FramebufferTexture

but in type check of three, no FramebufferTexture at all

• three version: r127
• three-stdlib version: v1.2.4

Problem description:

There is an inconsistency regarding the OrbitControls method saveState and how it behaves. In Three, the camera.zoom is saved while saving the state of the controls, regardless if the camera is a perspective one or orthographic:
https://github.com/mrdoob/three.js/blob/3d59a07b32394c1a0d57c8558775d0ba3a54d7da/examples/jsm/controls/OrbitControls.js#L123-L129

In this library this is not the case any longer (it used to be but was changed in 938045a). Now it is only saved for perspective cameras.

Due to the camera zoom of orthographic cameras no longer being saved, resetting the OrbitControls with the reset method will not properly reset the camera to previous state.

Relevant code:

Suggested solution:

If this was not done intentionally due to some weird behavior I would suggest to just revert that specific line, making it possible to properly save the state of orthographic cameras.

If it was done intentionally, it would be nice with a comment explaining why 👍

I want to listen events on Canvas，so I try to bind events on wrapper element.
However the wrapper event will trigger only when I set OrbitControls disabled, I guess is a bug and need help, thx

demo as follow
https://codesandbox.io/s/suspicious-sun-q895j?file=/src/App.js

• three version: 0.136.0
• three-stdlib version: 2.6.4

Problem description:

The current GLTFReference type is out of date since version 2.6.4 where loaders were updated.

Relevant code:

const reference = parser.associations.get(object.material) 

if (reference?.materials) {
  // TS error: Property 'materials' does not exist on type 'GLTFReference'
  object.material = copiedMaterials[reference.materials]
  object.material.needsUpdate = true
}

Suggested solution:

I have fixed this temporarily like this:

interface GlTFMaterialReference {
  materials: number
}

const reference = parser.associations.get(object.material) as
        | GlTFMaterialReference
        | undefined

I think to handle this type properly in the library it will need something like generics because the type will change depending on what is passed to parser.associations.get

Extra notes

The type currently looks like this, which is now out of date:

// GLTFLoader.d.ts
export interface GLTFReference {
    type: 'materials' | 'nodes' | 'textures';
    index: number;
}

Describe the feature you'd like:

We don't get type safety when using this library because there aren't many TS files in the repo (yet). So after a discussion in Discord, a good solution, while we move over, is to extract the .d.ts files from three-ts-types and include them in the project during the build process.

Why don't you just include the files and commit?

Double the workload, we don't want to have to maintain them in tangent.

What happens if they're different?

We'll have to convert those files to TS and I expect the people who have the problem to do so, community spirit and that ⭐

What do we want to achieve & have done for the v1 release?

For me, it's the TS1 implementation & a better readme 😉

• three version: 0.136.0
• @react-three/drei version: 8.3.1
• three-stdlib version: 2.6.4
• Firefox version: 95.0.2

Problem description:

ArcballControls has a functionality to copy/paste state using Ctrl-C/V.

I have another component that listens to document.addEventListener('paste' but while using Ctrl-V. I get this error.

Uncaught TypeError: navigator.clipboard.readText is not a function
    pasteState https://threejs.org/examples/jsm/controls/ArcballControls.js:2568
    onKeyDown https://threejs.org/examples/misc_controls_arcball.html:255
ArcballControls.js:2568:23

• three version: 0.128.0
• @react-three/fiber version: 6.0.19
• @react-three/drei version: 4.3.3
• node version: v12.21.0
• npm (or yarn) version: 7.11.2

Problem description:

Currently, TransformControls start with a color-coded set of axes that can be clicked and dragged. However, after the first mouse interaction (either hover or click/drag), the color disappears on the interacted axis, and the other axes disappear.

Relevant code:

This behavior is currently visible in the storybook for TransformControls.

Suggested solution:

This may actually be an issue with three-stdlib.

Suggested implementation:

• ColladaExporter
• DRACOExporter
• GLTFExporter
• MMDExporter
• OBJExporter
• PLYExporter
• STLExporter
• USDZExporter

• three version: 0.128.0
• @react-three/fiber version: 6.0.19
• @react-three/drei version: 4.3.3
• node version: 15.10.0
• npm version: 7.5.3

Problem description:

Colors of TransformControls' axes become white after mouse hover.
Their original color (red, green, and blue) are gone, which differs from the example shows in the official Three.js documentation.

Before mouse hover:

After mouse hover:

Relevant code:

Not sure what causes this bug, but you can find it here

probably one of the most requested features for controls, for instance orbit:

orbit.pan(x, y)
orbit.zoom(level)
orbit.rotate(delta, phi)

currently controls are sealed and can only be controlled by pointer input, which also creates a problem bc once you have controls, nothing else is allowed to move the camera bc it would cancel movement out.

i think it has to do with a few things not being classes yet like unrealbloom

https://codesandbox.io/s/7mfqw

if you make the jsm import into three-stdlib it crashes.

• three version: ^0.132.2
• three-stdlib version: ^2.4.1

Problem description:

When I set up a new project and run it. The compiler gives this error:

./node_modules/three-stdlib/exporters/ColladaExporter.js 127:20
Module parse failed: Unexpected token (127:20)
File was processed with these loaders:

• ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
  You may need an additional loader to handle the result of these loaders.
  |
  | return res;
  > }).join('\n')) ?? '';
  | } // Convert an image into a png format for saving
  |

Suggested solution:

i tried to install esm later but it dosen't work.

• three-stdlib version: 1.0.2

Problem description:

LineMaterial currently only supports being used with a number, instead of a THREE.Color type, as specified in three-ts-types.

Suggested solution:

I think this is as simple of a fix as adding Color as a return type on https://github.com/three-types/three-ts-types/blob/master/types/three/examples/jsm/lines/LineMaterial.d.ts#L16 and removing line https://github.com/three-types/three-ts-types/blob/master/types/three/examples/jsm/lines/LineMaterial.d.ts#L16.

I'd test it but I can't seem to get storybook working locally.

Suggested implementation:

• AdaptiveToneMappingPass
• AfterImagePass
• BloomPass
• BokehPass
• ClearPass
• CubeTexturePass
• DotScreenPass
• EffectComposer
• FilmPass
• GlitchPass
• HalftonePass
• LUTPass
• MaskPass
• OutlinePass
• Pass
• SAOPass
• SavePass
• ShaderPass
• SMAAPass
• SSAARenderPass
• SSAOPass
• SSRPass
• TAARenderPass
• TexturePass
• UnrealBloomPass

I'm noticing that these modules pull from @types/three, currently maintained parallel with three.

My concern is managing discrepancies between this repository and three's and keeping the shared types in sync.

To circumvent this, I see two options, although exhaustive:

• track and mirror changes in three, likely via bot magic (or vice versa)
• add self-contained types/doc to the repository

What are your thoughts on this? Is there something internal going on that makes this a non-issue?

🚨 The automated release from the main branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the main branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

If you are using Two Factor Authentication for your account, set its level to "Authorization only" in your account settings. semantic-release cannot publish with the default "
Authorization and writes" level.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.

Good luck with your project ✨

Your semantic-release bot 📦🚀

• three version: ^0.128.0
• three-stdlib version: ^2.4.0

Problem description:

Importing the package in a Codepen project outputs the error below and breaks the project. Tried from different CDN urls however got the same result. I suspect this is an issue with the package however wanted to note here since a project depending on this package can't be run on the platform.

Uncaught TypeError: Cannot destructure property 'CharsetEncoder' of '__commonjs_module0' as it is null.
    at three-stdlib.js:5

Relevant code:

import * as threeStdlib from "https://cdn.skypack.dev/[email protected]";

const { useState } = React;

const App = () => (
  <h2>Hello World!</h2>
);

ReactDOM.render(<App />, document.getElementById('app'));

Describe the feature you'd like:

It would be nice to make the three-stdlib server-side compatible.

• Wrap all usage of the "document" variable with a condition.