Three.js

De Jideon F Marques

Você já considerou como esses recursos visuais e jogos são mostrados em um navegador da web? Que tecnologia está no centro disso? É claro que utilizar apenas HTML e CSS não será suficiente. Three.js é um kit de ferramentas JavaScript gratuito para exibir imagens, objetos 3D e 2D em navegadores da web que permite renderizar gráficos e objetos 3D em uma tela no navegador da web usando sua GPU (unidade de processamento gráfico). Conquistando JavaScript: Three.js ajuda o leitor a dominar a estrutura Three.js para um desenvolvimento mais rápido e robusto. O livro é um guia detalhado que ajudará desenvolvedores e programadores a fazer mais com Three.js. Ele cobre brevemente o básico e depois passa para exercícios mais avançados e detalhados para ajudar os leitores a obter rapidamente o conhecimento necessário. Características principais: Examina conteúdo específico de JavaScript, com ênfase em bibliotecas gráficas. Discute o uso de Three.js para criação de gráficos animados. Fornece dicas e soluções de otimização de código. Este livro é uma referência valiosa para desenvolvedores de Three.js, bem como para aqueles envolvidos no desenvolvimento de jogos, aplicativos móveis, aplicativos progressivos e agora até mesmo aplicativos de desktop.

• Idioma: Português
• Editora: Clube de Autores
• Data de lançamento: 18 de jan. de 2024

Pré-visualização do livro

Conquistando JavaScript: Three.js

Conquistando JavaScript

Three.js

Jideon Marques

Copyright © 2024 Jideon Marques

A obra, incluindo todo o conteúdo, é protegida por direitos autorais. Todos os direitos reservados. É proibida a reimpressão ou reprodução (incluindo extratos) sob qualquer forma (impressão, fotocópia ou outro processo), bem como o armazenamento, processamento, duplicação e distribuição por sistemas eletrônicos de qualquer espécie, no todo ou em extratos, sem autorização expressa. do autor. Todos os direitos de tradução reservados.

Publicado de forma independente

Este conteúdo é fornecido com o único propósito de fornecer informações relevantes sobre um tópico específico para o qual todos os esforços razoáveis foram feitos para garantir que seja preciso e razoável. No entanto, ao adquirir este conteúdo, você concorda com o fato de que o autor, assim como o editor, não são de forma alguma especialistas nos tópicos aqui contidos, independentemente de quaisquer reivindicações como tal que possam ser feitas nele. Como tal, todas as sugestões ou recomendações feitas aqui são feitas exclusivamente para fins de entretenimento. É

recomendável que você sempre consulte um profissional antes de realizar qualquer um dos conselhos ou técnicas discutidos aqui.

A reprodução, transmissão e duplicação de qualquer conteúdo aqui encontrado, incluindo qualquer informação específica ou extensa, será feita como um ato ilegal, independentemente da forma final que a informação assuma. Isso inclui versões copiadas da obra física, digital e de áudio, a menos que o consentimento expresso do Editor seja fornecido com antecedência. Quaisquer direitos adicionais reservados.

Índice

Capítulo 1 Introdução

CURSO INTENSIVO COM Three.js

O QUE É Three.js?

FLASHBACK SOBRE Three.js

POR QUE EMPREGAMOS Three.js?

COMO VOCÊ INCORPORA Three.js

O QUE É NECESSÁRIO PARA EXECUTAR UM APLICATIVO Three.js?

Um computador

Desenvolvedor Three.js

Um editor de texto

Navegador da Web

Servidor web

O console do desenvolvedor para o navegador

Dispositivo compatível com WebGL

USUÁRIOS Three.js – TRÊS EXEMPLOS

Vantagens

Desvantagens

CONCEITO CENTRAL

PROJETO ADAPTATIVO

MANUSEIO DE DISPLAYS DE ALTA RESOLUÇÃO

Pré-requisitos

Módulos es6

ENTENDA COMO FUNCIONAM OS FECHAMENTOS

SAIBA COMO ISSO FUNCIONA

Coisas ES5/ES6/ES7

Use for (elemento da coleção)

SEMPRE QUE POSSÍVEL, UTILIZE PARA CADA UM, MAPA E FILTRO

Desestruturação de empregos

Argumentos de função também podem ser destruídos

Use o operador Spread e o parâmetro Rest

Ou clonar um array

Ou Combinando Objetos

Classe de emprego

Reconhecer getters e setters

Quando possível, use funções de seta

Use literais de modelos

Aprenda como codificar em JavaScript

O código do Visual Studio é uma boa opção

Configurar

Pare ou saia do Servez para parar de servir

Instalação

Instalar usando npm

