Hello everyone, I'm excited to ask my first question on StackOverflow!
I'm currently developing a javascript interactive game and I'm trying to make a mango in the game change its size, color, etc. every time a certain event occurs. I've tried using an event listener on the mango with scale.set in my callback function, but it only resizes the mango once. Is there a different approach I could take to continuously increase its size until it reaches a certain, yet undefined, size? I attempted using percentages but ended up with the same result along with my linter throwing errors. Below is the relevant section of my code:
const Mango = function() {
this.mesh = new THREE.Object3D();
const geom = new THREE.BoxGeometry(8, 16, 5, 8, 8, 8);
// making the box round
for (let i = 0; i < geom.vertices.length; i++) {
geom.vertices[i].normalize().multiplyScalar(16);
}
for (let i = 0; i < geom.faces.length; i++) {
let face = geom.faces[i];
face.vertexNormals[0].copy( geom.vertices[face.a] ).normalize();
face.vertexNormals[1].copy( geom.vertices[face.b] ).normalize();
face.vertexNormals[2].copy( geom.vertices[face.c] ).normalize();
}
// making it oblong
geom.applyMatrix( new THREE.Matrix4().makeScale(1.0, 1.3, 0.6));
// adding mango skin
const loader = new THREE.TextureLoader();
const mangoMap = loader.load("images/mangoMap.jpg");
const mat = new THREE.MeshPhongMaterial({
color: 0xffd507,
shininess: 40,
map: mangoMap,
});
const mango = new THREE.Mesh(geom, mat);
// adding eventlistener
const domEvents = new THREEx.DomEvents(camera, renderer.domElement);
domEvents.addEventListener(mango, 'click', function increaseMangoSize(e) {
mango.scale.set(1.2, 1.2, 1.2);
});
this.mesh.add(mango);
};
If you have any suggestions or critiques for my code, especially since I'm a beginner with Three.js and just started today, please feel free to share! I appreciate any feedback. Thank you!