🌟 3D Adventure
← Back to JavaScript

Three.js 3D Graphics Adventure! 🚀

Create amazing 3D worlds, animations, and interactive experiences with JavaScript!

🔺
🔷
⭐
🎯

🌟 Welcome to 3D World!

Three.js is like a magic paintbrush for creating 3D worlds on websites! Just like how we use crayons to draw on paper, we use Three.js to create 3D objects that we can see and move around.

What do we need for 3D magic? 🎭

  • Scene: Like a stage for our 3D show
  • Camera: Our eyes to see the 3D world
  • Renderer: The magic that draws everything
// Create our 3D world ingredients const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, 400/400, 0.1, 1000); const renderer = new THREE.WebGLRenderer(); // Set up our magic drawing area renderer.setSize(400, 400);

Think of it like setting up a puppet show - we need the stage (scene), someone to watch (camera), and the person operating the puppets (renderer)!

🎮 Try This:

Look at your first 3D scene! The spinning cube shows you're ready for 3D adventures!

🔷 Building 3D Shapes

In 3D, we can create amazing shapes called "geometries". It's like having magical building blocks!

// Create different 3D shapes const cubeGeometry = new THREE.BoxGeometry(1, 1, 1); const sphereGeometry = new THREE.SphereGeometry(0.7, 32, 32); const cylinderGeometry = new THREE.CylinderGeometry(0.5, 0.5, 1, 32); // Make them visible with materials const material = new THREE.MeshBasicMaterial({color: 0x00ff00}); const cube = new THREE.Mesh(cubeGeometry, material);

Cool 3D Shapes You Can Make:

  • 📦 Cube: Like dice or boxes
  • ⚽ Sphere: Like balls or planets
  • 🥤 Cylinder: Like cans or tubes
  • 🔺 Pyramid: Like Egyptian pyramids

🎨 Colors & Materials

Materials are like the "skin" of our 3D objects. We can make them shiny like metal, colorful like rainbows, or even make them glow!

// Different types of materials const basicMaterial = new THREE.MeshBasicMaterial({color: 0xff0000}); const lambertMaterial = new THREE.MeshLambertMaterial({color: 0x00ff00}); const phongMaterial = new THREE.MeshPhongMaterial({ color: 0x0000ff, shininess: 100 }); // Add some light to see shiny materials const light = new THREE.DirectionalLight(0xffffff, 1); scene.add(light);

Types of Materials:

  • 🎯 Basic: Simple, flat colors
  • 🌙 Lambert: Responds to light naturally
  • ✨ Phong: Shiny and reflective

🎬 Making Things Move

Animation brings our 3D world to life! We can make objects spin, bounce, grow, and dance around the screen!

// Animation loop - this runs many times per second function animate() { requestAnimationFrame(animate); // Make the cube spin cube.rotation.x += 0.01; cube.rotation.y += 0.01; // Make it bounce up and down cube.position.y = Math.sin(Date.now() * 0.005) * 0.5; renderer.render(scene, camera); } animate(); // Start the animation!

Cool Animation Ideas:

  • 🌀 Rotation: Spinning like a top
  • ⬆️ Position: Moving around in space
  • 📏 Scale: Growing bigger or smaller
  • 🌈 Color: Changing colors over time

🖱️ Click and Drag Fun

Make your 3D world interactive! Users can click on objects, drag them around, and even change them with keyboard presses!

// Detect mouse clicks on 3D objects const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(); canvas.addEventListener('click', (event) => { // Convert mouse position to 3D coordinates mouse.x = (event.clientX / canvas.width) * 2 - 1; mouse.y = -(event.clientY / canvas.height) * 2 + 1; // Check what we clicked raycaster.setFromCamera(mouse, camera); const intersects = raycaster.intersectObjects(scene.children); if (intersects.length > 0) { // We clicked something! Make it bigger intersects[0].object.scale.multiplyScalar(1.2); } });

Interactive Ideas:

  • 👆 Click: Change colors or size
  • 🖱️ Drag: Move objects around
  • ⌨️ Keyboard: Control with arrow keys
  • 📱 Touch: Works on phones too!

🎮 Try This:

Click on the 3D objects to make them grow and change colors!

🌍 Building a 3D World

Now let's put everything together and build an amazing 3D scene with multiple objects, lights, and effects!

// Create a complete 3D world const scene = new THREE.Scene(); scene.background = new THREE.Color(0x87CEEB); // Sky blue // Add multiple lights const ambientLight = new THREE.AmbientLight(0x404040, 0.6); const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); directionalLight.position.set(10, 10, 5); // Create a ground plane const groundGeometry = new THREE.PlaneGeometry(20, 20); const groundMaterial = new THREE.MeshLambertMaterial({color: 0x90EE90}); const ground = new THREE.Mesh(groundGeometry, groundMaterial); ground.rotation.x = -Math.PI / 2; scene.add(ambientLight, directionalLight, ground);

Your 3D World Includes:

  • 🌅 Background: Beautiful sky
  • 💡 Lighting: Realistic shadows
  • 🏔️ Ground: Surface to stand on
  • 🏠 Objects: Buildings and decorations

🎓 3D Graphics Vocabulary

Scene
The 3D world where all objects live, like a stage for a play
Camera
Your viewpoint into the 3D world, like your eyes
Renderer
The magical painter that draws the 3D world on your screen
Geometry
The shape of 3D objects, like cubes, spheres, or pyramids
Material
The "skin" of objects - their color, shininess, and texture
Mesh
A geometry + material combined to make a visible 3D object