How to load material to a section of troika-3d-text as a whole part?

[Siricee]

Hi everyone. I am a beginner in threejs and have a trouble in Troika.

I am currently working on the offical example, Troika 3D Text - Demos - With a video texture

As we can see in the offical example, the video texture is a whole material attached to 4 characters.

but the code has nothing specially in merging geometry or uv at all like this:

// offical example with React
function VideoText(props) {
  const [video] = useState(() => Object.assign(document.createElement('video'), { src: '/drei.mp4', crossOrigin: 'Anonymous', loop: true, muted: true }))
  useEffect(() => void video.play(), [video])
  return (
    <Text font="/Inter-Bold.woff" fontSize={3} letterSpacing={-0.06} {...props}>
      drei
      <meshBasicMaterial toneMapped={false}>
        <videoTexture attach="map" args={[video]} encoding={THREE.sRGBEncoding} />
      </meshBasicMaterial>
    </Text>
  )
}

While in my code, the video texture was attached to each character for 4 times. I want to know why and what difference between my code to the offical example's?

here is mine:

// my demo is just with threejs.
import { Text  } from 'troika-three-text'
let myText = new Text()
myText.text = 'drei'
myText.fontSize = 3
myText.letterSpacing = -0.06
myText.color = 0x9966FF
myText.font = './Reflections&VideoTextures/Inter-Bold.woff'
myText.position.set(0, 0, -2)
myText.anchorX = 'center'
myText.anchorY = 'top-baseline'

const video = document.getElementById('video');
video.play();
video.addEventListener('play', function () {
   this.currentTime = 3;
});

const texture = new THREE.VideoTexture(video);
const videoMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff, map: texture, toneMapped:false })

myText.material = videoMaterial
scene.add(myText)

So my question is Did I miss something? or lost merging uv?
How to modify the code to achieve the official effect? Hope this makes sense.

[lojjic]

What three.js version are you using? It sounds like they made some changes to how UVs work in shaders in the latest release which could have affected the transform. If you're using the latest, could you try an older version to see if that changes the behavior?

[Siricee]

Yeah, just as you said.

My code run on threejs lastest version R152 has the unusual behavior repeating video materials. I tried older version R135 , it works correct that same as the offical example.

The same code runs on R135:

So we can probably conclude with certainty that the unusual effect is due to the new version of THREE release change UVs in text geometry.

and I have the question that how to modify the uv of text to make them a whole part ? Thank you very much for your reply.

[lojjic]

I can't think of an easy answer as to how you could do it yourself, this feels like it needs to be a low-level fix. I will try to find time this next week for making that fix. If I find an easy workaround in the process (other than using the previous version of threejs), I will let you know.

[Siricee]

Okay. Thank you for your answer.

[lojjic]

I've published troika-three-text 0.47.2 which should fix the bug with the Three.js r152.

[Siricee]

👍Pretty Good! It works! Thanks a lot.