Error: An unhandled promise was rejected due to a TypeError: Attempting to access the 'length' property of undefined vertices in three.js

Question

Error: An unhandled promise was rejected due to a TypeError: Attempting to access the 'length' property of undefined vertices in three.js

Currently in the process of transforming an html project into a laravel/vue setup, I stumbled upon a three.min.js file within the original html project. Unfortunately, the version of this file remains elusive to me along with some custom script files.

To remedy this, I imported all the necessary files for my vue component. However, issues persist with the three.min.js file prompting me to install version r69 of three.js due to recent changes in geometry structures. One of the custom scripts named test.js relies on three.js and has led to the following error in my console log:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'length') at test.js?t=1674045010699:37:39

The code snippet from test.js is as follows:

import * as THREE from "three";

// import ('../../assets/js/three.min.js')
// import "../js/anime.js"
// import "../js/three.js"

var canvas = document.querySelector("#scene");
// rest of the code...

While encountering these errors, it's worth mentioning that my primary objective revolves around converting the entire project into vue/laravel. If anyone has insights on resolving the issue at hand, your feedback would be greatly appreciated.

javascript three.js

Answer 1

Answer №1

I have updated the code to a more recent version of three.js. The code now utilizes BufferGeometry (the new geometry format) which has resolved the original runtime error.

const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

window.addEventListener('resize', onWindowResize);

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x161d31);

const camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 10000);
camera.position.set(120, 0, 300);

const light = new THREE.HemisphereLight(0xffffff, 0x0c056d, 0.6);
scene.add(light);

const light1 = new THREE.DirectionalLight(0x590d82, 0.5);
light1.position.set(100, 300, 400);
scene.add(light1);

const light2 = light1.clone();
light2.position.set(-100, 300, 400);
scene.add(light2);

const material = new THREE.MeshLambertMaterial({
  emissive: 0x23f660,
  emissiveIntensity: 0.4
});

const geometry = new THREE.IcosahedronGeometry(120, 12);
const positionAttributeBase = geometry.getAttribute( 'position' ).clone();

const shape = new THREE.Mesh(geometry, material);
scene.add(shape);

const simplex = new THREE.SimplexNoise();
const vector = new THREE.Vector3();

function updateVertices(time) {

  const positionAttribute = geometry.getAttribute('position');

  for (let i = 0; i < positionAttributeBase.count; i++) {
    vector.fromBufferAttribute(positionAttributeBase, i);
    const noise = simplex.noise3d(
      vector.x * 0.006 + time * 0.0002,
      vector.y * 0.006 + time * 0.0003,
      vector.z * 0.006
    );
    const ratio = noise * 0.4 + 0.9;
    vector.multiplyScalar(ratio);
    positionAttribute.setXYZ(i, vector.x, vector.y, vector.z)
  }
  positionAttribute.needsUpdate = true;
}

function animate(time=0) {
  requestAnimationFrame(animate);
  updateVertices(time);
  renderer.render(scene, camera);
}

function onWindowResize() {

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

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

}

animate();

body {
    margin: 0px;
}

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="77031f051212374759464340">[email protected]</a>/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dca8b4aeb9b99cecf2ede8eb">[email protected]</a>/examples/js/math/SimplexNoise.js"></script>

Answer 2

I have updated the code to a more recent version of three.js. The code now utilizes BufferGeometry (the new geometry format) which has resolved the original runtime error.

const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

window.addEventListener('resize', onWindowResize);

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x161d31);

const camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 10000);
camera.position.set(120, 0, 300);

const light = new THREE.HemisphereLight(0xffffff, 0x0c056d, 0.6);
scene.add(light);

const light1 = new THREE.DirectionalLight(0x590d82, 0.5);
light1.position.set(100, 300, 400);
scene.add(light1);

const light2 = light1.clone();
light2.position.set(-100, 300, 400);
scene.add(light2);

const material = new THREE.MeshLambertMaterial({
  emissive: 0x23f660,
  emissiveIntensity: 0.4
});

const geometry = new THREE.IcosahedronGeometry(120, 12);
const positionAttributeBase = geometry.getAttribute( 'position' ).clone();

const shape = new THREE.Mesh(geometry, material);
scene.add(shape);

const simplex = new THREE.SimplexNoise();
const vector = new THREE.Vector3();

function updateVertices(time) {

  const positionAttribute = geometry.getAttribute('position');

  for (let i = 0; i < positionAttributeBase.count; i++) {
    vector.fromBufferAttribute(positionAttributeBase, i);
    const noise = simplex.noise3d(
      vector.x * 0.006 + time * 0.0002,
      vector.y * 0.006 + time * 0.0003,
      vector.z * 0.006
    );
    const ratio = noise * 0.4 + 0.9;
    vector.multiplyScalar(ratio);
    positionAttribute.setXYZ(i, vector.x, vector.y, vector.z)
  }
  positionAttribute.needsUpdate = true;
}

function animate(time=0) {
  requestAnimationFrame(animate);
  updateVertices(time);
  renderer.render(scene, camera);
}

function onWindowResize() {

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

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

}

animate();

body {
    margin: 0px;
}

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="77031f051212374759464340">[email protected]</a>/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dca8b4aeb9b99cecf2ede8eb">[email protected]</a>/examples/js/math/SimplexNoise.js"></script>

Error: An unhandled promise was rejected due to a TypeError: Attempting to access the 'length' property of undefined vertices in three.js

Answer №1

Similar questions

Issues with basic calculator implemented in HTML

box tick does not alter appearance

React- Error: Unhandled Type Mismatch in function call for _this4.getNotes

The Evolution of Alternatives to contentEditable

Navigating JSON encoded strings with jQuery

The Three.js camera imported from Collada is unable to properly focus on an object within the scene

Fixing the Timeout Error in Node.js & Mongoose: A Step-by-Step Guide

Can you provide instructions for setting a projection matrix in Three.js that accomplishes this specific type of mapping?

Alphabetic divider for organizing lists in Ionic

Execute function prior to redirection of iframe

Real-time Data Stream and Navigation Bar Location

Another class is overriding the border of the text-box

Spin an object around the global axis using the tween.js library

Error throwing when attempting to use additional plugins in Angular CKEditor

What is the best MySQL data type for storing JavaScript code with PHP?

Shorten a string once a particular word is found in either Smarty or JavaScript/jQuery

Mongoose stores data in two separate collections

I am struggling to capture the user's input and display it on a webpage using HTML and JavaScript. Can you help me identify where I may be going wrong in this process?

Send a response from socket.io to the client's browser

Encountering issues with resolving dependencies in webdriverIO