Primeros pasos con Three.js en tres minutos: cómo crear una escena 3D con JavaScript

En el desarrollo web, los gráficos 3D están recibiendo cada vez más atención, y Three.js, como una biblioteca de renderizado 3D de JavaScript basada en WebGL, nos brinda una manera simple y rápida de crear escenas 3D complejas. Si recién está aprendiendo Three.js y desea comenzar rápidamente, este artículo le mostrará cómo crear una escena 3D simple en JavaScript.

1. Crea una escena

Primero, necesitamos crear una escena Three.js. Agregue un elemento `<div>` vacío al archivo HTML y cree un objeto de escena básico usando JavaScript:

var scene = new THREE.Scene();

2. Agregar cámara

A continuación, debemos agregar una cámara para poder ver la escena desde el ángulo correcto. Three.js admite varios tipos de cámaras, como cámaras en perspectiva (PerspectiveCamera) y cámaras ortogonales (OrthographicCamera). Aquí, usamos una cámara de perspectiva para crear un efecto 3D con un sentido de perspectiva.

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

Entre ellos, el primer parámetro especifica el rango de ángulo de visión de la cámara, el segundo parámetro especifica la relación de aspecto de la cámara y el tercero y cuarto parámetros especifican la sección cercana y la sección lejana de la cámara respectivamente. Estos parámetros se pueden ajustar según sea necesario.

3. Agrega un renderizador

Para mostrar la escena en una página web, necesitamos agregar un renderizador. Three.js admite varios tipos de renderizadores, como WebGLRenderer, CanvasRenderer, CSS3DRenderer, etc. Aquí, usamos WebGLRenderer para crear un renderizador WebGL acelerado por hardware y adjuntarlo a un elemento DOM.

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

4. Agregar objetos

Ahora que hemos creado la escena, la cámara y el renderizador, necesitamos agregar algunos objetos y materiales para renderizar el efecto 3D. Aquí creamos un cubo simple y usamos un material básico (MeshBasicMaterial) para colorearlo.

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

5. Renderiza la escena

Finalmente, use el método `requestAnimationFrame()` en la función `render()` para recorrer la escena y actualizar la posición y rotación de la cámara. Esto permite cambios dinámicos en la escena.

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();

Ahora, hemos creado con éxito una escena 3D simple y usamos JavaScript para controlar la posición y la rotación de la cámara y los objetos. Esta es solo la punta del iceberg para Three.js, tiene muchas otras capacidades y características para explorar.

Este artículo proporciona un tutorial introductorio básico, con la esperanza de ayudar a los principiantes. Si desea aprender Three.js en profundidad, puede consultar la documentación oficial y el código de muestra, o leer libros y blogs relacionados.