Getting Started with Three.js in Three Minutes: How to Build a 3D Scene with JavaScript

In Web development, 3D graphics are getting more and more attention, and Three.js, as a JavaScript 3D rendering library based on WebGL, provides us with a simple and fast way to create complex 3D scenes. If you are just learning Three.js and want to get started quickly, this article will show you how to build a simple 3D scene in JavaScript.

1. Create a scene

First, we need to create a Three.js scene. Add an empty `<div>` element to the HTML file and create a basic scene object using JavaScript:

var scene = new THREE.Scene();

2. Add camera

Next, we need to add a camera so we can view the scene from the correct angle. Three.js supports multiple types of cameras, such as perspective cameras (PerspectiveCamera) and orthogonal cameras (OrthographicCamera). Here, we use a perspective camera to create a 3D effect with a sense of perspective.

var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

Among them, the first parameter specifies the viewing angle range of the camera, the second parameter specifies the aspect ratio of the camera, and the third and fourth parameters specify the near section and far section of the camera respectively. These parameters can be adjusted as needed.

3. Add a renderer

In order to display the scene on a web page, we need to add a renderer. Three.js supports multiple types of renderers, such as WebGLRenderer, CanvasRenderer, CSS3DRenderer, etc. Here, we use WebGLRenderer to create a hardware-accelerated WebGL renderer and attach it to a DOM element.

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

4. Add objects

Now that we have created the scene, camera and renderer, we need to add some objects and materials to render the 3D effect. Here we create a simple cube and use a basic material (MeshBasicMaterial) to color it.

var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

5. Render the scene

Finally, use the `requestAnimationFrame()` method in the `render()` function to loop through the scene and update the camera's position and rotation. This enables dynamic changes to the scene.

function render() {
    requestAnimationFrame(render);

    // 使立方体绕着X轴和Y轴旋转
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    // 更新相机的位置
    camera.position.z = 5;

    renderer.render(scene, camera);
}
render();

Now, we have successfully created a simple 3D scene and used JavaScript to control the position and rotation of the camera and objects. This is just the tip of the iceberg for Three.js, it has many other capabilities and features to explore.

This article provides a basic introductory tutorial, hoping to help beginners. If you want to learn Three.js in depth, you can refer to the official documentation and sample code, or read related books and blogs.