Tips for utilizing a Three.js curve to guide the movement of a mesh along a specified path

Question

Tips for utilizing a Three.js curve to guide the movement of a mesh along a specified path

Developing an animation, currently at this stage:

http://jsfiddle.net/CoderX99/66b3j9wa/1/

Please avoid delving into the code, it's written in CoffeeScript and may not be beneficial for your mental well-being.

Imagine a "nordic" landscape with ships sailing by and cars moving along. The yellow sphere in the top left symbolizes a car, while the winding roads are represented by curves.

The yellow sphere is supposed to follow these CatmullRomCurve3s precisely.

Let's work with a closed curve structure, which looks like this:

curveRoadNo2 = new THREE.CatmullRomCurve3([
  new THREE.Vector3( 15, roadHeight, 11 ),
  new THREE.Vector3( 12, roadHeight, 12 ),
  ...
] )

The figures are randomly inputted.

curveRoadNo2.closed = true
geometry = new THREE.Geometry()
geometry.vertices = curveRoadNo2.getPoints( 200 )
material = new THREE.LineBasicMaterial( { color : 0xa9c41e } )
curveObject = new THREE.Line( geometry, material )
scene.add( curveObject )

I would like to animate using getPoint(t) and getTangent(t), but I am unsure how to proceed.

t = 0
animate = ->
  requestAnimationFrame animate

  t += 0.1
  vehicle.position = curveRoadNo2.getPoint(t)

  # More animation steps can be added here...

  renderer.render scene, camera
animate()

Currently, the vehicle remains stationary. While I searched for solutions, they seemed overly complex and lengthy.

Suggestions or ideas in JavaScript are also appreciated.

javascript three.js coffeescript

Answer 1

Answer №1

It is advisable to create a separate vector for defining the position.

  animate = function() {
    requestAnimationFrame(animate);
    t += 0.001;
    var pos = curveRoadNo2.getPoint(t);
    vehicle.position.set(pos.x, pos.y, pos.z);
    // if 0 < t < 7
    //     v = t * 0.01
    //     ship.rotation.y += 26 * v ** 0.96 * Math.PI / 180
    //     ship.position.x += -6 * v
    //     ship.position.z +=  12 * v ** 1.3 
    return renderer.render(scene, camera);
  };

I found that increasing t by 0.1 was too fast, so I changed it to 0.001. When assigning positions to Object3D or Mesh objects, remember to use:

mesh.position.set(x, y, z);
object.position.set(newPos.x, newPos.y, newPos.z);

This method also applies to rotations, ensuring better organization and structure of your code.

Following this approach will lead to more effective coding practices.

Answer 2

It is advisable to create a separate vector for defining the position.

  animate = function() {
    requestAnimationFrame(animate);
    t += 0.001;
    var pos = curveRoadNo2.getPoint(t);
    vehicle.position.set(pos.x, pos.y, pos.z);
    // if 0 < t < 7
    //     v = t * 0.01
    //     ship.rotation.y += 26 * v ** 0.96 * Math.PI / 180
    //     ship.position.x += -6 * v
    //     ship.position.z +=  12 * v ** 1.3 
    return renderer.render(scene, camera);
  };

I found that increasing t by 0.1 was too fast, so I changed it to 0.001. When assigning positions to Object3D or Mesh objects, remember to use:

mesh.position.set(x, y, z);
object.position.set(newPos.x, newPos.y, newPos.z);

This method also applies to rotations, ensuring better organization and structure of your code.

Following this approach will lead to more effective coding practices.

Tips for utilizing a Three.js curve to guide the movement of a mesh along a specified path

Answer №1

Similar questions

Initializing the $(this) variable prior to the function declaration

Dynamic water filling effect with SVG

What could be the reason the forEachRow function is not impacting the second or subsequent pages within the dhtmlx grid?

Is Selenium suitable for testing single page JavaScript applications?

Synchronize information between mongoDB and firebase bidirectionally

Running Handlebars using NodeJS can sometimes result in a "Cannot find module './parser'" error

How to include a file within another file in Node.js

What is the best way to invoke a Rest API within a Vue component?

Eliminating duplicate data submissions with jQuery Ajax

Storing JSON data retrieved from a fetch API request in a JavaScript global variable - a beginner's guide

Utilize JavaScript to parse HTML content retrieved through AJAX requests

Search for the booking object based on the user in MongoDB

What causes Express Async Errors to produce unexpected outcomes?

Utilizing the Filter function to extract both the content contained within a class and the class itself

Having trouble with my bootstrap slider carousel - it's just not cooperating

Why won't setInterval function properly with innerHTML?

Monitor for the specific parameter in the incoming GET request

Is it necessary for JavaScript functions to be stored in a separate file in order to be invoked?

Adding CSS styling to a particular component within your Vue application using Vuetify JS

Retrieve the most recently added item in the Material-ui Autocomplete component