Having Difficulty Rendering Tube Shapes in Three.js

Having just started working with Three.js, I'm facing challenges in displaying a tube on the screen. Despite using a basic material to simplify lighting, the tube is not showing up as expected. Any assistance in troubleshooting this issue would be greatly appreciated!

const scene = new THREE.Scene()

var points = []
for (var i = 0; i<5; i++){
    points.push(new THREE.Vector3(0,0,2.5*(i/4)))
}
var   = new THREE.CatmullRomCurve3(points)

var tubeGeometry = new THREE.TubeGeometry(curve, 70, 10, 50, false);

var tubeMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
console.log(tubeMaterial)

// Create a mesh based on tubeGeometry and tubeMaterial
var tube = new THREE.Mesh(tubeGeometry, tubeMaterial);
console.log(tube)
// Add the tube into the scene
scene.add(tube);

/**
 * Sizes
 */
const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
}

var light = new THREE.HemisphereLight( 0xffffbb, 0x887979, 0.9);
scene.add( light );

const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height)
camera.position.set(0, 0, 10);
scene.add(camera)

/**
 * Renderer
 */
const renderer = new THREE.WebGLRenderer({
    canvas: canvas
})

renderer.setSize(sizes.width, sizes.height)
renderer.setClearColor(0x8FBCD4);

renderer.render(scene, camera)

Initially, I was attempting to use a texture with the standard material but decided to switch to a basic material for simplicity.

Answer №1

You're encountering a few issues in your code:

1. It looks like you forgot to create the canvas element:

const canvas = document.createElement("canvas");
document.body.appendChild(canvas);

2. There's a typo in this line of code:

var curve = new THREE.CatmullRomCurve3(points)

3. You seem to be incorrectly creating geometry using TubeGeometry, consider using the following approach instead:

const points = [];

for (let i = 0; i < 5; i++) {
  points.push(new THREE.Vector3(0, 0, 2.5 * (i / 4)));
}
const curve = new THREE.CatmullRomCurve3(points);

const tubeRadius = 0.5;
const radiusSegments = 10;
const closed = true;

const tubeGeometry = new THREE.TubeGeometry(
  curve,
  70,
  tubeRadius,
  radiusSegments,
  closed
);

const tubeMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });

const tube = new THREE.Mesh(tubeGeometry, tubeMaterial);

tube.rotation.x = 2;
tube.position.y = 1;

scene.add(tube);

4. Consider incorporating debugging tools such as OrbitControls or GUI for an easier development process.

npm install lil-gui

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import GUI from 'lil-gui'

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

Text Overlapping Issue in React Material UI Components

I am currently working on a React application using Material UI and facing an issue while implementing an entity update page. The task at hand is to display the existing values of the entity for the user to update. To achieve this, I have set the default v ...

Encountered an expression when expecting an assignment or function call in the jsreact codebase, triggering the no-unused-ex

