O uso da primeira pessoa em 3D refere-se ao uso da primeira pessoa em jogos de tiro (FPS) são um tipo de videogame baseado em uma perspectiva de primeira pessoa centrada em armas e outras armas. o jogador passa Experimente a ação através dos olhos do protagonista. Desde o início do gênero, os gráficos 3D e pseudo-3D avançados desafiaram o desenvolvimento de hardware e os jogos multijogador tornaram-se indispensáveis.
Uma captura de tela de Doom, um dos jogos mais inovadores do gênero, mostrando a perspectiva típica de um jogo de tiro em primeira pessoa
Hoje em dia, museus ou empresas utilizam frequentemente a animação 3D para fazer vídeos promocionais, etc. A maior vantagem da interpretação da animação 3D é que ela dá às pessoas uma sensação real em termos de conteúdo e forma. É mais intuitivo que os trabalhos gráficos e mais realista que a animação 2D, por isso pode dar ao espectador a sensação de estar no ambiente publicitário, aumentando muito o poder de persuasão da publicidade. O desenvolvimento da tecnologia 3D desafia até mesmo a capacidade de distinção do público, fazendo com que o julgamento do público flutue entre o virtual e a realidade.
Além disso, a aplicação de efeitos especiais 3D proporciona um espaço de pensamento mais amplo para a criatividade, torna-se uma garantia confiável para a execução criativa e enriquece a forma e o estilo da criatividade. De acordo com o apelo performático do tema publicitário, pode-se criar uma atmosfera onírica e mágica para estimular e impressionar o público, atingindo assim o objetivo de comunicação com o público.
O vídeo promocional animado em 3D combina animação 3D, tomadas de efeitos especiais, vídeos corporativos, fotos, perspectivas futuras e outros conteúdos por meio de síntese de pós-produção, dublagem e narração para formar um vídeo de publicidade corporativa de alto nível intuitivo, vívido e popular, permitindo que pessoas de diferentes níveis da sociedade para criar uma impressão positiva, positiva e boa na empresa, estabelecendo assim boa vontade e confiança na empresa e confiando nos produtos ou serviços da empresa.
O rápido desenvolvimento do 3D agora se deve à busca da realidade pela humanidade, portanto, aprender a usar bem o 3D é uma parte indispensável do sucesso futuro.
A ideia do exemplo deste artigo é visitar uma sala de informática. A ação de abrir a porta não pode ser mais dinâmica, basicamente simula completamente o efeito de quem visita a sala de informática. Outra vantagem é que se você quiser demonstrar para seu chefe sem ter que operá-lo, seu chefe ficará muito satisfeito com esse efeito bacana!
http://www.hightopo.com/demo/room-walkthrough/index.html
Os botões de reinicialização e início na interface são botões adicionados diretamente ao corpo, e os eventos de clique são adicionados a estes dois botões:
<div></div><div></div>
A cena inteira é construída a partir de componentes 3D encapsulados em HT. Construir uma cena tão grande requer uma certa quantidade de código. Para simplificar, retirei a cena separadamente e usei a classe ht.JSONSerializer encapsulada em HT para serializar a cena em JSON. Apenas o arquivo json gerado é introduzido no código. Para ficar mais claro, darei aqui um exemplo, assumindo que a cena 3D foi construída:
dm = new ht.DataModel();g3d = new ht.graph3d.Graph3dView(dm);//....Construa a cena dm.serialize();//Você pode preencher o parâmetro numérico como uma abreviação de espaço Valor adicionado
Agora que configuramos o ambiente e o convertemos em um arquivo json, é difícil controlar o código. Nesse caso, desserializaremos o modelo de dados DataModel. A função desta função é converter o formato json em um objeto. e desserializá-lo. O objeto é passado para o modelo de dados DataModel. Para obter detalhes, consulte o manual de serialização do HT para Web:
var g3d = window.g3d = new ht.graph3d.Graph3dView(), dataModel = g3d.dm(), view = g3d.getView(), path = null;g3d.setMovableFunc(function(data) { return false;}) ;g3d.setVisibleFunc(function(data) { if (data.getName() === caminho) { return false; } return verdadeiro;});g3d.setEye([523, 5600, 8165]);g3d.setFar(60000);dataModel.deserialize(json);Atualmente precisamos operar a porta da cena e a rota que vamos seguir, percorrer o modelo de dados DataModel e obter estes dois dados:
for (var i = 0; i < dataModel.size(); i++) { var data = dataModel.getDatas().get(i); if (data.getName() === gate) {//Definir em json O nome de window.door = data } if (data.getName() === path) { path = data } if (window.door && path) {//Obter porta e caminho; Após os dados, saia do loop }}Simplificando, existem apenas quatro ações neste exemplo: redefinir para o ponto original, iniciar a ação, avançar e parar. Clique no botão iniciar. Na ação inicial, realizamos apenas uma ação, a ação de abertura da porta. Após a conclusão da ação, chamamos a função avançar para avançar:
function startAnim() { if (window.isAnimationRunning) { return; reset(); window.isAnimationRunning = true;//Se a animação está em andamento ht.Default.startAnim({ frames: 30, //O número de animação frames, usados por padrão `ht.Default.animFrames`．interval: 20, //O intervalo do quadro de animação usa `ht.Default.animInterval` por padrão. function() {// A função chamada após o término da animação forward() }, action: function(t){ // A função de ação deve ser fornecida para implementar as alterações de atributos durante a animação. * PI / 180 * t); } });}A função de reinicialização aqui é a função de retornar ao ponto original. Usamos esta função para restaurar todas as alterações à posição inicial, incluindo a posição da porta:
função reset() { if (window.isAnimationRunning) { return } g3d.setCenter([0,0,0]); (0);}Para mover, você definitivamente precisa de um caminho de caminhada, que é o caminho que acabamos de obter. Obtenha todos os elementos do caminho através de window.points = path.getPoints()._as; parte de trás do caminho. Defina o Olho e Centralize a cena 3D em dois pontos, de modo a criar um efeito de que somos a primeira pessoa:
var ponto1 = pontos[forwardIndex], ponto2 = pontos[forwardIndex + 1];var distânciaX = (ponto2.x - ponto1.x), distânciaY = (ponto2.y - ponto1.y), distância = Math.sqrt(distânciaX * distânciaX + distânciaY * distanceY)-200;//A distância entre dois pontos é calculada através do teorema de Pitágoras do triângulo Tenho medo de bater na parede, então -200g3d.setEye([point1.x, 1600, point1.y]);//Eye. g3d.setCenter([ponto2 .x, 1600, ponto2.y]);//I
O componente 3D em HT possui um método walk(step, anim, firstPersonMode) Esta função altera as posições do olho e do centro ao mesmo tempo. Ou seja, o olho e o centro se movem no mesmo deslocamento na direção do vetor estabelecida pelo. dois pontos ao mesmo tempo. step é o valor do comprimento do vetor de deslocamento. Quando o parâmetro firstPersonMode está vazio, o valor atual de Graph3dView#isFirstPersonMode() é usado por padrão. Se a operação de caminhada for chamada para o modo de primeira pessoa, esta função considerará as restrições de limite de Graph3dView#getBoundaries().
g3d.walk(distance, { frames: 50, interval: 30, easing: function(t) {return t; }, finishFunc: function() { forwardIndex += 1; if (points.length - 2 > forwardIndex) {/ /pontos.comprimento = 5 g3d.setCenter([ponto2.x, 1600, point2.y]);//Muda o ponto final para o ponto inicial g3d.rotate(Math.PI / 2, 0, { frames: 30, interval: 30, easing: function(t) {return t;}, finishFunc : function() { forward();} } } else { var lastPoint = points[points.length - 1];//pontos do caminho em json O último ponto g3d.setCenter([lastPoint.x, 1400, lastPoint.y]); g3d.rotate(-Math.PI / 2, 0, { frames: 30, interval: 30, finishFunc: function() { window . isAnimationRunning = false; } });Não importa quantos pontos existam no caminho, esta declaração de julgamento ainda pode funcionar. Apenas o último ponto é pular para fora da função chamada após o término da animação finishFunc e definir o valor window.isAnimationRunning como false para interromper a função startAnim. . Se não for o último ponto, após a rotação do usuário, a função forward é chamada de volta. Neste ponto, todos os códigos foram explicados. Um projeto tão grande foi realizado em uma quantidade muito curta de código!
ResumirO texto acima é a animação de roaming de sala de computador virtual 3D clássica baseada em HTML5 apresentada pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe-me uma mensagem e o editor responderá a tempo. Gostaria também de agradecer a todos pelo apoio ao site de artes marciais VeVb!