I’m new to Three.js and I’m having trouble getting a tube to show up on the screen. I’m using a basic material to keep the lighting simple, but it’s not working. Can someone help me figure out why it’s not appearing?
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 trying with a texture on the standard material but I switched to basic material for simplification.