Creating a vertical loop animation for a cube in Three.js

I'm trying to make this box move in both the up and down directions, but currently it only moves up.

    BoxGeo = new HREE.BoxGeometry(10,10,10)
    BoxMat = new THREE.MeshPhongMaterial({
      color: 0xf3e54f
    }),
    cab = new THREE.Mesh ( BoxGeo, BoxMat);
    scene.add(cab);
   
cab.position.y  += 1;

Answer №1

By utilizing the Math.random() function, you are able to receive values within the [0, 1] interval. If you wish to alter this range to [-1, 1], you can achieve this through a basic equation:

let change = (Math.random() - 0.5) * 2.0;
cab.position.y += change;

Answer №2

To achieve smooth vertical movement of the object in your animation loop, incorporating the Math.sin() function is essential.

object.position.y = Math.sin(elapsedTime) + 1

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

The event onmouseover triggers actions on elements contained within

I am facing an issue with a div that acts as a container for text: <div class="timeSpanWrapper" data-occupied="false"> <span>@day.ToString("HH:mm", new System.Globalization.CultureInfo("da-DK"))</span> </div> Upon hovering ove ...

When I navigate to the About page in Vue, the data is automatically cleared

Assist me, please! I am encountering an issue with my website. I have two main pages: Home and About, as well as a component called SecondPage. The SecondPage component contains two tables filled with data that should be displayed on the About page. Howeve ...

Jasmine secretly observes the behavior of Angular services

I'm currently in the process of setting up unit tests for an angular controller using jasmine and karma. Due to the length of my code, I won't be able to include it all here. However, I'll provide some snippets: CompilerController.js (the c ...

Finding the IST date time (YYYY-MM-DD HH:mm:ss) in a Node.js environment is a common requirement. Let's

I recently used the code below to retrieve the current time and date in IST: const x = new Date().toISOString().replace(/T/, ' ').replace(/\..+/, '') Output: 2020-09-01 17:49:48 However, I actually need to obtain the time in IST ...

What techniques can I implement to optimize the speed of this feature in JavaScript?

I have developed a feature that highlights any text within a <p> tag in red based on a user-specified keyword. The current implementation works well, but it is slow when dealing with over 1000 lines of <p>. Is there a faster way to achieve this ...

What is the best way to make a trail follow my shapes on canvas?

In my current project, I have implemented a feature where shapes are generated by spinning the mouse wheel. One specific shape in focus is the triangle, but other shapes follow the same generation process. The goal is to create a trail that slowly fades ...

Cancel a batch upload request using AJAX

Currently, I am working on implementing a feature for aborting a multiple file upload process while also displaying the progress of the upload with a progress bar. My objective is to ensure that when the user clicks on the abort button, not only does the ...

The response parser in Angular 7 is failing to function correctly

Hey, I recently updated my Angular from version 4.4 to the latest 7 and after encountering several errors, I was able to get my service up and running. However, I'm facing an issue with my output parser function which is supposed to parse the login re ...

Is it better to have a single object with all required modules in NodeJS, or follow the "standard" paths in the code?

Being a fan of creating global namespaces in javascript, I often use this approach in my app development. For instance, if my application is named Xyz, I typically create an object called XYZ to organize properties and nested objects like so: XYZ.Resource ...

What is the best approach to dealing with "Cannot <METHOD> <ROUTE>" errors in Express?

Here is a simple example to illustrate the issue: var express = require('express'); var bodyparser = require('body-parser'); var app = express(); app.use(bodyparser.json()); app.use(errorhandler); function errorhandler(err, req, res, ...

What is the best way to modify the attributes of an object within the state?

Although I've been working with the React framework for a few weeks now, I still find myself surprised by new challenges on a regular basis. Currently, I am focused on developing the login/game lobby/server lobby for a group project game. The concept ...

The method window.scrollTo() may encounter issues when used with overflow and a height set to 100vh

Suppose I have an HTML structure like this and I need to create a button for scrolling using scrollTo. However, I've come across the information that scrollTo doesn't work well with height: 100vh and overflow: auto. What would be the best way to ...

Switching the website address after picking an option from the drop-down menu

I have an HTML form that includes two dropdown menus. The first dropdown is populated from a database using PHP, and the second dropdown is linked to the first one and uses AJAX to update its values based on the selection from the first dropdown. My goal ...

Monitoring and recording Ajax requests, and retrying them if they were unsuccessful

As a newcomer to Javascript, I'm diving into the world of userscripts with the goal of tracking all Ajax calls within a specific website. My objective is to automatically repeat any failed requests that do not return a status code of 200. The catch? T ...

Angular @Input set function not being activated during unit testing

Within my Component @Input('price') set setPrice(price) { this.price = price; this.modifyTotalAmount(); } Unit Testing (component.spec.ts) it('should execute function ', () => { spyOn(fixture.componentInstance, ' ...

Achieving a function call within a Backbone view in Backbone.js

Is it possible to call the plotPort function from the plotLoc function using this.plotPort() instead of self.plotPort()? It seems to not work for Internet Explorer when using self.plotPort(). As a workaround, I added an event to lLoca upon reset to call ...

Catching the Selenium NoSuchElementError in JavaScript is impossible

Update: It's puzzling why this was marked as answered since the linked questions don't address the issue at hand and do not involve Javascript. My objective is to detect this error, rather than prevent it, given that methods like invisibilityOfEl ...

Implement the same reference functionality in a React Function component that is seen in a React Class component

Is it possible to replicate the same functionality of class component ref in a function component? Here's an example: const AnotherComponent = () => { const DoSomething = () => console.log(something); return <div> There is some co ...

having difficulty altering a string in EJS

After passing a JSON string to my EJS page, I noticed that it displays the string with inverted commas. To resolve this issue, I am looking for a way to eliminate the inverted comma's and convert the string to UPPERCASE. Does anyone know how to achiev ...

building responsive servers within Gulp using connect

Can I validate the availability of a server port before creating it using Gulp? Currently, this is my approach: /** * Start LiveReload Server */ gulp.task('connect', function() { var connect = require('connect'), app = ...