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.