Guia do usuário do Three.js

introduzir

Three.js é uma biblioteca JavaScript para criar e renderizar gráficos 3D em navegadores da web. Ele fornece uma série de funções e ferramentas poderosas que permitem aos desenvolvedores criar facilmente cenas 3D interativas e animações em páginas da web.

Este guia detalha como começar a usar o Three.js e fornece alguns exemplos e dicas de uso comuns.

Instalar

Você pode baixar a versão mais recente do Three.js no site oficial (https://threejs.org) ou instalá-lo usando o npm:

npm install three

Em seguida, importe Three.js no arquivo HTML:

<script src="path/to/three.js"></script>

criar cena

Para criar uma cena 3D com Three.js, você precisa preparar um elemento HTML como um contêiner de renderização, por exemplo:

<div id="canvas-container"></div>

Em seguida, no código JavaScript, você pode criar um objeto de cena, um objeto de câmera e um objeto de renderização:

// 创建场景
var scene = new THREE.Scene();

// 创建相机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 创建渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

// 将渲染器的输出添加到 HTML 元素中
document.getElementById('canvas-container').appendChild(renderer.domElement);

Agora você tem uma configuração básica de cena, câmera e renderizador. Em seguida, podemos adicionar objetos à cena e renderizá-los.

adicionar objeto

Three.js oferece suporte a vários tipos de objetos 3D, incluindo geometria (Geometry), grade (Mesh) e material (Material). Você pode escolher o tipo de objeto apropriado de acordo com suas necessidades e definir suas propriedades.

Aqui está um exemplo simples mostrando como criar um cubo e adicioná-lo à cena:

// 创建几何体
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);

Agora, você pode renderizar a cena chamando o rendermétodo :

function animate() {
    
    
  requestAnimationFrame(animate);

  // 旋转立方体
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  // 渲染场景
  renderer.render(scene, camera);
}

// 启动动画循环
animate();

Dessa forma, você pode ver um cubo verde girando em seu navegador!

Recursos adicionais e truques

Three.js suporta muitos tipos diferentes de câmeras (câmera), como câmera de perspectiva (PerspectiveCamera), câmera ortogonal (OrthographicCamera) e câmera de cubo (CubeCamera). Você pode escolher o tipo de câmera apropriado de acordo com suas necessidades e definir as propriedades correspondentes, como campo de visão (fov), plano de recorte próximo (perto) e plano de recorte distante (distante), etc.

// 创建透视相机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// 创建正交相机
var camera = new THREE.OrthographicCamera(-width / 2, width / 2, height / 2, -height / 2, near, far);

// 创建立方体相机
var camera = new THREE.CubeCamera(near, far, resolution);

Three.js também fornece uma variedade de opções de materiais, como material básico (MeshBasicMaterial), material Lambert (MeshLambertMaterial), material Phong (MeshPhongMaterial) e material padrão (MeshStandardMaterial). Você pode escolher o material adequado de acordo com suas necessidades, e definir suas propriedades, como cor, textura, iluminação e sombra, etc.

// 创建基础材质
var material = new THREE.MeshBasicMaterial({
    
     color: 0x00ff00 });

// 创建 Lambert 材质
var material = new THREE.MeshLambertMaterial({
    
     color: 0x00ff00 });

// 创建 Phong 材质
var material = new THREE.MeshPhongMaterial({
    
     color: 0x00ff00 });

// 创建标准材质
var material = new THREE.MeshStandardMaterial({
    
     color: 0x00ff00 });

Three.js fornece muitas geometrias integradas (Geometry), como cubo (BoxGeometry), esfera (SphereGeometry), cilindro (CylinderGeometry) e plano (PlaneGeometry). Você pode selecionar a geometria apropriada e definir suas propriedades, como tamanho, número de segmentos e posição, etc.

// 创建立方体几何体
var geometry = new THREE.BoxGeometry(1, 1, 1);

// 创建球体几何体
var geometry = new THREE.SphereGeometry(radius, segments, rings);

// 创建圆柱体几何体
var geometry = new THREE.CylinderGeometry(radiusTop, radiusBottom, height, radialSegments);

// 创建平面几何体
var geometry = new THREE.PlaneGeometry(width, height);

Three.js suporta a renderização de fonte de luz (Light) e sombra (Shadow). Você pode adicionar diferentes tipos de fontes de luz, como luz ambiente (AmbientLight), fonte de luz pontual (PointLight), luz paralela (DirectionalLight) e spotlight (SpotLight), etc., e definir suas propriedades.

// 创建环境光
var light = new THREE.AmbientLight(0x404040);

// 创建点光源
var light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(0, 0, 0);

// 创建平行光
var light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(0, 1, 0);

// 创建聚光灯
var light = new THREE.SpotLight(0xffffff, 1, 100, Math.PI / 4, 10);
light.position.set(0, 0, 0);
light.target.position.set(0, 0, -1);

Three.js suporta o carregamento e aplicação de texturas.Você pode adicionar texturas a objetos carregando imagens ou gerando texturas dinâmicas.

// 加载图像纹理
var textureLoader = new THREE.TextureLoader();
var texture = textureLoader.load('path/to/texture.jpg');

// 生成动态纹理
var canvas = document.createElement('canvas');
// 绘制图像到 canvas
var texture = new THREE.CanvasTexture(canvas);

Em seguida, você pode aplicar a textura ao material:

material.map = texture;

Three.js também fornece um rico controlador (Controller) e uma biblioteca de animação (Animation) para ajudá-lo a obter efeitos de interação e animação.

// 使用 OrbitControls 控制相机
var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.update();

// 使用 Tween.js 创建动画效果
var tween = new TWEEN.Tween(object.position)
  .to({
    
     x: 1, y: 1, z: 1 }, 1000)
  .easing(TWEEN.Easing.Quadratic.InOut)
  .start();

Esta é apenas uma pequena parte dos recursos e truques do Three.js, mas também fornece mais opções e extensibilidade. Você pode consultar a documentação oficial (https://threejs.org/docs) e a biblioteca de exemplos (https://threejs.org/examples) para entender e explorar mais funções e usos do Three.js.

Espero que este guia o ajude a começar a usar o Three.js e a criar cenas 3D incríveis!

Guia do usuário Three.js (Edição para iniciantes)