☜ ☞

3d

This example demonstrates how to create a 3D rotating cube using Three.js, a popular JavaScript library for 3D graphics. Here's the complete HTML and JavaScript code:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>3D Cube with Three.js</title>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
<script>
   // Set up the scene, camera, and renderer
   var scene = new THREE.Scene();
   var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
   var renderer = new THREE.WebGLRenderer();
   renderer.setSize(window.innerWidth, window.innerHeight);
   document.body.appendChild(renderer.domElement);
   // Create a cube and add it to the scene
   var geometry = new THREE.BoxGeometry(1, 1, 1);
   var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
   var cube = new THREE.Mesh(geometry, material);
   scene.add(cube);
   // Position the camera
   camera.position.z = 5;
   // Create an animation loop
   var animate = function () {
       requestAnimationFrame(animate);
       // Rotate the cube
       cube.rotation.x += 0.01;
       cube.rotation.y += 0.01;
       // Render the scene from the perspective of the camera
       renderer.render(scene, camera);
   };
   // Start the animation loop
   animate();
</script>
</body>
</html>

Explanation:

Setting up the Scene:

var scene = new THREE.Scene();: Creates a new scene.
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);: Sets up a perspective camera with a 75-degree field of view, an aspect ratio matching the window's aspect ratio, and clipping planes at 0.1 and 1000 units from the camera.

Creating the Renderer:

var renderer = new THREE.WebGLRenderer();: Creates a WebGL renderer.
renderer.setSize(window.innerWidth, window.innerHeight);: Sets the renderer to fill the window.
document.body.appendChild(renderer.domElement);: Adds the renderer's output (a canvas element) to the HTML document.

Creating a Cube:

var geometry = new THREE.BoxGeometry(1, 1, 1);: Defines the geometry for a cube.
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});: Defines a basic material with a green color.
var cube = new THREE.Mesh(geometry, material);: Creates a mesh from the geometry and material.
scene.add(cube);: Adds the cube to the scene.

Positioning the Camera:

camera.position.z = 5;: Moves the camera back 5 units so that the cube is in view.

Animating the Cube:

var animate = function () { ... };: Defines the animation loop.
requestAnimationFrame(animate);: Schedules the animate function to be called on the next frame.
cube.rotation.x += 0.01;: Rotates the cube slightly around the x-axis.
cube.rotation.y += 0.01;: Rotates the cube slightly around the y-axis.
renderer.render(scene, camera);: Renders the scene from the perspective of the camera.

Starting the Animation:

animate();: Starts the animation loop.

This code sets up a basic 3D scene with a rotating cube, which is a good starting point for exploring more complex 3D graphics using Three.js.

☜ ☞