BJ Patel is an expert user of Umbraco. Always keen to share hints and tips on getting the best out of Umbraco.
Adding 3D Object
- Create a Cube Geometry :
BoxGeometry is a geometry class for a rectangular cuboid with a given 'width', 'height', and 'depth'. - Create a Material :
‘MeshBasicMaterial’ is type of material in three.js that is used to create simple material with color . There are six different colors used for each side. - Combine them into Mesh :
It creates a new mesh object by “THREE.Mesh” by combining a geometry and a material .Geometry variable holds the shape of the cube and Material variables holds the material apply to the cube .
By this variables we get a 3D object which is added to scene. - Add Cube to the Scene :
Means that you are adding the cube object to the Three.js scene. The cube object is likely a mesh created using THREE.Mesh class, representing a 3D geometric shape and material cube Once added to the scene, the cube will be rendered and displayed .
// Creating cube geometry, materials, and mesh
const geometry = new THREE.BoxGeometry( 1.3, 1.3 , 1.3 );
const material = [ new THREE.MeshStandardMaterial({ color: 0x00ff00 }),
new THREE.MeshStandardMaterial({ color: 0x00ffff }),
new THREE.MeshStandardMaterial({ color: 0x0000ff }),
new THREE.MeshStandardMaterial({ color: 0xffff00 }),
new THREE.MeshStandardMaterial({ color: 0xff00ff }),
new THREE.MeshStandardMaterial({ color: 0x00ffff })
];
const cube = new THREE.Mesh(geometry, material);
// Set the cube to cast shadows
cube.castShadow = true;
// Add the cube to the scene
scene.add(cube);
comments powered by Disqus
Join Our Community
Join Our Community Become a part of our developer community. Share your projects, get feedback, and collaborate with like-minded individuals.
Your contributions help us continue creating valuable content. Consider supporting us by sharing our content.
Junagadh, Gujarat
Latest Blog Posts