Trabalhando com classes em curtains.js

curtains.js é uma biblioteca WebGL fácil de usar que converte imagens, vídeos e telas em gráficos 3D WebGL. WebGL (Web Graphics Library) é uma API JavaScript usada para renderizar gráficos 3D e 2D com os quais os usuários podem interagir. curtains.js foi construído como uma biblioteca JavaScript WebGL.

Se você usava cortinas antes do lançamento da versão 7.0, deve ter notado as muitas mudanças entre a versão antiga e a nova. Na versão 7.0, curtains foi reescrito para melhor legibilidade e manutenção, com a nova biblioteca dividida em diferentes módulos de classe que são fáceis de trabalhar.

Neste artigo, discutiremos esses módulos de classe com mais detalhes, mas primeiro, revisaremos alguns conceitos básicos sobre cortinas.

De volta ao básico: o que as cortinas fazem?

Para entender melhor essa questão, primeiro precisamos examinar os problemas que as cortinas se destinam a resolver. De acordo com seu site oficial , curtains.js converte elementos HTML contendo imagens, vídeos e telas em 3D WebGL, o que permite que essas mídias sejam mais animado com o uso de sombreadores. Isso torna os gráficos 3D curtains.js fáceis de posicionar em relação ao DOM de uma página da web, um luxo que não é comumente encontrado em outras bibliotecas 3D.

Além disso, como curtains.js é construído com a API WebGL, ele evita o estresse de trabalhar diretamente com coisas como tamanhos e posições de objetos. Em vez disso, as cortinas tratam desses desenvolvimentos por conta própria, tornando o desenvolvimento fácil e direto.

Por fim, o Curtains tem benefícios claros de SEO, permitindo que você escreva um código HTML limpo para o seu design com maior probabilidade do que outras bibliotecas 3D de ser classificado em um mecanismo de pesquisa.

classes cortinas na versão 7.0

Se você usava cortinas antes do lançamento da versão 7.0, deve ter notado as muitas mudanças entre a versão antiga e a nova. Na versão 7.0, curtains foi reescrito para melhor legibilidade e manutenção, com a nova biblioteca dividida em diferentes módulos de classe que são fáceis de trabalhar. Discutiremos esses módulos de classe com mais detalhes abaixo.

Classes principais

Essas classes principais são essenciais ao criar uma cena WebGL básica em curtains.js. Eles servem como o backbone necessário para criar qualquer gráfico WebGL nas cortinas. As classes principais incluem cortinas, plano e textura.

classe

cortinas

Para iniciar qualquer projeto curtains.js, você precisará criar um objeto Curtains que manipulará as cenas planas fornecidas. Este objeto obtém o id do elemento HTML que envolverá a tela.

Abaixo está um exemplo de instância de objeto Cortinas :

//o id do elemento html fornecido neste caso é canvas
const curtainsInstance=new Curtains ({ container: document.getElementById ("canvas")
});

Outros parâmetros notáveis ​​para definir incluem;

• Produção : este parâmetro recebe um valor booleano e é usado para especificar se você deseja ou não a biblioteca no modo de produção
• Container : este parâmetro especifica o elemento HTML que envolverá a tela. Este parâmetro recebe uma string ou um elemento HTML. Observe que esta propriedade é opcional e se não for especificada, curtains.js terá que esperar que setContainer () seja chamado para que o contexto WebGL seja definido
• watchScroll: Este parâmetro determina se curtains.js deve ouvir um evento de rolagem. Ele considera um booleano como seu valor

A instância do objeto Curtains também usa métodos diferentes, além de parâmetros diferentes para dar aos usuários mais controle sobre seu projeto. Alguns métodos incluem:

• clear () : limpa a cor e a profundidade de um contexto WebGL
• disableDrawing () : evita que uma cena já desenhada seja desenhada novamente. Isso coloca a cena em um estado de pausa e os uniformes são desativados
• enableDrawing () : necessário para reativar uma cena já pausada. Isso é útil se você planeja começar uma cena após um evento específico
• dispose () : cancela o loop requestAnimationFrame , posteriormente excluindo os planos e o contexto WebGL

Finalmente, usando o objeto Curtains, podemos manipular eventos com funções como onError () e onContextLost () fornecidas pela biblioteca curtains.js.

Plano classe

A classe plane fornecida por curtains.js cria um plano WebGL com base no elemento HTML fornecido. O plano se estende a partir do plano base , uma classe usada para configurar o WebGL.

Para criar um plano, você precisa passar um elemento HTML e uma classe curtains já criada, conforme mostrado abaixo:

//o id do elemento html fornecido, neste caso, é “canvas”
const cortinaInstância=novas cortinas ({ container: document.getElementById (“canvas”)
}); const planeElement=document.getElementById (“elemento-plano”); plano const=novo plano (cortinaInstância, planoElement)

Assim como na classe curtains , a classe plane recebe um terceiro parâmetro onde diferentes opções podem ser especificadas, conforme mostrado aqui:

//o id do elemento html fornecido, neste caso, é “canvas”
const cortinaInstância=novas cortinas ({ container: document.getElementById (“canvas”)
}); const planeElement=document.getElementById (“plane-element”) const params={ vertexShaderID:"plane-element-vs", fragmentShaderID:"plane-element-fs",/ uniformes: { Tempo: { nome:"uTime", tipo:"1f", valor: 0, }, },
}; plano const=novo plano (curtainInstance, planeElement, params)

vertixShaderID e fragmentShaderID são usados ​​para definir o vértice e fragmentos do sombreador, enquanto uniformes permite que você interaja com o plano criado.

Classe de texturas

Como o nome indica, a classe textura é usada para criar texturas.

Você pode criar uma textura facilmente chamando seu construtor, assim:

//o id do elemento html fornecido neste caso é “canvas”
const curtainsInstance=new Curtains ({ container: document.getElementById ("canvas")
}); textura const=nova textura (cortinaInstância, { amostrador:'textura'
})

Como alternativa, você pode chamar o método createTexture () em seu plano:

//o id do elemento html fornecido, neste caso, é “canvas”
const cortinaInstância=novas cortinas ({ container: document.getElementById (“canvas”)
}); const planeElement=document.getElementById (“plane-element”) plano const=novo plano (cortinaInstância, planoElement) const myTexture=plane.createTexture ({ sampler: “uTexture”
})

Agora que cobrimos as classes principais, discutiremos mais algumas classes do curtains v7.0 que você pode usar ao projetar sua página da web.

Quadro b uffer objetos

Essas são classes usadas para adicionar efeitos posteriores em um plano. Eles incluem as classes renderTarget e ShaderPass .

No código abaixo, veremos como criar uma instância de ShaderPass ; você pode aprender mais sobre objetos Frame buffer aqui .

 const curtainsInstance=new Curtains ({ container: document.getElementById ("canvas")
}); const shaderPass=new ShaderPass (cortinas)

Carregadores

Carregadores são classes usadas para implementar textura WebGL com base em elementos de mídia HTML. Um exemplo disso é TextureLoader . Esta classe cria uma textura usando imagens, vídeos e telas como sua fonte. Você pode usar TextureLoader para pré-carregar a textura de um site para a GPU enquanto ainda exibe um carregador.

Um novo carregador de textura pode ser criado usando seu construtor, como no exemplo abaixo:

//o id do elemento html fornecido, neste caso, é “canvas”
const curtainsInstance=new Curtains ({ container: document.getElementById ("canvas")
}); //cria um novo carregador de textura
const loader=novo TextureLoader (curtainsInstance); //carregue uma imagem com o carregador
imagem const=nova imagem ();
image.crossOrigin="anônimo";
image.src="caminho/para/minha-imagem.jpg"; loader.loadImage (imagem, { //opções são definidas aqui sampler:"uTexture"
}, (textura)=> { //criou uma textura com sucesso
}, (imagem, erro)=> { //manipulador de erros
});

A textura para cada mídia é criada usando seus métodos individuais. A classe TextureLoader usa métodos diferentes, incluindo loadCanvas e loadVideo .

A função loadCanvas cria uma textura baseada na tela passada para ela. Recebe três parâmetros: o elemento canvas fornecido, uma opção de textura e uma função de retorno de chamada. Um exemplo pode ser encontrado aqui . Você também pode trabalhar com uma matriz de telas usando o método fornecido loadCanvases () fornecido.

Semelhante a loadCanvas , a função loadVideo cria uma textura com base no vídeo transmitido a ela, mas também usa um quarto parâmetro para tratamento de erros. Você pode trabalhar com mais de um vídeo usando o método loadVideos () .

Outros métodos, como loadImage () e loadSource () funcionam de maneira semelhante aos dois métodos listados acima.

Matemática

As aulas de matemática em cortinas são baseadas nas classes do utilitário matemático three.js . Eles são usados ​​para manipulação de vetores dimensionais. Por exemplo, Vec2 , Vec3 e Mat4 são usados ​​para cálculos e manipulação de vetores 2D, 3D e 4D, respectivamente.

Aqui está um exemplo de uso de construtores:

 const nullVector=new Vec2 ();
vetor const=novo Vec2 (1, 1)

Observe que uma instância Vec2 e Vec3 faz uso de um setter e getter, o que permite que uma ação seja realizada na alteração do evento.

Isso pode ser feito usando o método onChange () :

//cria um novo vetor Vec2 adiciona um ouvinte de evento
vetor const=novo Vec2 (). onChange (()=> {
const normalizedVector=vector.normalize ();
}); //as ações abaixo acionam eventos diferentes
vector.x=4;
vector.y=6;

Conclusão

curtains.js ganhou sua reputação como a biblioteca preferida por adicionar efeitos 2D e 3D à mídia, incluindo imagens, vídeos e telas. E, com os desenvolvimentos recentes na versão 7.0 e além-incluindo módulos de classe para uma construção mais simplificada-o desenvolvimento é muito mais fácil.

A postagem Trabalhando com classes em curtains.js apareceu pela primeira vez no LogRocket Blog .

Source link