Instalação CDN ou hospedagem estática

As importações CommonJS são compatíveis

Node.js

Verifique a compatibilidade do WebGL

Como gerenciar operações locais

Arquivos externos são usados para carregar conteúdo

Um servidor remoto

Servez

Um Node.js de cinco servidores

Servidor HTTP em Node.js

Servidor em Python

Servidor Ruby

Lighttpd

IIS

FUNDAMENTOS

Primitivos

Geometria da caixa

Círculo Plano

Cone Sólido

Cilindro

dodecaedro

Duas dimensões (2D)

Disco 2D com furo no centro

Geometria do texto

Geometria de borda

Geometria Wireframe

Gráfico de cena

MATERIAIS

TEXTURAS

Olá Textura

Carregamento de textura simplificado

Uma textura está sendo carregada

Texturas de outras fontes estão sendo carregadas

UTILIZAÇÃO DE MEMÓRIA

PNG versus JPG

REPETIÇÃO, OFFSET, ROTAÇÃO E ENVOLTÓRIO DE TEXTURA

Luzes

Luz ambiente

HemisférioLuz

Luz Direcional

Ponto de luz

Holofotes

RectAreaLight

CÂMERAS

Sombras

BufferGeometry personalizado

PRINCIPAIS RECURSOS DO Three.js

Efeitos

Cenas

Animação

Criação de malha

Dimensionamento

Renderizar

No Three.js, você pode acompanhar o desempenho da renderização

Materiais

Propriedades de objetos comuns

RECAPITULAÇÃO DO BÁSICO

RESUMO

NOTAS

CAPÍTULO 2: Desenvolvimento de Aplicativos I

CONSTRUINDO APLICATIVOS COM Three.js

PROJETANDO JOGO COM Three.js

TUTORIAIS DE CÓDIGO

Criando uma sensação de movimento

DENTRO DE RESTRIÇÕES LIMITADAS, MOVIMENTO INFINITO

CONFIGURAR O PROJETO DE JOGO

ADIÇÃO DE ARQUIVOS WEBPACK

CONFIGURAÇÃO DO AMBIENTE TYPESCRIPT

DEFININDO O TOM DO JOGO

Preparando o cenário

IMAGINANDO O CÉU

PLANEJAMENTO DA CENA FINAL

INCLUINDO LÓGICA DE JOGO

ENTRADA PELO TECLADO

ENTRADA VIA TOUCHSCREEN

OBJETOS EM NOSSA CENA QUE ESTÃO EM MOVIMENTO

detectarColisões

adicionarBackgroundBit

addChallengeRow

OS TOQUES FINAIS EM NOSSO RENDER LOOP

DESIGN DE UI PARA O JOGO

RESUMO

NOTAS

CAPÍTULO 3: Desenvolvimento de Aplicativos II

CONSTRUINDO APLICATIVOS COM Three.js

Instalando e baixando

Tutorial de código

Configuração inicial de HTML

Nosso mundo 3D está sendo construído

CONFIGURANDO UM SERVIDOR DE DESENVOLVIMENTO NA MÁQUINA LOCAL

Para usuários do Windows

Para Mac

DESENHANDO GEOMETRIA E REDIMENSIONANDO A VIEWPORT

REDIMENSIONANDO A ATUALIZAÇÃO DO VIEWPORT

IMPORTANDO O PLANO DE NEGÓCIOS

O LAYOUT DO PROJETO INICIAL

SELECIONANDO MODELOS 3D

CARREGANDO MODELOS 3D

CONSELHOS IMPORTANTES DE DESENVOLVIMENTO 3D

RESUMO

NOTAS

CAPÍTULO 4: Desenvolvimento de Aplicativos III

CONSTRUINDO APLICATIVO COM Three.js

TUTORIAL DE CÓDIGO

Base

Vamos adicionar nosso ambiente!

Céus

Animação

Reconfigurar

Fundo

O CAMINHO PARA O PORTÃO DO JARDIM

Algoritmo

Compartilhamento

Recortar

Escolha de símbolos

Metasegurança

SPOTIFY ESTÁ ELEVANDO OS NÍVEIS DE SEROTONINA DE MENINA EM FÃS RED

Algoritmo

Geração de imagem

Carregador

USANDO AS PRINCIPAIS FAIXAS TRANSMITIDAS RECENTES DO SPOTIFY PARA

DETECTAR E INCENTIVAR A AFINIDADE DE UM FÃ

Obtenha as músicas favoritas de um usuário

Algoritmo

Entre os melhores

Projeto e Desenvolvimento de Componentes

Carregador de Fé

Progresso na fé

RESUMO

CAPÍTULO 5: Otimização de código

