Running a three.js TypeScript application, I developed custom GLSL shaders using the THREE.ShaderMaterial() class. Now, I aim to enhance my code by switching to the THREE.MeshStandardMaterial class.
This is an entirely new experience for me, and despite encountering minor setbacks during the refactoring process, everything progressed smoothly except for updating the uTime uniform in the animation loop as shown below:
material.userData.shader.uniforms.uTime.value = timeDivided;
An error has surfaced ever since, indicating:
index.ts:71 Uncaught TypeError: Cannot read properties of undefined (reading 'uniforms')
at animate (stackOverflowQuestion.ts:71:28)
at onAnimationFrame (three.module.js:28991:1)
at onAnimationFrame (three.module.js:13332:1)
animate @ stackOverflowQuestion.ts:71
The complete simplified app code is presented below:
index.ts:
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import vertexShaderParse from "./shaders/vertexParse.glsl";
import vertexMain from "./shaders/vertexMain.glsl";
import textureImage from "./assets/images/test-image-1.jpeg";
// setting up renderer, scene, camera, lights, controls, etc.
const material = new THREE.MeshStandardMaterial();
// main object implementation with custom shaders
// shader logic and materials setup
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
const animate = (time: number) => {
const timeDivided = time / 10000;
// problematic part where the error occurs ↓, uncommenting breaks the application
material.userData.shader.uniforms.uTime.value = timeDivided;
renderer.render(scene, camera);
};
renderer.setAnimationLoop(animate);
vertexMain.glsl:
// vertex shader logic
vertexMain.glsl:
// additional vertex shader logic
If anyone could provide insights on resolving this issue related to animating the uTime uniform, it would be greatly appreciated.