THREEJS Geometries
“Mastering Three.js Geometries: A Guide to Creating Stunning 3D Web Graphics”
1. Title
2. Description
3. Snippet
4. Explanation
5. Full code
6. Output
7. Summary
8. Next and Previous Blog
2. Description
In this comprehensive blog post, we delve into the world of Three.js geometries, unveiling the secrets behind crafting captivating 3D web graphics. Explore a diverse range of geometries, from basic shapes to complex structures, and learn how to manipulate and customize them to suit your creative vision. Discover essential techniques for applying materials, textures, and lighting effects to breathe life into your creations. With step-by-step tutorials and real-world examples, this guide empowers web developers to unlock the full potential of Three.js geometries, enabling them to design visually immersive and interactive 3D experiences for the web. Step into the realm of 3D web graphics mastery with Three.js geometries!
list of different built-in geometries available in Three.js:
- BoxGeometry: A rectangular box with customizable width, height, and depth.
- SphereGeometry: A sphere with adjustable radius and optional segment and ring parameters for smoothness.
- CylinderGeometry: A cylinder with controllable radius, height, and radial segments.
- ConeGeometry: A cone with adjustable radius, height, and radial segments.
- PlaneGeometry: A flat plane with customizable width and height.
- TorusGeometry: A torus (doughnut-shaped) with control over its radius and tube diameter.
- OctahedronGeometry: An octahedron (eight-sided polyhedron) with adjustable size.
- TetrahedronGeometry: A tetrahedron (four-sided polyhedron) with adjustable size.
- DodecahedronGeometry: A dodecahedron (twelve-sided polyhedron) with customizable size.
- IcosahedronGeometry: An icosahedron (twenty-sided polyhedron) with adjustable size.
- TubeGeometry: A tube or pipe shape created from a path curve.
- LatheGeometry: A 3D shape created by revolving a 2D shape around a central axis.
- RingGeometry: A flat ring with customizable inner and outer radii.
- TorusKnotGeometry: A torus knot, a complex shape formed by twisting and looping a torus.
These built-in geometries provide a solid foundation for creating diverse 3D shapes and structures in Three.js. Developers can easily manipulate and combine these geometries to craft intricate 3D scenes and interactive web graphics.
we will see a few of them
3. Snippet and 4. Explanation
- BoxGeometry: A rectangular box with customizable width, height, and depth.
// Create a BoxGeometry
const boxGeometry = new THREE.BoxGeometry(1, 1, 1);
// Create a material
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// Create a mesh with the geometry and material
const cube = new THREE.Mesh(boxGeometry, material);
2. SphereGeometry: A sphere with an adjustable radius and optional segment and ring parameters for smoothness.
// Create a SphereGeometry
const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);
// Create a material
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
// Create a mesh with the geometry and material
const sphere = new THREE.Mesh(sphereGeometry, material);
3. CylinderGeometry: A cylinder with controllable radius, height, and radial segments.
// Create a CylinderGeometry
const cylinderGeometry = new THREE.CylinderGeometry(1, 1, 2, 32);
// Create a material
const material = new THREE.MeshBasicMaterial({ color: 0x0000ff });
// Create a mesh with the geometry and material
const cylinder = new THREE.Mesh(cylinderGeometry, material);
4. PlaneGeometry: A flat plane with customizable width and height.
// Create a PlaneGeometry
const planeGeometry = new THREE.PlaneGeometry(2, 2);
// Create a material
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, side: THREE.DoubleSide });
// Create a mesh with the geometry and material
const plane = new THREE.Mesh(planeGeometry, material);
5. TorusKnotGeometry: A torus knot, a complex shape formed by twisting and looping a torus.
// Create a TorusKnotGeometry
const torusKnotGeometry = new THREE.TorusKnotGeometry(1, 0.4, 64, 16);
// Create a material
const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
// Create a mesh with the geometry and material
const torusKnot = new THREE.Mesh(torusKnotGeometry, material);
5. Full code
<html lang="en">
<head>
<title>three.js - Boilerplate</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
<style>
body {
background-color: grey
}
html,
body {
margin: 0;
height: 100%;
}
#canvas {
width: 100%;
height: 100%;
display: block;
color: rgb(40, 63, 141);
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="importmap">
{
"imports": {
"three": "../threeJS/build/three.module.js"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from '../threeJS/examples/jsm/controls/OrbitControls.js';
import * as DAT from '../threeJS/newadded/DatGUI.js';
import { Stats } from "../threeJS/newadded/Stats.js";
//---gui---//
var gui;
gui = new DAT.GUI();
var lightGui = false;
var statsGui = true;
gui.close();
// three var
var canvas, renderer, scene, camera, controls, stats;
function init() {
canvas = document.getElementById('canvas');
renderer = new THREE.WebGLRenderer({ canvas });
renderer.setSize(window.innerWidth, window.innerHeight);
stats = Stats();
statsGui && document.body.appendChild(stats.dom);
scene = new THREE.Scene();
scene.background = new THREE.Color('black');
scene.fog = new THREE.Fog(0xffffff, 0, 750);
const axesHelper = new THREE.AxesHelper(500);
scene.add(axesHelper);
const ambientLight = new THREE.AmbientLight(0xffffff, 0.7)
scene.add(ambientLight)
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.y = 10;
camera.position.z = 25;
controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.6;
controls.screenSpacePanning = false;
controls.maxPolarAngle = Math.PI / 2.02;
controls.minDistance = 10;
controls.maxDistance = 1000;
controls.update();
const floorGeometry = new THREE.PlaneGeometry(500, 500);
const floorMaterial = new THREE.MeshStandardMaterial({
color: '#777777',
metalness: 0.2,
roughness: 0.4,
envMapIntensity: 0.5,
side: THREE.DoubleSide
});
const floor = new THREE.Mesh(floorGeometry, floorMaterial)
floor.receiveShadow = true
floor.rotation.x = - Math.PI * 0.5
floor.position.set(0, 0, 0)
scene.add(floor)
// Create a TorusGeometry
const torusGeometry = new THREE.TorusGeometry(1, 0.4, 32, 64);
// Create a material
const material = new THREE.MeshBasicMaterial({ color: 'yellow' });
// Create a mesh with the geometry and material
const torus = new THREE.Mesh(torusGeometry, material);
torus.position.set(0, 2, 0)
scene.add(torus);
window.addEventListener('resize', function () {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
}
function animate() {
requestAnimationFrame(animate)
renderer.render(scene, camera);
stats.update();
}
init()
animate();
</script>
</body>
</html>6. Output
7. Summary
The blog will cover essential geometries in Three.js, including BoxGeometry, SphereGeometry, CylinderGeometry, PlaneGeometry, and TorusKnotGeometry. Each code snippet demonstrates how to create and render the respective geometries with basic materials. The blog aims to provide beginners with a practical understanding of Three.js geometry creation for 3D web graphics.
Previous Blog
previous blog: THREEJS Fullscreen and resizing
