Property 'getUniforms' is undefined but only for specific objects

Questions
1

Hello, I’m having trouble in rendering and adding objects to my scene.

I’m following the format from this example and the THREERoot, Slide and SlideGeometry classes come from this example and are unchanged other than separating them and adding export default.

Below I have provided the objects I’m trying to add to the scene. The Slide objects render and animate correctly but those that I have labelled as FAILS! gives me the following error:

Uncaught TypeError: Cannot read property ‘getUniforms’ of undefined
at r (three.min.js:164)
at be.renderBufferDirect (three.min.js:187)
at q (three.min.js:157)
at m (three.min.js:157)
at be.render (three.min.js:194)
at THREERoot.render (THREERoot.js:48)
at THREERoot.tick (THREERoot.js:41)

I’m confused as to why some objects render and others don’t. I don’t expect anyone to give a perfect answer but could this be related to compatibility issues between different versions of THREE?

import THREERoot from './THREERoot'
import Slide from './Slide'
import {Text} from 'troika-three-text'


window.onload = init;

function init() {

    var root = new THREERoot({
        createCameraControls: !true,
        antialias: (window.devicePixelRatio === 1),
        fov: 80
    });

    root.renderer.setClearColor(0x000000, 0);
    root.renderer.setPixelRatio(window.devicePixelRatio || 1);
    root.camera.position.set(0, 0, 60);

    var width = 125;
    var height = 125;

    // WORKS!
    var slide = new Slide(width, height, 'out');
    var l1 = new THREE.ImageLoader();
    l1.setCrossOrigin('Anonymous');
    l1.load('images/image.jpg', function(img) {
        slide.setImage(img);
    })
    root.scene.add(slide);

    // WORKS!
    var slide2 = new Slide(width, height, 'in');
    var l2 = new THREE.ImageLoader();
    l2.setCrossOrigin('Anonymous');
    l2.load('images/image.jpg', function(img) {
        slide2.setImage(img);
    })

    root.scene.add(slide2);

    // WORKS!
    const geometry = new THREE.BoxGeometry(1, 1, 1)
    const material = new THREE.MeshBasicMaterial({color: 0xff0000})
    const mesh = new THREE.Mesh(geometry, material)
    root.scene.add(mesh)

    // FAILS!
    const myText = new Text()
    myText.text = 'Hello'
    myText.fontSize = 2
    myText.position.set(0, 0, 0)
    myText.color = 0x2d2d2d
    myText.font = 'fontPath'
    myText.fillOpacity = 1
    myText.maxWidth = 5
    myText.sync()
    root.scene.add(mesh)

    // FAILS!
    const imgTexture = new THREE.TextureLoader().load( 'path' );
    const imgGeometry = new THREE.PlaneGeometry();
    const imgMaterial = new THREE.MeshPhongMaterial({map: imgTexture, color: 0xFFFFFF, opacity: 1});
    imgMaterial.transparent = true
        
    const imagePlane = new THREE.Mesh(imgGeometry, imgMaterial);
    imagePlane.position.set(0, 0, 0)
    root.scene.add(imagePlane)

The following is the HTML and the scripts included:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>App</title>
</head>
<body>
    <div id="three-container"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/175711/bas.js"></script>
    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/175711/OrbitControls-2.js"></script>
</body>
</html>
2

hello! did you manage to add more pictures? I have the same question right now…