Search for a command to run...
I focus on the long-term foundations of computer science, software engineering, and emerging technologies.covering computer science, AI, semiconductors, quantum computing, and future engineering.
No comments yet. Be the first to comment.
The content covers the three basics of HTML/CSS/JS/TS, modular development, mainstream frameworks (Vue, React, Angular, Svelte), build tools, browser plug-in development, Node.js backend practice, Next.js/Nest.js and other popular technologies.
Deno, as a modern alternative to Node.js, offers numerous improvements and innovations, particularly in security, module systems, and developer experience. Although still in development, Deno is a com
Progressive Web Apps (PWAs) utilize offline storage strategies to provide an offline experience, enabling access to some content even when the network is unavailable. The two primary offline storage t
Deno, as a modern alternative to Node.js, offers numerous improvements and innovations, particularly in security, module systems, and developer experience. Although still in development, Deno is a com
React Query is a powerful state management library designed for handling data fetching, caching, and updating, particularly suited for API interactions. It offers advanced features such as automatic caching, offline state management, data expiration,...
Generics In TypeScript, generics are a powerful tool that allow us to write reusable components capable of adapting to multiple types. 1. Generic Constraints Generics can be constrained to a specific type or interface, ensuring that the types passed ...
WebGL (Web Graphics Library) is a JavaScript API that enables hardware-accelerated 3D graphics rendering in any compatible web browser without the need for plugins. Based on the OpenGL standard, it integrates directly with HTML5’s Canvas element. WebGL allows developers to create complex 3D visual effects on web pages.
Three.js is a popular JavaScript library that encapsulates the complexity of WebGL, providing a more user-friendly interface for creating 3D content. It simplifies low-level WebGL tasks such as vertex buffer management, shader handling, and texture loading, allowing developers to focus on building 3D scenes and interactions.
<!DOCTYPE html>
<html>
<head>
<title>Three.js Scene</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r137/three.min.js"></script>
<script>
// JavaScript code will go here
</script>
</body>
</html>
This includes the Three.js library via a CDN link.
const scene = new THREE.Scene(); // Create a scene
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); // Create a perspective camera
const renderer = new THREE.WebGLRenderer(); // Create a renderer
renderer.setSize(window.innerWidth, window.innerHeight); // Set renderer size
document.body.appendChild(renderer.domElement); // Add renderer output to the page
The Scene is a container for all 3D objects, the Camera defines the viewpoint of the 3D world, and the Renderer is responsible for rendering the scene to the screen.
const geometry = new THREE.BoxGeometry(1, 1, 1); // Create a cube geometry
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // Create a basic material, colored green
const cube = new THREE.Mesh(geometry, material); // Create a mesh combining geometry and material
scene.add(cube); // Add to the scene
This creates a basic cube mesh object.
function animate() {
requestAnimationFrame(animate); // Use requestAnimationFrame for per-frame updates
cube.rotation.x += 0.01; // Update cube rotation
cube.rotation.y += 0.01;
renderer.render(scene, camera); // Render the scene
}
animate(); // Start the animation
The animation loop uses requestAnimationFrame to update the cube’s rotation and re-render the scene each frame.
Three.js supports various light sources and custom shaders, enabling complex lighting effects and custom surface appearances for 3D objects.
Interactivity with 3D objects, such as dragging, scaling, or rotating, can be implemented by listening to mouse and touch events.
Textures can be added to 3D objects by loading image files, enhancing visual realism.
Three.js supports loading external 3D model files in formats like .obj, .gltf, and others.
THREE.AnimationMixer: Used to create complex animation sequences by controlling 3D object properties via keyframes.
THREE.KeyframeTrack: Defines property values at specific time points.
THREE.AnimationClip: Combines multiple keyframe tracks into a complete animation segment.
Three.js provides camera controllers like OrbitControls and FirstPersonControls, facilitating user-controlled panning, rotation, and zooming in 3D space.
THREE.PointLight, THREE.DirectionalLight, THREE.SpotLight, and THREE.AmbientLight represent point lights, directional lights, spotlights, and ambient lights, respectively.
THREE.LightShadow enables shadow effects for light sources.
THREE.ParticleSystem and THREE.Points create particle effects like smoke, sparks, or raindrops.
Combined with THREE.Geometry and THREE.PointsMaterial, particle shapes and appearances can be customized.
THREE.TextureLoader: Loads texture images.
THREE.CubeTextureLoader: Loads cube maps, commonly used for environment mapping.
THREE.VideoTexture: Uses video as a texture for 3D objects.
In addition to basic geometries (e.g., BoxGeometry, SphereGeometry), Three.js supports creating complex shapes like toruses, cylinders, and cones. The THREE.Geometry.merge() method allows combining multiple geometries.
Third-party libraries like Cannon.js or Ammo.js can integrate physics simulations (e.g., collision detection, gravity) into Three.js scenes.
Three.js supports GLSL (OpenGL Shading Language) shaders, allowing developers to write custom vertex and fragment shaders for complex lighting and surface effects.
For virtual reality (VR) and augmented reality (AR), Three.js provides WebVRManager and WebXRManager to create immersive experiences on compatible devices.
Here’s a complete example of a 3D cube application using Three.js, including scene setup, camera, renderer, geometry, material, and animation loop:
<!DOCTYPE html>
<html>
<head>
<title>Three.js Cube Example</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r137/three.min.js"></script>
<script>
// Create scene
const scene = new THREE.Scene();
// Create camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// Create renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Create cube
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// Animation loop
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
Code Breakdown:
Include Three.js Library: The latest Three.js version (v0.137.0) is included via CDN.
Create Scene, Camera, and Renderer:
THREE.Scene: The container for all 3D objects.
THREE.PerspectiveCamera: Creates a perspective camera with parameters for field of view, aspect ratio, near clipping plane, and far clipping plane.
THREE.WebGLRenderer: Sets up the renderer, configures its size, and adds it to the HTML page.
Create Cube:
THREE.BoxGeometry: Creates a unit cube geometry.
THREE.MeshBasicMaterial: Defines a basic material with a green color.
THREE.Mesh: Combines geometry and material into a renderable mesh.
Set Camera Position: Moves the camera 5 units along the Z-axis to view the cube from the side.
Animation Loop:
requestAnimationFrame(animate): Calls the animate function on the next browser repaint for smooth animations.
Updates the cube’s X and Y rotation angles each frame to rotate the cube.
renderer.render(scene, camera): Renders the scene using the current camera perspective.
Creating a 3D application with raw WebGL involves multiple steps, including setting up the context, creating geometries, defining materials, configuring the camera, setting up lighting, and implementing a render loop.
<!DOCTYPE html>
<html>
<head>
<title>WebGL Example</title>
</head>
<body>
<canvas id="glCanvas" width="800" height="600"></canvas>
<script>
// WebGL code will go here
const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
alert('WebGL not supported');
}
// Further WebGL setup and rendering logic
</script>
</body>
</html>