Hey so i keep getting this error
Uncaught TypeError: Cannot read properties of undefined (reading ‘length’)
which is this line:
for (var i = 0; i < planeGeometry.vertices.length; i++) {
its fairly old code but here it is:
var delta;
var time, clock;
var oldTime;
var plane;
var uniforms;
var planeGeometry = new THREE.PlaneGeometry(400, 30, 14, 1);
var geometry = new THREE.BufferGeometry();
var vertices = geometry.vertices;
for (var i = 0; i < planeGeometry.vertices.length; i++) {
planeGeometry.vertices[i].z = Math.sin(planeGeometry.vertices[i].x)*20;
};
planeGeometry.applyMatrix( new THREE.Matrix4().setPosition( new THREE.Vector3( 0, 15, 0 ) ) );
var map = THREE.ImageUtils.loadTexture( "./resources/textures/thingrass.jpg" );
map.wrapS = THREE.RepeatWrapping;
var maxAnisotropy = renderer.getMaxAnisotropy();
map.anisotropy = maxAnisotropy;
var attributes = {
time: { type: 'f', value: [] }
};
uniforms = {
color: { type: "c", value: new THREE.Color( 0xffffff ) },
texture: { type: "t", value: map },
globalTime: { type: "f", value: 0.0 },
uvScale: { type: "v2", value: new THREE.Vector2( 16.0, 1.0 ) },
effector: { type: "v3", value: new THREE.Vector3() }
};
var material = new THREE.ShaderMaterial( {
uniforms: uniforms,
attributes: attributes,
vertexShader: vs,
fragmentShader: fs,
wireframe: false,
side: THREE.DoubleSide,
});
var x = 0;
var z = 0;
var rot = (Math.PI*2)/3;
var mesh = new THREE.Mesh(planeGeometry);
for (var i = 0; i < 150; i++) {
mesh.rotation.y = (i%3 * rot) + Math.random()-0.5;
mesh.position.set(x*50 -250 , 0, z*80 -180 );
mesh.position.x += Math.random()*20 - 10;
mesh.position.z += Math.random()*20 - 10;
mesh.scale.y = 1.1-Math.random()*0.4;
if (i%3 == 2) {
++x;
}
if (x == 11) {
x = 0;
++z;
}
THREE.GeometryUtils.merge(geometry, mesh);
};
// in front of camera
for (var i = 0; i < 10; i++) {
var z = i*10;
mesh.position.set(Math.random()*50 - 25 , 0, -(100+z) );
mesh.rotation.y = Math.random()*0.2 - 0.1;
THREE.GeometryUtils.merge(geometry, mesh);
};
var vertices = geometry.vertices;
var values_time = attributes.time.value;
for( var v = 0; v < vertices.length; v+=planeGeometry.vertices.length ) {
for (var j = v; j < v+planeGeometry.vertices.length; j++) {
values_time[j] = v/vertices.length;
};
}
var planes = new THREE.Mesh(geometry, material);
planes.matrixAutoUpdate = false;
this.scene_.add(planes);
here are the shaders:
const vs = `
attribute float time;
uniform float globalTime;
uniform vec3 effector;
uniform vec2 uvScale;
varying vec2 vUv;
varying vec3 vNormal;
varying float fShine;
void main() {
vNormal = normal;
vec3 pos = position;
fShine = 1.0;
if (pos.y > 1.0) {
float localTime = time + globalTime;
vec3 dif = pos - effector;
float distance = dif.x * dif.x + dif.z * dif.z;
float invDistance = max(0.0, 10000.0-distance) / 400.0;
float minDistance = min( 8.0, invDistance );
fShine = 1.0 + (invDistance*0.22);
float angle = atan(dif.x, dif.z);
pos.x += sin(angle)*(minDistance);
pos.z += cos(angle)*(minDistance);
pos.x += sin(localTime*1.5)*2.0;
pos.z += cos(localTime*0.5)*2.0;
}
vUv = uvScale * uv;
vec4 mvPosition = modelViewMatrix * vec4( pos, 1.0 );
gl_Position = projectionMatrix * mvPosition;
}
`;
const fs = `
uniform vec3 color;
uniform sampler2D texture;
varying vec3 vNormal;
varying vec2 vUv;
varying float fShine;
const float threshold = 0.05;
void main() {
vec4 textureColor = texture2D(texture, vec2(vUv.s, vUv.t));
if (textureColor[0] < threshold && textureColor[1] < threshold && textureColor[2] < threshold) {
discard;
} else {
float depth = gl_FragCoord.z / gl_FragCoord.w;
float near = 150.0;
float far = 400.0;
float depthcolor = 1.0 - smoothstep( near, far, depth );
vec3 light = vec3(0.0,0.8,-1.0);
light = normalize(light);
float d = max(0.4,dot(vNormal, light))*1.6;
gl_FragColor = vec4((textureColor.xyz * d * fShine) * depthcolor, 1.0);
}
}
`;
and here is the animate:
time = new Date().getTime();
delta = time - oldTime;
oldTime = time;
if (isNaN(delta) || delta > 1000 || delta == 0 ) {
delta = 1000/60;
}
if (uniforms) {
uniforms.globalTime.value += delta * 0.0012;
}
any idea’s to where i am going wrong?
thanks in advance
