TypeError: material.onBeforeRender is not a function. (In 'material.onBeforeRender( _this, scene, camera, geometry, object, group )', 'material.onBeforeRender' is undefined)

Questions
1

I want to load a gltf with GLTFLoader and I have basically everything set up. But when I host a live-server in VScode I get the TypeError: material.onBeforeRender is not a function. (In ‘material.onBeforeRender( _this, scene, camera, geometry, object, group )’, ‘material.onBeforeRender’ is undefined) in the console. Please help me fix my code, thanks!

JS:

import * as THREE from '../../../three.js-master/build/three.module.js'
import { OrbitControls } from 'https://unpkg.com/three@0.127.0/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'https://unpkg.com/three@0.127.0/examples/jsm/loaders/GLTFLoader.js'

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const loader = new GLTFLoader();

loader.load('../static/assets/jar_gltf.glb', function (gltf) {

    scene.add(gltf.scene);

}, undefined, function (error) {

    console.error(error);

});

scene.background = new THREE.Color(0xffffff);

const light = new THREE.HemisphereLight(0xffffff, 0x000000, 2);
scene.add(light);
camera.position.set(0, 0, 10);

function animate() {
    requestAnimationFrame(animate);

    renderer.render(scene, camera);
}

animate();

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3d model</title>
    <style>
        canvas {
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <canvas id="webgl"></canvas>
    <script type="module" src="../static/js/test.js"></script>
</body>

</html>
2

Make sure that all library files are from the same release. It is not valid to use the latest version of three.module.js with classes from r127.

1 Like