router.js code snippet import React from 'react'; import { Route } from 'react-router-dom'; import CommentList from './containers/commentview'; const BaseRouter = () =>{ return ( <div> <Route exact= ...

Using JavaScript to retrieve and compare element values for a total sum

Given two arrays, the goal is to determine if any two numbers in the array add up to 9. The function should return either true or false. For example: array1 [1, 2, 4, 9] has no pair that sums up to 9, so it returns false array2 [1, 2, 4, 5] does have a ...

What causes the "500: Unknown web method" error when JavaScript tries to call a Page WebMethod?

I am encountering an issue with a method in CreateTicket.aspx.cs: [WebMethod()] public static string Categories() { var business = new CategoryBusiness(); var categories = business.ListRootCategories(); return categories.Json(); } Additiona ...

Replacing default hover behavior from an external library

Currently, I am utilizing a JS library that comes with a specific widget. Basically, I have the following list (I removed unnecessary DOM code): <li class="disabled"> When I hover over this list item, it turns into: <li class="disabled state-a ...

A guide on converting HTML and CSS to a PDF file using JavaScript

I'm facing a challenge where I need to create a custom quote in pdf using data retrieved in JavaScript and sent in HTML. However, the issue is that no library supports CSS for the PDF generation process. After some research, I came across HTML2CANVAS ...

HTML Tutorial: A Beginner's Guide to Invoking REST API

Hi there! I'm new to APIs and struggling to grasp the concept. The tutorials online seem more complex than necessary. Here's what I need help with: I want to create a basic webpage that allows me to search for information using the Pokemon API a ...

Error encountered in CasperJS due to modifications made using WinSCP

I am facing an issue with a casperjs script: var casper = require('casper').create(); console.log("casper create OK"); casper.start("https://my-ip/login_page.html", function() { console.log("Connection URL OK"); // set a waiting condi ...

What causes ngClick to stop working following $compile?

http://plnkr.co/edit/kL2uLPQu2vHHKIvRuLPp?p=preview Upon button click, the controller calls a service to compile HTML and inject it into the body. The compiled HTML (displaying "Hello World" from $scope.name) is referring to the scope of the controller, ...

What are some methods for utilizing the data received through this.props.history?

Whenever I need to navigate from one route to another using this.props.history.push("/"), I also want to pass along some extra data. For example: this.props.history.push('/postDetail', {data: item}). However, I am uncertain about where to define ...

Can Masonry.js content be perfectly centered?

I am currently experimenting with creating a layout consisting of one to four variable columns per page using the Masonry plugin. I have been impressed with how it functions so far. However, there is an aggravating gap that persists despite my best effort ...

Give GetElementsByClassName a shot

Hey, have you tried using js ref_doc_getelementsbyClassName? "I keep getting the error message 'Uncaught TypeError: Cannot set property 'value' of null' " Check out this HTML code snippet: <input type="text" cla ...

Ways to transfer the value of a JavaScript variable to a PHP variable

Similar Question: How can I transfer JavaScript variables to PHP? I am struggling to assign a JavaScript variable to a PHP variable. $msg = "<script>document.write(message)</script>"; $f = new FacebookPost; $f->message = $msg; Unfort ...

What is the solution for resolving AngularJS URL encoding?

Currently, my AngularJS app utilizes a component known as navbar to house the searchbar along with a search() function. $scope.search = function (keyword) { console.log(keyword); $state.go('main', { keyword: keyword }, ...

An issue occurred when attempting to retrieve JSON data using an Ajax

After making an ajax call below, I encountered an error that left me puzzled. The variable 'response' in the success function is structured as follows: {"status": "complete", "username": "test", "error": "0", "message": ""} Surprisingly, when I ...

A more concise approach to crafting ajax requests

Lately, I've been immersed in building various web applications using php, mysql, jquery, and bootstrap. Now, I'm faced with a common issue - how to streamline my ajax queries for posting data? Writing code that is not only functional but also a ...

Utilize Bootstrap DataTable Sparkline to extract information from a comma-delimited string rather than an array

I have successfully implemented a Bootstrap DataTable component in my Asp.net Core MVC App to display data from my database. However, I am facing a challenge when trying to add a sparkline to a column. The sparkline component requires an array of values, b ...

"Adding a class with jQuery on a selected tab and removing it when another tab is clicked

I have 3 different tabs named Monthly, Bi-monthly, and Weekly. The user can set one of these as their default payroll period, causing that tab to become active. I was able to achieve this functionality by utilizing the following code within the <script& ...

How can I use jQuery to switch classes or activate a click event on the most recently clicked element?

Within my <ul></ul>, there are 4 <li> elements. <ul class="wcarchive-terms-list"> <li class="wcarchive-term wcarchive-term-parent woof_term_224"> <label class="wcarchive-term-label"> <span cla ...

Steps for invoking the next() function within the beforeRouterEnter guard

I've been grappling with this issue for countless hours now. I'm currently using Vue3 My goal is to implement a beforeRouterEnter guard in order to check the user's role upon login and direct them to the appropriate route accordingly. Once ...