Expanding the Girth of a Curved Trajectory in Three.js

Question

Expanding the Girth of a Curved Trajectory in Three.js

I successfully crafted a racetrack-inspired curve using three.js by employing the given code snippet:

var path = new THREE.Path();

    path.moveTo(150,50);
    path.lineTo(150,150);
    path.quadraticCurveTo(150,175,100,175);
    path.quadraticCurveTo(50,175,50,150);
    path.lineTo(50,50);
    path.quadraticCurveTo(50,25,100,25);
    path.quadraticCurveTo(150,25,150,50);

    var pathPoints = path.getPoints();

    var pathGeometry = new THREE.BufferGeometry().setFromPoints(pathPoints);
    var pathMaterial = new THREE.LineBasicMaterial({color:0xFF1493});

    var raceTrack = new THREE.Line(pathGeometry,pathMaterial);
    scene.add(raceTrack);

}

Presently, the track appears as a single line. I am curious to know if there's a way to transform this line into a wider geometry (still in 2D) so that I can apply a texture to it.

The current rendition of the path resembles something like this:

I aim to achieve a similar shape but with an increased width for the line:

javascript path three.js curve

Answer 1

Answer №1

Introducing the new R91, three.js has implemented support for triangulated lines. This innovative method allows for line widths greater than 1px to be achieved reliably.

Check out a demo here:

In this example, textures have not been used, but uv-coordinates are generated for the underlying geometry.

Answer 2

Introducing the new R91, three.js has implemented support for triangulated lines. This innovative method allows for line widths greater than 1px to be achieved reliably.

Check out a demo here:

In this example, textures have not been used, but uv-coordinates are generated for the underlying geometry.

Answer 3

Answer №2

There is no straightforward way to achieve this with regular Line objects.

If you're looking to create a custom race-track, here are a couple of options you can consider:

Create the entire "race-track" as a geometry, including both the inner and outer lines. This method allows for flexibility in defining different widths at various points, controlling bends, turns, and more. Here's a simple example:

// Code snippet generating race-track geometry
const shape = new THREE.Shape();

// Define track outline
shape.moveTo(150, 50);
// Add more points and curves...
...

// Create inner track shape
const innerShape = new THREE.Path();
// Add inner track points and curves...
...

// Combine shapes to form race-track mesh
const raceTrack = new THREE.Mesh(
  new THREE.ShapeGeometry(shape),
  new THREE.MeshBasicMaterial({ color: 0xff1493 })
);

You can view the full code example on CodePen: https://codepen.io/usefulthink/pen/eMBgmE

Alternatively, explore specialized fat-lines implementations like the ones showcased in these resources: Three.js Fat Lines Example or the MeshLine library available on GitHub: GitHub - THREE.MeshLine. While these may not perfectly fit your needs, they offer alternative approaches to creating complex line geometries.

Answer 4

There is no straightforward way to achieve this with regular Line objects.

If you're looking to create a custom race-track, here are a couple of options you can consider:

Create the entire "race-track" as a geometry, including both the inner and outer lines. This method allows for flexibility in defining different widths at various points, controlling bends, turns, and more. Here's a simple example:

// Code snippet generating race-track geometry
const shape = new THREE.Shape();

// Define track outline
shape.moveTo(150, 50);
// Add more points and curves...
...

// Create inner track shape
const innerShape = new THREE.Path();
// Add inner track points and curves...
...

// Combine shapes to form race-track mesh
const raceTrack = new THREE.Mesh(
  new THREE.ShapeGeometry(shape),
  new THREE.MeshBasicMaterial({ color: 0xff1493 })
);

You can view the full code example on CodePen: https://codepen.io/usefulthink/pen/eMBgmE

Alternatively, explore specialized fat-lines implementations like the ones showcased in these resources: Three.js Fat Lines Example or the MeshLine library available on GitHub: GitHub - THREE.MeshLine. While these may not perfectly fit your needs, they offer alternative approaches to creating complex line geometries.

Expanding the Girth of a Curved Trajectory in Three.js

Answer №1

Answer №2

Similar questions

No Response from Ajax Request

Retrieving information from a public Google spreadsheet using client-side JavaScript

Implementing dynamic title rendering based on image in vue.js

Sharing React components in projects

Summernote - When validating text, it is shown as raw HTML

Rect cannot be resized using mouse events

When trying to add a react-bootstrap modal, the react app crashes abruptly

Saving information in node.js

Unable to reach redux actions through props while using react router

I am looking to apply the Normal texture to the Fbx model, but I am encountering issues with the normal not functioning

Using Vue.js, separate the values that are separated by commas

Stripping /r /n tags from TinyMCE content stored in MySQL

Enhancing SEO Performance with React Server Components

What strategies can be used to scale up a website's images in proportion to their page views or traffic?

The `process` variable is not recognized in a Vue/TypeScript component

Organizing and managing one-on-one table tennis matches using a customized data structure. Leveraging the power of Vue, JavaScript, and

Showing error messages to users with Angular and Firebase

Using maxCDN to deliver static files within a Node application

How to retrieve a string from a regular expression in Javascript without [Object object] output

Monitor the Ajax for any updates in the database and trigger the code accordingly