Trying to fix the type of <line /> for conversion to typescript

Questions
1

image
image763×240 68.1 KB

Hi,
I am trying again to convert a three.js code to typescript and it is as horrible as I remember. By example:
vscode takes <line /> object (inside <mesh />) as a svg element. How can I change that ?

Thanks.

2

this, sadly, is because of typescript thinking that jsx is html, which is a bug or at least untrue. there are two overlap conflicts therefore, line and audio. there have been issues posted on github about this but the TS maintainers, for some reason, are against fixing it.

so you have to. you can add a pre or postfix, see:

import { extend, Object3DNode } from '@react-three/fiber'

extend({ Line_: THREE.Line })

declare module '@react-three/fiber' {
  interface ThreeElements {
    line_: Object3DNode<THREE.Line, typeof THREE.Line>
  }
}

<line_ />

or, {/* @ts-ignore */}

3

thanks a lot!

4

btw, just saw this:

color={[127, 0, 127]}

in threejs RGB is between 0 and 1. unless that’s meant to push the color over a postpro/bloom threshold.

5

So, how must I declare ref ?
const ref2 = useRef<THREE.Line>(null!) ?
const ref2 = useRef<THREE.Line_>(null!) ?
const ref2 = useRef<THREE.line_>(null!) ?