Three.js object changing position along the curve of a bowl

Question

Three.js object changing position along the curve of a bowl

I am currently developing a threejs game.

My goal is to have a ball move from the z-position of -5000 to 0.

This is how I am creating the mesh:

    let geometry  = new THREE.SphereGeometry(100, 32, 32);
    let material  = new THREE.MeshBasicMaterial({
        map: loader.load("images/SoftballColor.jpg"), side: THREE.BackSide
    });
    mesh = new THREE.Mesh(geometry, material);

    mesh.position.set(0,0, -5000);

In my rendering function, I am using this code for the ball's movement (moving closer):

mesh.position.z += 50;

The ball moves towards me in a straight line, but what I really want is for it to move in a curved path. Any suggestions?

I will also include some images to illustrate my point better.

Thank you for your help.

Check out the image showing the ball movement here:

https://i.sstatic.net/isXAD.png

javascript 3d three.js

Answer 1

Answer №1

The Cosine function is the key here.

var how_high = 1000;
var start_position = new THREE.Vector3(0,0,-5000);

If you are aware of the z-value of the ball's position, then its y-value can be determined using the formula:

ball.position.y = Math.cos(ball.position.z / start_position.z * Math.PI) * how_high;

Check out this jsfiddle example.

Answer 2

The Cosine function is the key here.

var how_high = 1000;
var start_position = new THREE.Vector3(0,0,-5000);

If you are aware of the z-value of the ball's position, then its y-value can be determined using the formula:

ball.position.y = Math.cos(ball.position.z / start_position.z * Math.PI) * how_high;

Check out this jsfiddle example.

Three.js object changing position along the curve of a bowl

Answer №1

Similar questions

When clicking on the file input field in Angular.js, the image name mysteriously disappears

An easy way to adjust the date format when linking a date in ng-model with md-datepicker

Slider Carousel for Multiple Items: Horizontal Orientation

Guide to adding files to a WordPress post with Selenium in Python

What is the reason for AngularJS not invoking the said function?

What is the list of NPM packages already included in the AWS Lambda execution environment?

Unable to save the current light/dark mode preference to local storage

Adjust the width of the inline textarea using HTML and CSS to match that of the input field

Generate your own unique referral links today

The module demoApp could not be instantiated because of an error stating that the module demoApp is not accessible

What could be causing the month to be undefined in this Javascript date?

What are the best practices for managing promises effectively?

The use of jQuery addClass does not produce any changes

The JSX snippet accurately displays the expected value on some pages, but displays an incorrect value on other pages

How Angular services transmit information to components

Issue: ng-file-upload validation is not functioning correctly, resulting in the form always being considered valid

Initializing a shape in Three.Dart

Visuals derived from JSON information

Is JavaScript's setTimeout 0 feature delaying the rendering of the page?

Bandcamp API sales data retrieval feature