как исправить ошибку:
Uncaught TypeError: Cannot read properties of undefined (reading ‘render’)
at render (index.js:336:22)
at animate (index.js:300:17)
в коде:
import * as THREE from ‘three’;
import Stats from ‘three/addons/libs/stats.module.js’;
import { GLTFLoader } from ‘three/examples/jsm/loaders/GLTFLoader.js’;
import { OrbitControls } from ‘three/examples/jsm/controls/OrbitControls.js’;

async function loadShaderFile(url) {
const response = await fetch(url);
const shaderCode = await response.text();
return shaderCode;
}
async function main() {

// Создаем загрузчик gltf
const loader = new GLTFLoader();
loader.load(
‘lolkek.glb’,
async (gltf) => {
const text = gltf.scene;
let container, stats, clock;

let camera, scene, renderer, composer;

const segments = 800;
const r = 3;
let t = 0;

init();
scene.add(text);
text.scale.set(1.0,1.0,1.0);
text.position.set(0,-0.3,0);

const light = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( light );

async function init() {

container = document.getElementById( ‘container’ );

camera = new THREE.PerspectiveCamera( 80, window.innerWidth / window.innerHeight, 0.1, 4000 );
camera.position.z = 2;

scene = new THREE.Scene();

clock = new THREE.Clock();
const shaderCode = await loadShaderFile(‘frag.glsl’);
const shaderCode2 = await loadShaderFile(‘frag2.glsl’);
const geometry = new THREE.BufferGeometry();
const texture2 = new THREE.TextureLoader().load(‘logoGradient4.png’);
let uTime = 0;
let uniforms = {
uTime: {
type: ‘f’,
value: 0.0
},
thickness: {
type: ‘f’,
value: 3.0
},
mouseCoord: {
type: ‘v3’,
value: new THREE.Vector3()
},
mouseCoord: {
type: ‘v3’,
value: new THREE.Vector3()
},
tex: {
type: ‘t’,
value: texture2
},
opacity: {
type: ‘f’,
value: 1.0
},
res: {
type: ‘v2’,
value: new THREE.Vector2(window.innerWidth, window.innerHeight)
},
u_sec1: { type: “f”, value: 0.0 },
u_sec2: { type: “f”, value: 0.0 },
directionalLightColor: { value: new THREE.Color(0xffffff) },
directionalLightPosition: { value: new THREE.Vector3(1, 1, 1) },
ambientLightColor: { value: new THREE.Color(0x222222) },
};
const material = new THREE.ShaderMaterial({
side: THREE.DoubleSide,
fragmentShader: shaderCode,
vertexShader: <br/> attribute vec3 color;<br/> varying vec3 vColor;<br/> attribute float vertexID;<br/> varying float vVertexID;<br/> varying vec3 vPosition;<br/> <br/> void main() {<br/> vColor = color;<br/> vPosition = position;<br/> vColor = color;<br/> gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);<br/> },
alphaToCoverage: true,
uniforms: uniforms
})
uniforms.mouseCoord.value.z = 50;
const positions = [];
const colors = [];

for ( let i = 0; i < segments; i ++ ) {

const x = Math.random() * r * 1.5 - r * 1.5 / 2;
const y = Math.random() * r - r / 2;
const z = Math.random() * r - r / 2;

// positions

positions.push( x, y, z );

// colors

colors.push( ( Math.random() * r - r / 2 / r ) + 0.5 );
colors.push( ( Math.random() * r - r / 2 / r ) + 0.5 );
colors.push( ( Math.random() * r - r / 2 / r ) + 0.5 );

}
for ( let i = 0; i < segments; i ++ ) {

const x = Math.random() * r * 1.5;
const y = Math.random() * r - r / 2;
const z = Math.random() * r - r / 2;

// positions

positions.push( x, y, z );

// colors

colors.push( ( Math.random() * r - r / 2 / r ) + 0.5 );
colors.push( ( Math.random() * r - r / 2 / r ) + 0.5 );
colors.push( ( Math.random() * r - r / 2 / r ) + 0.5 );

}
for ( let i = 0; i < segments; i ++ ) {

const x = (Math.random() * r * 1.5 - r * 1.5);
const y = (Math.random() * r - r / 2);
const z = (Math.random() * r - r / 2);
// positions

positions.push( x, y, z );

// colors

colors.push( ( Math.random() * r - r / 2 / r ) + 0.5 );
colors.push( ( Math.random() * r - r / 2 / r ) + 0.5 );
colors.push( ( Math.random() * r - r / 2 / r ) + 0.5 );

}
for ( let i = 0; i < segments; i ++ ) {

const x = (Math.random() * r * 3 - r * 3 / 2);
const y = (Math.random() * r * 3 - r * 3 / 2);
const z = (Math.random() * r * 3 - r * 3 / 2);
// positions

positions.push( x, y, z );

// colors

colors.push( ( Math.random() * r - r / 2 / r ) + 0.5 );
colors.push( ( Math.random() * r - r / 2 / r ) + 0.5 );
colors.push( ( Math.random() * r - r / 2 / r ) + 0.5 );

}

geometry.setAttribute( ‘position’, new THREE.Float32BufferAttribute( positions, 3 ) );
geometry.setAttribute( ‘color’, new THREE.Float32BufferAttribute( colors, 3 ) );
const vertexID = [0, 1];
geometry.setAttribute(‘vertexID’, new THREE.Float32BufferAttribute(vertexID, 1));
geometry.computeBoundingSphere();


const lineSegments = new THREE.LineSegments(geometry, material);
scene.add(lineSegments);
lineSegments.material.uniforms.thickness.value = 3.0;

const light = new THREE.PointLight( 0xffffff, 1, 100 );
light.position.set( 1, 1, 1 );
scene.add( light );
const light2 = new THREE.PointLight( 0xffffff, 1, 100 );
light2.position.set( -1, 1, 1 );
scene.add( light2 );
const light3 = new THREE.PointLight( 0xffffff, 1, 100 );
light3.position.set( 0, 0, 1 );
scene.add( light3 );

const geometrySphere = new THREE.SphereGeometry(0.01, 64, 64);
const materialSphere = new THREE.ShaderMaterial({
side: THREE.DoubleSide,
fragmentShader: shaderCode2,
vertexShader: <br/> attribute vec3 color;<br/> varying vec3 vColor;<br/> attribute float vertexID;<br/> varying float vVertexID;<br/> varying vec3 vPosition;<br/> <br/> void main() {<br/> vColor = color;<br/> vPosition = position;<br/> vColor = color;<br/> gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);<br/> },
alphaToCoverage: true,
uniforms: uniforms
})
const sphere = new THREE.Mesh(geometrySphere, materialSphere);
scene.add(sphere);
const sphereScale = 10.5;
sphere.scale.set(sphereScale,sphereScale,sphereScale);

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.useLegacyLights = false;

container.appendChild( renderer.domElement );

stats = new Stats();
container.appendChild( stats.dom );

lineSegments.rotation.set(0.0,-2Math.PI,0.0);

let positions2 = [];
let count = 0;
let intervalId;
function incrementCount() {
for ( let i = 0; i < positions.length; i ++ ) {
positions2[i] = positions[i] + Math.random() * count/200;
}
count++;
// console.log(count);
geometry.setAttribute( ‘position’, new THREE.Float32BufferAttribute( positions2, 3 ) );
}
// console.log(positions);
document.addEventListener(‘mousedown’, function(e) {
intervalId = setInterval(incrementCount, 50);
});
document.addEventListener(‘mouseup’, function(e) {
count = 0;
clearInterval(intervalId);
geometry.setAttribute( ‘position’, new THREE.Float32BufferAttribute( positions, 3 ) );
});


console.log(geometry);
let clX = window.innerWidth/2;
let clY = window.innerHeight/2;
let mouse = {x: clX, y: clY};
window.addEventListener(‘mousemove’, (e)=> {
mouse = {
x: (e.clientX / window.innerWidth) * 2 - 1,
y: -(e.clientY / window.innerHeight) * 2 + 1,
};

// uniforms.mouseCoord.value.x = e.clientX + Math.sin(uTime)500.0;
clX = e.clientX;
clY = window.innerHeight-e.clientY;
const rotX = 0.5e.clientY/window.innerHeight - 0.25;
const rotY = 0.5e.clientX/window.innerWidth - 0.25;
const rotZ = Math.PI;
lineSegments.rotation.set(-rotX/1,-rotY/1,0.0);
text.rotation.set(-rotX/1,-rotY/1,0.0);
// uniforms.mouseCoord.value.y = (window.innerHeight-e.clientY) + Math.cos(uTime)*500.0;
})

window.addEventListener( ‘resize’, onWindowResize );
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
scene.add(controls.target);

function animate() {
requestAnimationFrame( animate );
const vector = new THREE.Vector3(mouse.x, mouse.y, 0.1).unproject(camera);
sphere.position.copy(vector);
controls.update();
uTime += 0.1;
uniforms.uTime.value = uTime;
console.log(clX);
uniforms.mouseCoord.value.x = clX ;
uniforms.mouseCoord.value.y = clY ;
// uniforms.mouseCoord.value.x = Math.sin(uTime) * 0.5 + 0.5;
// uniforms.mouseCoord.value.y = Math.cos(uTime) * 0.5 + 0.5;

render();
stats.update();



}
animate()
}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

}
//

composer = new THREE.EffectComposer(renderer);
composer.setSize(window.innerWidth, window.innerHeight);

const renderPass = new THREE.RenderPass(scene, camera);
renderPass.renderToScreen = true;

composer.addPass(renderPass);

function render() {

const delta = clock.getDelta();
const time = clock.getElapsedTime();

t += delta * 0.5;


composer.render(scene, camera);

}



}
);


};
main()