Creating a textured path using Threejs

Having trouble drawing a path in my 3D world, as the line class is not helpful. Can anyone offer assistance? See this image

I've updated my question

  1. I want to draw a path and fill it with texture.

    var SUBDIVISIONS = 20;
    geometry = new THREE.Geometry();
    var curve = new THREE.QuadraticBezierCurve3();
    curve.v0 = new THREE.Vector3(0, 0, 110);
    curve.v1 = new THREE.Vector3(0, 200, 110);
    curve.v2 = new THREE.Vector3(200, 200, 110);
    for (j = 0; j < SUBDIVISIONS; j++) {
        geometry.vertices.push(curve.getPoint(j / SUBDIVISIONS))
    }
    
    material = new THREE.LineBasicMaterial({ color: 0xff0000, linewidth: 5 });
    line = new THREE.Line(geometry, material);
    scene.add(line);
    

This method has two issues: 1. Linewidth not supported on Windows, 2. LineBasicMaterial does not support textures

  1. After searching online, I came across the Three.MeshLine class. The linewidth works fine, but there are issues with texture mapping. Here's the code for loading a texture:
    var loader = new THREE.TextureLoader();
    loader.load('assets/images.png', function(texture) {
        strokeTexture = texture;
        strokeTexture.wrapS = strokeTexture.wrapT = THREE.RepeatWrapping;
        strokeTexture.repeat.set(5, 1);
        strokeTexture.needsUpdate = true;
        init()
    });
    Despite adjusting the texture and MeshLineMaterial settings, the result is not what I expected. See image:result image

Answer №1

If you're interested, check out the library at https://github.com/spite/THREE.MeshLine - it provides a solution for mesh-based lines. Also, be sure to explore the related resources on that page for further understanding.

Alternatively, consider creating a shape from your line using the THREE.ShapeGeometry class as another approach.

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

What causes Spyscroll to be impacted by Collapse in Bootstrap 5?

I'm utilizing bootstrap 5 as my CSS framework and currently working on a significant section. Therefore, I chose to structure it with one row containing four columns, hiding the others using Bootstrap's collapse feature. However, because this is ...

Activate inactive html button using javascript

One of the challenges I am facing is testing forms where the client specifically requested that the submit button be disabled by default. I have been exploring ways to dynamically replace the disabled="" attribute with enabled using JavaScript within a s ...

Issues have been raised with IE11's refusal to accept string(variable) as a parameter for the localStorage

Why is it that Internet Explorer does not recognize a string variable as a parameter for the setItem method, even though it works fine in Chrome? For example, in IE: This code snippet works: var itemName = 'anyname'; localStorage.setItem(itemN ...

Unexpected Issue Encountered in JQuery Integration

I recently added jQuery to my HTML file: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> After that, I included a link to my JavaScript file: <script src="public/javascripts/new_javascript.js" type ...

Incorporating role-specific paths in Vue Router using Pinia

Is it possible to load one of three potential routes based on a user's role in my pinia store? The issue I'm currently facing is that the pinia store doesn't appear to be initialized before the router is set, resulting in the error Uncaught ...

The proper method to retrieve the parent function parameter within an inner JavaScript callback function

Consider the code snippet below. var exec = require('child_process').exec; var extraInfo = {'test':1,'passing':'test'}; runWithData(extraInfo); function runWithData(passedData) { exec('/Users/test/Deskto ...

Showing changes in state in real-time using ReactJS: A quick guide

Hello, I am currently facing an issue while trying to add a comment and display it immediately on the DOM. Whenever I type any word in the form box, it does not appear in the box. Additionally, pressing the enter key does not trigger a POST request. Could ...

Attempting to trigger the timer to begin counting down upon accessing the webpage

Take a look at this example I put together in a fiddle: https://jsfiddle.net/r5yj99bs/1/ I'm aiming to kickstart as soon as the page loads, while still providing the option to pause/resume. Is there a way to show the remaining time as '5 minute ...

Issue: React-Firebase-Hooks failing to retrieve dataHaving trouble with React-F

I've been utilizing the React-Firebase-Hooks package in my project, but I'm encountering some difficulties with its usage. In the code snippet below, the user.data().username is displayed correctly. However, when I try to use it within useState, ...

Objects and strings cannot be inserted into a JavaScript array

For hours, I've been attempting to troubleshoot this code. Currently, it successfully finds the number of anchors, and I have an array that is of undetermined size. Within the for loop, it retrieves the anchor and extracts the .href. I've confirm ...

Strange transparency glitch in Three.js

I've run into a perplexing issue while creating a 3D model for my website. One of the character's arms appears to be transparent, but only partially - you can see inside it. Here's what I'm talking about: Transparent arm. I've trie ...

Online Adventure - Saving Conversations

I am interested in developing an RPG using JavaScript. The game will involve a significant amount of dialog. While I have knowledge of PHP and MySQL, I am new to XML. My queries are: Would it be more efficient to store the dialog in a MySQL database and ...

Ways to incorporate vector .svg images into a D3js tree diagram

var treeData = [ { "name": "Top Level", "parent": "null", "remark":"yes", "children": [ { "name": "Level 2: A", "parent": "Top Level", "remark":"yes", "children": [ { "name": "So ...

Unraveling the mysteries of webpack configuration

import * as webpack from 'webpack'; ... transforms.webpackConfiguration = (config: webpack.Configuration) => { patchWebpackConfig(config, options); While reviewing code within an Angular project, I came across the snippet above. One part ...

What is the best way to combine an array of objects into a single object in typescript?

Looking for some help with converting an array of objects into a single object using TypeScript. Here's the structure of the array: myArray = [ {itemOneKey: 'itemOneValue', itemTwoKey: 'itemTwoValue'}, {itemThreeKey: ' ...

Creating uniform line lengths with a ruler utilizing Fabric.js

I have a div that scrolls horizontally and contains a ruler div and a canvas where I draw horizontal lines of varying lengths. When drawing the lines, I want to ensure they are accurately measured against the ruler using JavaScript and CSS: var canvas = ...

What is the best way to split an AJAX response into different variables and effectively retrieve each one of them?

When using AJAX to fetch data from a database and display it in a text box, most examples found online only show how to display the AJAX response in one text box. But what if we need to separate multiple PHP variables retrieved from the AJAX response and d ...

Add a new element to the page with a smooth fade-in animation using jQuery

var content = "<div id='blah'>Hello stuff here</div>" $("#mycontent").append(content).fadeIn(999); Unfortunately, the desired effect is not achieved with this code. I am trying to create a sleek animation when adding new content. ...

What are the steps to take in order to successfully deploy an Express server on GitHub Pages?

I heard that it's possible to host an Express server on GitHub Pages, but I'm not sure how to do it. Is the process similar to deploying a regular repository on GitHub Pages? ...

Start by retrieving information and then sending properties to a different component

I have been struggling with this issue for more than a week now. Despite thorough reading of the Next.js documentation and extensive online research, I still can't figure out what's wrong. It seems like I must be overlooking something important, ...