Is there a different approach in Three.js for adjusting the size of a 3D object upon clicking, apart from using the scale.set method?

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!

Answer №1

After some trial and error, I finally cracked the code!

apple.size.scaleByFactor(1.2);

This new method did the trick. What a relief!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Seeking assistance in optimizing my Javascript code for more efficient canvas rendering

I've created a script for generating random moving lines as a background element for my portfolio. While it runs smoothly on its own, I encounter frame drops when combining it with other CSS animations and effects, especially at the beginning (althoug ...

Client-side image upload problem in Next.js API routes

I've been banging my head against this bug for a couple of hours now and I just can't seem to figure out the reason behind it. The issue is with an API route I'm trying to set up in next.js where I need to modify an image and then upload it ...

My objective is to show the div element just once using AngularJS

Here's the scenario I want to show this div just once, not multiple times: //angular js code $scope.arr=["sunday","mpnday","tuesday"]; //html view <ul> <li ng-repeat="x in arr"> <div><p>{{ x }}</p> </div> & ...

"Exploring the Latest Features of NextJS 13: Enhancing Server

Currently, I am in the process of familiarizing myself with NextJS 13 and its new APP folder structure. I am facing a challenge in updating data on server components without needing to reload the page or the app. My HomePage server component fetches a list ...

Securely encoding information with PHP and decrypting it using JavaScript

I'm currently working with 2 servers. My goal is to generate a pair of keys, store the private key in local storage, and send the public key to my PHP server. The main objective is to encrypt data using the public key in PHP and decrypt it using Jav ...

Using the jQuery plugin multiple times within one website

I have a decent understanding of jQuery and I'm in the process of developing a plugin. Specifically, it's a dropdown element that I'm working on. Everything functions correctly when there's only one dropdown on the site. However, when ...

Is there a JavaScript toolkit specifically designed for animating mobile devices?

Currently in search of a JavaScript Library that is similar to impress.js, allowing me to create dynamic animations on text content that are compatible with iOS/Android. Although Hype by Tumult seems promising, I am not interested in an editor but rather ...

Encountering a 500 internal server error when utilizing jQuery and Ajax with Laravel 5.2

I have been working on a post editing system using jQuery and Ajax in Laravel 5.2. But when I try to save the changes by clicking on the button inside my Bootstrap modal, an error pops up: Error: POST http://localhost:8000/edit 500 (Internal Server Error) ...

Customizing error messages in react-hook-form-mui: A step-by-step guide

I'm currently diving into the world of react-hook-form-mui library. The documentation provided for this project is quite brief, and I've been struggling to add a validation rule to my form field. Despite trying various methods, none seem to be ef ...

Is it a graphics card malfunction or a coding complication? Delving into THREE.JS WebGL

Recently, I created a cool scene using three.js that was running perfectly until today. Strangely, without any changes to the code, I started encountering an error in every major browser - Chrome, Firefox, and Edge. The error message I am seeing is: THREE. ...

Unable to modify the appearance of text on the canvas

Trying to customize the font style of canvas text with Press Start 2P The URL has been imported into a CSS file as follows: @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap'); .canvasClass{ font-family: ...

Enhance Your Website with HTML and JavaScript

Here is the code snippet I am working with: sTAT **javascript** var acc = document.getElementsByClassName("item-wrapper"); var i; for (i = 0; i < acc.length; i++) { acc[i].onclick = function(){ this.classList.toggle("selected"); this.nextElementS ...

What could be the reason for the malfunction of the select (mongoose query)?

I'm trying to retrieve a User's highest score post. To accomplish this, I am querying the Post model and looking for posts where their user._id matches the author in the post. Everything is functioning correctly in this regard. However, my goal ...

Find the position of an element in an array that includes a specific string value using JavaScript or Node.js

I need help figuring out how to find the index of an array that contains or includes a specific string value. Take a look at my code below to see what I've tried so far: Here is a simple example: var myarr = ["I", "like", "turtles"]; var arraycontai ...

Iterating through JSON objects in JavaScript using 'Foreach'

After receiving a JSON Object from my PHP script, I am trying to extract specific data using JavaScript. { "Data":{ "Recipes":{ "Recipe_7":{ "ID":"7", "TITLE":"Wu ...

The delete functionality seems to be malfunctioning within Postman

const express = require("express") const app = express() app.use(express.json()) const usersList = [{id :1,name:"naser",age:26},{id :2,name:"mosa",age:46}]; app.post('/users',(req,res)=>{ const newUser = re ...

JavaScript: Conditional statement used to determine the target of a touched element

I'm currently working on enhancing the mobile responsiveness of a React project. As part of this process, I am attempting to ensure that certain JavaScript-driven style changes are only applied to elements that are not the target or a child of: <d ...

Adjust tool tip text on the fly

As a beginner, I created a test table and now I want to make the tool tip text change dynamically when I hover over the table with my mouse. Ideally, I would like the tool tip text to correspond to the content of the table cell. Currently, I only have stat ...

Steps to generate a nested array of objects within a given array using JavaScript

I currently have an array called ExampleArray which contains different objects with properties like "No", "Name", and "subject". I want to transform this array into a new format where the "subject" property is an array of strings instead. var ExampleArray ...

Removing values in javascript for checkboxes that are not selected

Here is the JavaScript Code : var clinicalStat; var id; var val; var clinicalVals; $(":checkbox").click(function() { //alert(" you checked"); if ($(this).is(':checked')) { var checked1 = $(this).val(); //Inital value of check ...