Texture | www.techtalks.myglobalcenter.com

Creating texture and path on which the cube will move

Create Texture on the cube :
This code uses Three.js to create a textured cube from 'images.jpeg'.The cube is added to a scene where it can cast shadows.
Creating path on which cube will move :

This code creates a 3D path from a set of points and visualizes it as a red line in a Three.js scene. It also ensures that any mesh within a cube can cast shadows. This setup is useful for showing paths or animating objects along a specific path in a 3D environment.

// Texture loading and material setup
 const textureLoader = new THREE.TextureLoader();
 const texture = textureLoader.load('images.jpeg');
 const texturedMaterial = new THREE.MeshStandardMaterial({ map: texture });
 const basicMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });


 const cubegeometry = new THREE.BoxGeometry( 1.3, 1.3 , 1.3 );
 const cube = new THREE.Mesh(cubegeometry, texturedMaterial);
 cube.castShadow = true;
 scene.add(cube);


// Create a 3D line with given points
 const curve = new THREE.CatmullRomCurve3( [
	new THREE.Vector3( -10, 0, 10 ),
	new THREE.Vector3( -5, 5, 5 ),
	new THREE.Vector3( 0, 0, 0 ),
	new THREE.Vector3( 5, -5, 5 ),
	new THREE.Vector3( 10, 0, 10 )
 ] );

 const points = curve.getPoints( 50 );

// Enable shadow casting
 cube.traverse(function(node){
  if(node.isMesh)
  node.castShadow = true;
 });

const path = new THREE.CatmullRomCurve3(points);

// Create a geometry from the path points
const pathGeometry = new THREE.BufferGeometry().setFromPoints(path.getPoints(50));
const pathMaterial = new THREE.LineBasicMaterial({color: 0xff0000});
const pathObject = new THREE.Line(pathGeometry , pathMaterial);
scene.add(pathObject);

Return back to three.js-link page