I was able to follow @drcmda’s steps without any issue and replicated this with my repository - however I still had the same problem of my three.js content not loading. The issue was a bug in my main.js script that I still haven’t found a workaround to, which was preventing things from loading properly in the build (dist) version.
NOTE: I posted this to a new form, as it is no longer a npm build issue.
The problem is that I am trying to animate text that was loaded using fontLoader.load(). For example, I add text to the scene using the following:
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});
globalThis.introText = new THREE.Mesh(textGeometry, textMaterial);
introText.position.set(-5, 37, -140);
scene.add(introText);
}
);
Then, I want it to gently oscillate on the screen so as to not appear static, to do this I would include something like this 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 problem with this is that it says that introText is not defined, given it was declared in a function. I tried to fix this by first declaring them as var or const (didn’t work), then adding globalThis. or window. (ie window.introText). But the problem persists.
I tried implementing the solution from this discourse but got the same reference errors when trying to animate mesh.position.y in my updated introAnimate() function. To be honest, I am surprised the npm run dev version ran correctly in the first place given this reference error. Any suggestions on how to fix this would be much appreciated.
