three.js
Biblioteca JavaScript para formatos de arquivo 3D
API JavaScript de código aberto para leitura, gravação e renderização de WebGL, FBX, Collada, bem como formatos de arquivo OBJ por meio da biblioteca 3D gratuita.
three.js é uma biblioteca JavaScript 3d pura e fácil de usar de código aberto que oferece aos desenvolvedores de software a capacidade de renderizar arquivos WebGL. A biblioteca three.js oferece carregadores para vários formatos de arquivo como FBX, Collada e OBJ, mas o formato recomendado para importação e exportação de dados é o glTF. A grande coisa sobre o formato de arquivo glTF é que ele é muito compacto e pode ser facilmente transmitido e também carrega muito rápido.
A biblioteca suporta vários recursos importantes relacionados a modelos 3D, como criar uma cena, carregar modelos 3D, criar texto, desenhar linhas, configurar uma câmera, criar um cubo geométrico, adicionar um cubo à cena, renderizar a cena, adicionar viewport ao elemento, e muitos mais. Existem diferentes câmeras usadas na biblioteca three.js.
Num relance
Uma visão geral dos recursos do three.js.
- Crie cenas 3D
- Carregando modelos 3D
- Desenhar linhas
- Ler/gravar FBX
- Ler/Gravar Colada
- Converter cenas 3D
- Exportar dados em glTF
- manipulação de componentes
- lidar com texturas
O three.js é compatível com os formatos de arquivo 3D populares listados abaixo.
Independência da plataforma
three.js pode ser executado em qualquer empacotador JavaScript moderno, a escolha mais popular é o webpack.
- JavaScript
Primeiros passos com o three.js
A maneira mais fácil de instalar o three.js é usando o npm. Por favor, use o seguinte comando para uma instalação suave.
Instale o three.js via NPM
npm install --save three Criar cena usando JavaScript
A biblioteca de código aberto three.js forneceu suporte para a criação de uma cena 3D para girar um cubo dentro de seu próprio aplicativo JavaScript. Para exibir qualquer coisa com three.js, precisamos de uma cena, câmera e renderizador. Você pode usar câmeras diferentes e seus atributos para completar a cena. Em seguida, você pode usar uma instância de renderizador e definir o tamanho no qual queremos que ela renderize nosso aplicativo. Você pode manter a resolução mais baixa ou mais alta. Por último, você adiciona o elemento renderer (<canvas>) ao seu documento HTML. Você pode criar facilmente um cubo usando BoxGeometry e usando o material para colori-lo. Depois disso, você precisa de uma Mesh que pode ser inserida na cena e movida de acordo com sua necessidade.
The open source library three.js has provided support for creating a 3D scene for spinning a cube inside their own JavaScript application. To display anything with three.js we require a scene, camera, and renderizador. You can use different cameras and their attribute to complete the scene. Next, you can use a renderizador instance and set the size at which we want it to render our app. You can keep the lower or higher resolution. Lastly, you add the renderizador element (<canvas>) to your HTML document. You can easily create a cube by using BoxGeometry and using the material to color it. After that, you need a Mesh that can be inserted into the scene and moved according to your need.
The open source library three.js has provided support for creating a 3D scene for spinning a cube inside their own JavaScript application. To display anything with three.js we require a scene, camera, and renderer. You can use different cameras and their attribute to complete the scene. Next, you can use a renderer instance and set the size at which we want it to render our app. You can keep the lower or higher resolution. Lastly, you add the renderer element (<canvas>) to your HTML document. You can easily create a cube by using BoxGeometry and using the material to color it. After that, you need a Malha that can be inserted into the scene and moved according to your need.
Carregando modelos 3D via JavaScript
A biblioteca three.js de código aberto permite que programadores de software carreguem modelos 3D dentro de seu próprio aplicativo com apenas algumas linhas de código JavaScript. Os modelos 3D estão disponíveis em centenas de formatos de arquivo. Cada modelo vem com diferentes propósitos, recursos diversos e complexidade variável. Primeiro, você precisa ter um loader e depois disso, você poderá carregar a cena.
Desenhar linhas em um diagrama
A biblioteca de código aberto three.js fornece suporte para desenhar linhas ou círculos dentro de seu próprio aplicativo JavaScript. Para começar, precisamos configurar o renderizador, a cena e a câmera. Depois disso, você precisa definir o material e pode usar LineBasicMaterial ou LineshedMaterial. Após o material, precisaremos de geometria com alguns vértices. Linhas são desenhadas entre cada par consecutivo de vértices.
