Greetings, fellow members of the StackOverflow community. I have embarked on a journey to learn three.js, and for my learning project, I decided to recreate an 80's style retro hills scene reminiscent of this. Initially, everything was progressing smoothly until
script.js:37 Uncaught TypeError: Cannot read property 'length' of undefined
at init (script.js:37)
at script.js:6
made an unexpected appearance. Despite my best efforts, I have been unable to find a solution to this issue. Below is my script.js file (the HTML structure follows the default template for head and body). Any assistance or guidance would be greatly appreciated!
let renderer;
let scene;
let camera;
let mesh;
init();
animate();
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
function init() {
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 1, 100);
camera.position.set(0, 0, 5);
scene.add(camera);
var geometry = new THREE.PlaneGeometry(256, 256, 256, 256);
var material = new THREE.MeshBasicMaterial({ color: 0xc04df9, wireframe: true });
var floor = new THREE.Mesh(geometry, material);
floor.rotation.x = 90;
const verticeXYZ = geometry.vertices;
//perlin.seed()
for (let i = 0; i < verticeXYZ.length; i++) {
verticeXYZ.x = 53;
}
scene.add(floor);
}
The error is specifically at line 37:
for (let i = 0; i < verticeXYZ.length; i++) {
verticeXYZ.x = 53;
}