Introdução: mudanças na temperatura levarão a mudanças nas condições do vapor de água, causando fenômenos climáticos estranhos, como queda de neve, chuva e granizo. Não apenas as atividades humanas serão afetadas, mas o gerenciamento de equipamentos de IoT, o monitoramento de sensores e as operações de segurança devem ser ajustados de acordo .
Para preparar o plano com antecedência, utiliza-se o processo de simulação da cena gêmea 3D, como prever as consequências de uma emergência ou acidente, e com base nas duas condições do modelo digital gêmeo e simulação digital, para completar a solução de crise necessária.
Endereço de demonstração: http://www.thingjs.com/guide/?m=sample
# Frontend # Desenvolvimento 3D # IoT
- Carregar cena
- Temporizador de pingo de chuva
No processo de simulação digital dupla de efeitos de chuva , a visualização da cena 3D é necessária como um recurso básico para o desenvolvimento interativo e conexão de dados. Agora vamos explicar como desenvolver a chuva e outros efeitos climáticos com base na plataforma ThingJS para tornar sua cena 3D mais realista!
O tutorial oficial é dividido em três partes: (1) cena de carregamento; (2) cronômetro de gota de chuva; (3) efeito de chuva.
1. Carregue a cena
ThingJS não precisa desenvolver uma cena 3D de 0 a 1. O designer de modelagem usa CampusBuilder (também conhecido como construção de modelo, ferramenta de construção de cena 3D) para completar a construção da cena 3D com código zero, arrastando e soltando; o desenvolvimento de front-end é baseado em dados de plataforma unificada, Carregue o url diretamente da barra de menu para desenvolvimento secundário.
2. Temporizador de pingo de chuva
Para criar um cronômetro de pingo de chuva, a sintaxe de setTimeout e setInterval são iguais. Ambos podem ser usados para executar após um período fixo de tempo. Como escolher e julgar?
Mesmo ponto
Eles possuem dois parâmetros, um é a string do código a ser executado, e o outro é o intervalo de tempo em milissegundos, após esse período de tempo irá executar o código.
diferença
Ainda há uma diferença entre essas duas funções: após setInterval executar o código uma vez, após esse intervalo de tempo fixo, ele repetirá automaticamente o código, enquanto setTimeout executa o código apenas uma vez.
O cronômetro de gotas de chuva usa "intervalo", o que significa que após o código ser executado uma vez, após esse intervalo de tempo fixo, ele repetirá automaticamente o código para formar um efeito de chuva ao invés de executar o código apenas uma vez.
3. Efeito da chuva
Aqui estão duas maneiras de criar e desenhar gotas de chuva. A primeira é o efeito de partícula e a segunda é o efeito de tela.
Método 1: Criar partículas para obter efeito de chuva
Chame diretamente o sistema de partículas subjacente de "ParticleSystem" da API ThingJS. O desenvolvimento de front-end precisa nomear as partículas, definir as coordenadas da cena e modificar os parâmetros de densidade (máximo e mínimo) das partículas. Quando o evento de clique "ligado" do mouse ocorre, execute este código de partícula repetidamente de acordo com o temporizador de "intervalo" para formar um grande efeito de chuva. 
Insira o código de visualização do módulo de partículas de exemplo oficial do site oficial >>
// 创建粒子 var particle = app.create({ type: 'ParticleSystem', name: 'Rain', url: 'https://model.3dmomoda.com/models/18112113d4jcj4xcoyxecxehf3zodmvp/0/particles', position: [0, 300, 0], complete: function (ev) { ev.object.scale = [10, 10, 10]; } });
// 设置粒子最大密度 particle.setGroupAttribute('maxParticleCount', 10000);
// 设置粒子最小密度 particle.setParticleAttribute('particleCount', 5000); }Método 2: Criar desenho de tela para obter efeito de chuva
(1) Crie uma tela
Crie uma tela na interface HTML, adicione a tela ao div da interface 2D embutida do ThingJS e defina a largura e a altura da janela atual. A fim de unificar a visão, ao obter a matriz do objeto gota de chuva, defina o comprimento da gota de chuva, velocidade de queda, ângulo de deflexão e outros parâmetros como um todo; aqui, o cronômetro de gotas de chuva é definido para chamar a função de desenhar gotas de chuva a cada 50 milissegundos.
interval = setInterval (newDrop, 50); // Definir para chamar a função de desenhar gotas de chuva a cada 50 milissegundos
(2) Desenhe gotas de chuva
O front end pode controlar a largura da linha, o estilo da linha, a cor e até mesmo a cor do gradiente. Para cores de gradiente, preste atenção em modificar a inclinação da linha e a cor correspondente e leve os efeitos de luz e sombra da natureza para a cena 3D, que é mais realista. Por fim, desenhe um caminho de gota de chuva, defina o ponto de partida e o ponto de término, para que as gotas de chuva não possam sair, formando um efeito de chuva contínuo, mesmo os não desenvolvedores o entendem sem barreiras!
Fim: ThingJS tem uma lógica de desenvolvimento de IoT poderosa e os desenvolvedores podem acessar os recursos da API da plataforma para concluir facilmente a construção da arquitetura interativa 3D em cenários de IoT e acelerar o desenvolvimento de projetos 3D!
Sobre ThingJS
ThingJS fornece componentes de visualização 3D da Internet das Coisas para tornar o desenvolvimento 3D mais fácil! O script 3D de chamada direta de Javascript, com base em 200 exemplos de código-fonte de desenvolvimento 3D, permite que você entenda completamente a lógica de desenvolvimento visual da Internet das Coisas. Criação de cena - desenvolvimento de script em 3D - implantação de projeto de encaixe de dados - serviço único para tornar o desenvolvimento mais eficiente e se tornar um inovador de tecnologia dupla digital com 200.000 desenvolvedores!