ESCREVER CÓDIGO OTIMIZADO E EFICIENTE

ANTES DE COMEÇAR A MEDIR OS RESULTADOS

Selecionando um navegador da web

A quantidade de polígonos na cena está sendo reduzida

O anti-aliasing está desativado

LIMITANDO A RESOLUÇÃO DA RENDERIZAÇÃO 3D

Three.js OTIMIZA UM GRANDE NÚMERO DE OBJETOS

OTIMIZE UM GRANDE NÚMERO DE OBJETOS ANIMADOS

ENDURECIMENTO E SEGURANÇA

Reflexão XSS

Cache XSS

Proteja seu código

Codificando a saída

Contextos de página da Web para codificação de saída

Conselho ou assistência para iniciantes Por que não consigo ver nada?#

DICAS GERAIS

TRABALHO EM UNIDADES SI

Unidades SI

Cores precisas

JavaScript

Use linter# e um guia de estilo

MODELOS, MALHAS E OBJETOS VISÍVEIS

Câmera

Renderizador

Luzes

Ligue o renderizador

Sombras

Materiais

MATERIAIS PERSONALIZADOS

Geometria

Texturas

Anti-aliasing

Pós-processamento

VOCÊ ESTÁ SE LIVrando DE ALGO DA SUA CENA?

Definir objeto em desempenho

Dicas avançadas

RESUMO

NOTAS

CAPÍTULO 6: Resumo

PERSPECTIVAS DE CARREIRA USANDO Three.js

USANDO Three.js COM OUTROS FRAMEWORKS E BIBLIOTECAS

O QUE É TYPESCRIPT?

UMA INTRODUÇÃO AO REACT E Three.js

COMEÇANDO COM REACT-TRÊS-FIBRA

DESENVOLVENDO UM PROTÓTIPO DE DADOS LUDO REACT 3D COM ANIMAÇÕES

COMPONENTE PARA CONSTRUÇÃO DE CAIXA

RENDERIZAÇÃO 3D LUDO CAIXA DE DADOS

Luz ambiente

Holofote

pontoLight

CENA ANGULAR USANDO Three.js

PROGRAMAÇÃO DE CENA Three.js

Por que estamos movendo a câmera?

Qual é a definição de geometria?

GESTÃO DE MATERIAIS

Posicionando uma malha (cubo no nosso caso)

Com Vue.js e Three.js, você pode criar cenários impressionantes

Características

Criando uma cena declarativa

Organize seus recursos

Modelos

Desenvolvimento de conteúdo exclusivo

ÍNDICE

Você já considerou como esses recursos visuais e jogos são mostrados em um navegador da web? Que tecnologia está no centro disso? É claro que utilizar apenas HTML e CSS não será suficiente. Three.js é um kit de ferramentas JavaScript gratuito para exibir imagens, objetos 3D e 2D em navegadores da web que permite renderizar gráficos e objetos 3D em uma tela no navegador da web usando sua GPU (unidade de processamento gráfico).

Conquistando JavaScript: Three.js ajuda o leitor a dominar a estrutura Three.js para um desenvolvimento mais rápido e robusto. O livro é um guia detalhado que ajudará desenvolvedores e programadores a fazer mais com Three.js. Ele cobre brevemente o básico e depois passa para exercícios mais avançados e detalhados para ajudar os leitores a obter rapidamente o conhecimento necessário.

Características principais:

• Examina conteúdo específico de JavaScript, com ênfase em bibliotecas gráficas

• Discute o uso do Three.js para criação de gráficos animados

• Fornece dicas e soluções de otimização de código

Este livro é uma referência valiosa para desenvolvedores de Three.js, bem como para aqueles envolvidos no desenvolvimento de jogos, aplicativos móveis, aplicativos progressivos e agora até mesmo aplicativos de desktop.

Sobre a série

A série Conquering JavaScript cobre uma ampla variedade de tópicos, pertencentes especificamente ao ecossistema de programação JavaScript, como frameworks e bibliotecas. Cada livro desta série concentra-se em um tópico singular e cobre o referido tópico detalhadamente, concentrando-se especialmente no uso no mundo real e na abordagem orientada ao código, aderindo a um paradigma de codificação padrão da indústria, de modo a ajudar os alunos a obter conhecimentos práticos que pode ser útil para projetos do mundo real.

Alguns dos principais aspectos dos livros desta série são:

• Texto claro, abrangendo vários tópicos relacionados a JavaScript, classificados por relevância,

• Foco especial em exercícios práticos, com inúmeros exemplos de códigos e programas,

• Uma abordagem guiada para codificação JS, com tutoriais e orientações passo a passo,

