Instalação

Comando de instalação no projeto

pnpm add three

Utilização

Importação de toda a biblioteca

import * as THREE from 'three';

• WebGLRenderer: é a classe principal para renderizar gráficos 3D no navegador usando o WebGL.

Criação de uma instância do renderizador WebGL

O ThreeJS utiliza o WebGL (principalmente) como uma ferramenta para criar um espaço em páginas web onde é possível adicionar e animar objetos 3D.

Você pode ler mais sobre WebGL em ThreeJS > WebGL

const renderer = new THREE.WebGLRenderer();

Métodos de configuração

• setSize(width, height): Define a largura e a altura do canvas renderizado, ajustando-o ao tamanho desejado.
  • window.innerWidth e window.innerHeight: Ajustam o tamanho do canvas para ocupar toda a tela.
  • element.clientWidth e element.clientHeight: Ajustam o tamanho do canvas de acordo com o elemento que está sendo atribuído
  • Valores Fixos: Você também pode definir valores fixos diretamente, se desejar que o canvas tenha um tamanho específico, independentemente do tamanho da janela ou do contêiner

renderer.setSize(window.innerWidth, window.innerHeight)

• appendChild: É um método JavaScript usado para adicionar um novo elemento como filho do elemento ao qual ele é aplicado.

document.body.appendChild(renderer.domElement);

• set(x, y, z): utilizado para atribuir um valor de posicionamento

camera.position.set(0, 10, 5);