While attempting to deploy my website, I encountered a bug where the three.js canvas failed to load (even though it worked fine in development). The issue arises when trying to animate text loaded using fontLoader.load(). For instance, adding text to the scene as shown below:
fontLoader.load(
'node_modules/three/examples/fonts/droid/droid_serif_regular.typeface.json',
(droidFont) => {
const textGeometry = new TextGeometry('Scroll to Start', {
size: 5,
height: 1,
font: droidFont,
bevelSize: 5,
bevelThickness: 2,
});
const introTexture = new THREE.TextureLoader().load('suntexture.png');
const textMaterial = new THREE.MeshBasicMaterial({map: introTexture, transparent:true, opacity: .5});
cosnt introText = new THREE.Mesh(textGeometry, textMaterial);
introText.position.set(-5, 37, -140);
scene.add(introText);
}
);
To achieve a soft oscillating effect on the text, I would typically include this snippet in my animation function called at the end of main.js:
function introAnimate() {
introText.position.y += (Math.sin(clock.getElapsedTime())/62.8);
introText.rotation.y += (Math.cos(clock.getElapsedTime())/700);
}
The issue lies in the console mentioning that introText is not defined (presumably due to its declaration within a function). Attempts to resolve this by declaring them as var or const and prepending with globalThis. or window. did not yield any results.
Surprisingly, the npm run dev version ran without errors despite this reference issue.
Although flow offers some text animation solutions using three.js, I am specifically interested in triggering animations based on scrolling behavior and dynamically altering properties that flow may not support. Any advice on how to address this would be greatly appreciated.