• Grande ênfase na utilidade de habilidades no mundo real, eliminando assim os conceitos e bloatware redundantes e raramente usados, e

• Uma ampla gama de referências e recursos, para ajudar os leitores a aproveitar ao máximo os livros.

Os livros da série Conquering JavaScript pressupõem uma compreensão básica dos fundamentos da codificação.

Capítulo

Introdução

NESTE CAPÍTULO

➢ Básico sobre Three.js

➢ Recursos do Three.js

➢ Vantagens e Desvantagens

Este capítulo inclui uma parte introdutória que explorará os conceitos básicos e centrais relacionados ao Three.js. Também falará sobre as vantagens e desvantagens do Three.js.

A cada ano, os navegadores da Web se tornam mais poderosos, têm mais recursos e apresentam melhor desempenho. Os navegadores cresceram como uma plataforma excelente para a criação de aplicativos envolventes, complicados e bonitos nos últimos anos. Tecnologias HTML5 modernas, como web sockets, armazenamento local e abordagens CSS avançadas para estilo, são usadas na maioria dos aplicativos atuais. Os navegadores mais recentes, por outro lado, suportam uma tecnologia que pode ser utilizada para produzir imagens e animações 3D impressionantes que aproveitam ao máximo a GPU (unidade de processamento gráfico). WebGL é o nome da tecnologia suportada pelas versões mais recentes do Firefox, Chrome, Safari e Internet Explorer.

Você pode usar WebGL para criar cenários 3D que rodam em seu navegador sem o uso de plugins. Este padrão tem muito suporte em desktops e os dispositivos e navegadores móveis mais recentes oferecem suporte total.

Para criar aplicativos WebGL, você precisará aprender uma nova linguagem chamada GLSL

1

geometrias.

Felizmente, existem diversas bibliotecas JavaScript que envolvem o WebGL

internos e fornece uma API JavaScript que você pode usar sem precisar compreender os recursos mais complicados do WebGL. Three.js é uma das bibliotecas mais desenvolvidas e ricas em recursos.

Three.js foi fundado em 2010 e oferece uma enorme variedade de APIs simples que expõem todas as funcionalidades do Three.js, permitindo criar rapidamente cenários e animações 3D complexos em seu navegador.

As APIs do Three.js permitem que você faça praticamente tudo o que quiser com ele.

CURSO INTENSIVO COM Three.js

Você já considerou como esses recursos visuais e jogos são mostrados em um navegador da web? Que tecnologia está no centro disso? É claro que utilizar apenas HTML e CSS não será suficiente. Esta tarefa foi concluída anteriormente com WebGL. WebGL (Web Graphics Library) é uma API JavaScript que permite renderizar objetos tridimensionais, objetos bidimensionais e gráficos em seu navegador. Os usuários podem interagir com informações interativas em páginas da web usando a API WebGL sem precisar baixar ou instalar nenhum plug-in. WebGL permite que os desenvolvedores acessem hardware em baixo nível usando o formato de código OpenGL ES.

A Organização Mozilla inventou o WebGL. Com todas essas vantagens, o WebGL também tem algumas desvantagens, o que levou à introdução de um kit de ferramentas JavaScript gratuito chamado Three.js. WebGL é uma tecnologia muito simples que simplesmente renderiza objetos básicos como pontos, quadrados e linhas.

Você precisará de muito código para fazer algo sério com WebGL, e é aí que entra o Three.js.

O QUE É Three.js?

Three.js é um kit de ferramentas JavaScript gratuito para exibição de imagens em 3D e 2D

objetos em navegadores da web. Nos bastidores, ele aproveita a API WebGL. Três.

js permite renderizar gráficos e objetos 3D em uma tela no navegador da web usando sua GPU. Também podemos interagir com outros componentes HTML porque utilizamos JavaScript. Em abril de 2010, Ricardo Cabello, programador de computação gráfica de Barcelona, lançou o Three.js.

Three.js pode ser baixado e a documentação pode ser encontrada em

https://trêsjs.org. Por incluir vários exemplos e materiais de suporte, o download é bastante grande. Funcionalidades principais do Three.js

Introdução ◾ 3

são definidos em um único arquivo JavaScript enorme chamado Three.js, que pode ser encontrado no diretório de compilação do download do Three.js.

Pré-visualização do diretório de download Three.js.

Esta versão é compatível com aplicações modulares e não modulares. Three.min.js, uma versão menor minificada, fornece as mesmas definições em um formato que não se destina a ser legível por humanos. Você pode utilizar Three.js em uma página da web incluindo qualquer um dos scripts no script>

O download do Three.js também inclui um diretório com muitos