position undefined running Three.js component in React - reactjs

Question

I am running a three.js component inside a React (Typescript) app, everything was working fine rendering my 3D object, until I started to add some more functionality with vertex colors and now I am getting an error "Cannot read properties of undefined (reading 'position')" at line 27:
const count = geometry.attributes.position.count;
Is there an issue I am facing here with scope or its implementation as a component?
import React from "react";
import ReactDOM from "react-dom";
import * as THREE from "three";
class MyBox extends React.Component {
componentDidMount() {
let mouseX = 0;
let mouseY = 0;
let windowHalfX = window.innerWidth / 2;
let windowHalfY = window.innerHeight / 2;
const radius = 1;
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 / 2, window.innerHeight / 2);
this.mount.appendChild(renderer.domElement);
var geometry = new THREE.IcosahedronGeometry(radius, 1);
const count = geometry.attributes.position.count;
geometry.setAttribute('color', new THREE.BufferAttribute(new Float32Array(count * 3), 3));
const color = new THREE.Color();
const positions = geometry.attributes.position;
const colors = geometry.attributes.color;
for (let i = 0; i < count; i++) {
color.setHSL((positions.getY(i) / radius + 1) / 2, 1.0, 0.5);
colors.setXYZ(i, color.r, color.g, color.b);
}
var material = new THREE.MeshPhongMaterial({ color: 0x7e31eb, vertexColours: true, shininess: 100 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
var wiregeometry = new THREE.IcosahedronGeometry(radius + 0.01, 1);
var wirematerial = new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe: true });
var wirecube = new THREE.Mesh(wiregeometry, wirematerial);
scene.add(wirecube);
const light = new THREE.HemisphereLight(0xffffbb, 0x080820, 1);
scene.add(light);
camera.position.z = 2;
document.addEventListener('mousemove', onDocumentMouseMove);
function onDocumentMouseMove(event) {
mouseX = (event.clientX - windowHalfX);
mouseY = (event.clientY - windowHalfY);
}
var animate = function() {
requestAnimationFrame(animate);
wirecube.rotation.x += mouseY / 20000;
wirecube.rotation.y += mouseX / 20000;
wirecube.rotation.z += 0.00;
cube.rotation.x += mouseY / 20000;
cube.rotation.y += mouseX / 20000;
cube.rotation.z += 0.00;
renderer.render(scene, camera);
};
animate();
renderer.render(scene, camera);
}
render() {
return ( <
div ref = { ref => (this.mount = ref) }
/>
)
}
}
const rootElement = document.getElementById("root")
ReactDOM.render( < MyBox / > , rootElement);
export default MyBox;
Similarly, if I write
var position = geometry.getAttribute('position');
I get a "geometry.getAttribute is not a function" error, which seems odd because that code would usually work for me.

Answer 1

Users encountered problems when mixing ThreeJS version with incompatible plugins. Try using the files for everything from the same release.
Example of a user using incompatible versions: https://discourse.threejs.org/t/buffergeometry-setattribute-is-not-a-function-error/22856