Conheça o PyWeb3D — Three.js com sintaxe Python
Um breve guia para esta fantástica colaboração
Neste artigo, mostrarei como usar a biblioteca three.js sem escrever uma única linha de JavaScript. Faremos uso do PyWeb3D, uma camada extra que é construída para facilitar a interação com o three.js usando Brython.
O que é PyWeb3D ?
Simplificando, PyWeb3D é three.js com sintaxe Python. É um projeto de código aberto construído com Brython e three.js , e visa estender a biblioteca three.js usando a sintaxe python para interagir com a biblioteca.
Este artigo é o primeiro de sua série, então vamos mantê-lo simples. Abaixo está um vídeo de exemplo do que vamos criar neste artigo:
Instalação
Você pode usar o PyWeb3D sem precisar instalar nada.
Adicionando as bibliotecas e pacotes necessários na <head></head>tag do seu arquivo HTML.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/brython.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/brython_stdlib.js"></script>
<script src="https://unpkg.com/[email protected]/build/three.js"></script>
<script src="https://www.pyweb3d.org/pyweb3d/v1.0.0/pyweb3d.brython.js"></script>
Crie uma pasta e nomeie-a spinning_cube. Este será o nosso diretório de trabalho.
Em seu diretório de trabalho, crie um index.htmlarquivo. É aqui que todo o nosso código ficará.
Cole o seguinte código em seu index.htmlarquivo:
Vamos revisar o arquivo HTML, a <head></head>tag e a <body></body>tag em particular.
Dentro da <head>etiqueta
As duas primeiras <script>tags carregarão o Brython (Brython é uma implementação do Python 3 para programação da Web do lado do cliente projetada para substituir o JavaScript como linguagem de script para a Web).
A terceira <script>tag carregará three.js (Three.js é uma biblioteca 3D JavaScript fácil de usar, leve, multi-navegador e de uso geral).
A última <script>tag carregará pyweb3d (PyWeb3D é three.js com sintaxe python).
Dentro da <body>etiqueta
Observe o onloadatributo na <body>tag de abertura. É assim que dizemos ao navegador para chamar a brython()função no carregamento da página.
Então, por último, é a <script type=”text/python”> </script>tag onde nosso código python ficará
Criando um cubo giratório
Isto é onde a diversão começa. Usando uma linguagem que parece natural.
Cole o seguinte código <script type=”text/python”> </script>dentro do <body>:
Vamos rever o código Python.
Importando os módulos e funções necessários
from browser import document, window
from pyweb3d.pyweb3d import *
- A segunda linha importa todas as classes e funções three.js do módulo pyWeb3D. (isso remove a digitação e a formatação extras e simplifica a interação com a biblioteca three.js)
- Das linhas 5 a 7, criamos um
scene,camera, e umrenderer - Na linha 9, definimos o tamanho da janela ou tela em que vamos desenhar nossa forma
- Na linha 10, adicionamos o
rendererem nosso corpo HTML - Das linhas 12 a 15, criamos uma forma de caixa e a adicionamos à cena na linha 15
- Na linha 17, movemos a posição da câmera para trás para que possamos ver a forma em perspectiva
- Das linhas 19 a 27, criamos um loop de animação e o chamamos na linha 27. Observe o parâmetro e o argumento que foi passado para a
animatefunção? Isso é importante para a animação funcionar
Abra o index.htmlno seu navegador e você verá um belo cubo giratório :) Viva!
Obrigado por ler.
Código fonte: exemplo spinning_cube
Créditos e Referências
- Inspirado em três.js
- Brython
- Python _
Want to Connect?
Would you like to contribute PyWeb3D? Join me, and let’s create something awesome together. Follow me here.Suggested posts
3 maneiras comprovadas de melhorar sua habilidade de escrita
Os benefícios de escrever e estratégias para ajudá-lo a fazê-lo
Em 2022, com o lançamento do GPT-3, a habilidade de escrita parece se tornar menos importante. Com a IA, pessoas com redação ruim também podem gerar funcionários de qualidade.
"A Fossa das Marianas Revelada: Revelando as Terríveis Verdades Ocultas do Abismo"
Introdução:Bem-vindos, corajosos leitores, a uma jornada que nos levará às profundezas mais sombrias do nosso planeta. Neste blog, mergulhamos no mundo enigmático da Fossa das Marianas, revelando seus segredos ocultos e revelando as verdades arrepiantes que se escondem sob sua superfície.
Related posts
Coletando OSINT para caçar ameaças
Olá, entusiastas cibernéticos! Bem-vindo de volta ao OSINT para a série de caça a ameaças. No primeiro artigo, apresentei uma visão geral do OSINT e sua importância na caça às ameaças.
Por que alguns freelancers estão fingindo suas vidas
Estive recentemente no Linkedin, a maior rede social profissional do mundo, e encontrei postagens de designers freelancers que sigo que me chamaram a atenção. Todos postaram fotos de aviões, na praia com seus laptops, de piscinas e escritórios com vistas incríveis.
O que torna um podcast influente?
Na semana passada, notei um comunicado de imprensa, enviado via PressGazette (um site de notícias da mídia britânica). O artigo anunciava que a Acast, a empresa de publicidade e hospedagem de podcast Scandi, lideraria um consórcio de "provavelmente os editores mais influentes" em podcasting.