H5의 WebGL을 활용하여 3D 가상 컴퓨터실에서 로밍 애니메이션을 구현하는 방법

이번에는 H5의 WebGL을 사용하여 3D 가상 컴퓨터실의 로밍 애니메이션을 구현하는 방법과, H5의 WebGL을 사용하여 3D 가상 컴퓨터실의 로밍 애니메이션을 구현하기 위한 주의사항을 알려드리겠습니다. 실제 사례를 살펴보겠습니다. 3D에서 1인칭을 사용한다는 것은 슈팅 게임에서 1인칭을 사용하는 것을 의미합니다. 1인칭 슈팅 게임(FPS)은 1인칭 시점을 기반으로 하는 비디오 게임의 일종으로 총과 기타 무기를 중심으로 진행됩니다. 즉, 플레이어는 주인공의 눈을 통해 액션을 경험합니다. 장르가 시작된 이래로 고급 3D 및 의사 3D 그래픽은 하드웨어 개발에 어려움을 겪었고 멀티플레이어 게임은 필수가 되었습니다.

요즘 박물관이나 기업에서는 홍보영상 등을 제작하기 위해 3D 애니메이션을 활용하는 경우가 많습니다. 3D 애니메이션 해석의 가장 큰 장점은 내용이나 형식 면에서 사람들에게 실제적인 느낌을 준다는 점입니다. 그래픽 작품보다 직관적이고, 2D 애니메이션보다 현실적이어서 시청자에게 광고 환경에 있는 듯한 느낌을 줄 수 있어 광고의 설득력을 크게 높일 수 있다. 3D 기술의 발전은 관객의 구별 능력에도 도전해 관객의 판단이 가상과 현실 사이에서 표류하게 만든다.

또한 3D 특수 효과의 적용은 창의성을 위한 더 넓은 사고 공간을 제공하고, 창의적인 실행을 위한 확실한 보장이 되며, 창의성의 형식과 스타일을 풍부하게 합니다. 광고테마의 퍼포먼스 매력에 따라 몽환적이고 몽환적인 분위기를 조성하여 관객을 자극하고 감동시켜 관객과의 소통이라는 목적을 달성할 수 있다.

3D 애니메이션 홍보영상은 3D 애니메이션, 특수효과 장면, 기업 영상, 사진, 미래 전망 등의 컨텐츠를 후반작업 합성, 더빙, 내레이션 등을 통해 결합하여 직관적이고 생생하며 대중적인 고품격 기업 광고 영상으로 제작되어 사람들에게 사회 계층에 따라 사람들은 회사에 대해 긍정적이고 긍정적이며 좋은 인상을 갖게 되며 이를 통해 회사에 대한 호의와 신뢰가 형성되고 회사의 제품이나 서비스에 대한 신뢰가 생깁니다.

요즘 인류의 '현실' 추구로 인해 3D는 급속도로 발전하고 있으므로 3D를 잘 배우고 활용하는 것은 미래 성공의 필수 요소입니다.

이 기사의 예는 방문을 위해 컴퓨터실에 들어가는 것입니다. 문을 여는 동작은 적절한 회전과 결합되어 기본적으로 컴퓨터실을 방문하는 사람들의 효과를 완전히 시뮬레이션합니다. . 또 다른 장점은 굳이 조작하지 않고도 상사에게 보여주고 싶다면 이런 멋진 효과에 상사도 매우 만족하실 거라는 점이에요!

인터페이스의 "재설정" 및 "시작" 버튼은 본체에 직접 추가된 버튼이며 클릭 이벤트는 이 두 버튼에 추가됩니다.

<div></div><div></div>

전체 장면은 HT 캡슐화된 3D 구성 요소로 구성되어 매우 큰 규모를 구성합니다. 장면을 단순화하기 위해 장면을 별도로 꺼내고 HT로 캡슐화된 ht.JSONSerializer 클래스를 사용하여 장면을 json으로 직렬화하기 위해 코드에 도입했습니다. 모두를 위해 더 명확하게, 3D 장면이 구축되었다고 가정하여 여기에 예를 들어 보겠습니다.

dm = new ht.DataModel();g3d = new ht.graph3d.Graph3dView(dm);//.......构建好场景dm.serialize();//可以填入number参数，作为空格缩进值

이제 환경을 설정하고 json 파일로 변환했으므로 이 경우 코드 제어가 어렵습니다. 그러면 DataModel 데이터

모델

이 역직렬화됩니다. 이 함수 의 기능은 json 형식을 객체로 변환하고 역직렬화된 객체를 DataModel 데이터 모델에 전달하는 것입니다. 자세한 내용은 웹용 HT를 참조하세요. 직렬화 매뉴얼:

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() === "path") {      
 return false;   
}   
return true;});
g3d.setEye([523, 5600, 8165]);g3d.setFar(60000);dataModel.deserialize(json);

현재 장면의 "문"과 우리가 택할 경로 "경로"를 작동하고 DataModel 데이터 모델을 순회하여 다음 두 데이터를 얻어야 합니다.

for (var i = 0; i < dataModel.size(); i++) {   
var data = dataModel.getDatas().get(i);  
 if (data.getName() === "门")
{//json中设置的名称      
window.door = data;   
}   
if (data.getName() === "path")
{       
path = data;   
}   
if (window.door && path)
{//获取到door 和 path 的data之后就跳出循环       
break;  
 }}

이 예에서는 원점으로 돌아가기 위한 "리셋", "동작 시작", "앞으로 이동", "정지"의 네 가지 동작이 있습니다. "시작" 버튼을 클릭하세요. "작업 시작"에서는 "문 열기" 작업만 수행합니다. 작업이 끝난 후 앞으로 이동하려면 "앞으로" 함수를 호출하세요.

function startAnim() {
    
if (window.isAnimationRunning)
{       
return;  
 }   
reset();   
window.isAnimationRunning = true;//动画是否正在进行    ht.Default.startAnim({      
 frames: 30, // 动画帧数，默认采用`ht.Default.animFrames`。       
interval: 20, // 动画帧间隔，默认采用`ht.Default.animInterval`。          
finishFunc: function() {// 动画结束后调用的函数。           
forward();       
},        
action: function(t){ // action函数必须提供，实现动画过程中的属性变化。           
door.setRotationY(-120 * Math.PI / 180 * t);       
}   
});
}

"재설정" 기능 여기에 "재설정"이 있습니다. "원점으로 돌아가는 기능입니다. 이 기능을 사용하여 "문"의 위치를 ​​포함하여 모든 변경 사항을 초기 위치로 복원합니다.

function reset()
{   
if (window.isAnimationRunning)
{       
return;   
}   
g3d.setCenter([0,0,0]);   
g3d.setEye([523, 5600, 8165]);    window.forwardIndex = 0;  
 door.setRotationY(0);}

"이동"하려면 반드시 "경로"가 필요합니다. " 걷기, 이것은 방금 얻은 것입니다. "경로"에 대해 window.points = path.getPoints()._as를 통해 "경로"의 모든 요소를 ​​얻습니다. 초기화 window.forwardIndex = 0; 을 제어하여 3D 장면을 설정합니다. "path" Eye와 Center 전후의 두 점을 사용하면 우리가 첫 번째 사람인 듯한 효과를 낼 수 있습니다

var point1 = points[forwardIndex],   
 point2 = points[forwardIndex + 1];var distanceX = (point2.x - point1.x),    
distanceY = (point2.y - point1.y),    
distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY)-200;//两点之间的距离通过三角形勾股定理计算 怕碰墙所以-200g3d.setEye([point1.x, 1600, point1.y]);//眼睛g3d.setCenter([point2.x, 1600, point2.y]);//我

HT의 3D 구성 요소에는 눈의 위치를 ​​변경하는 walk(step, anim, firstPersonMode) 메서드가 있습니다. 중심, 즉 눈과 중심 두 점에 의해 설정된 벡터 방향으로 동일한 오프셋을 동시에 이동합니다. step은 오프셋 벡터 길이 값입니다. firstPersonMode 매개변수가 비어 있으면 기본적으로 Graph3dView#isFirstPersonMode()의 현재 값이 사용됩니다. 1인칭 모드에 대해 걷기 작업이 호출되면 이 함수는 Graph3dView#getBoundaries()의 경계 제한을 고려합니다.

g3d.walk(distance, {   
frames: 50,   
interval: 30,   
easing: function(t) {return t; },   
finishFunc: function() {       
forwardIndex += 1;       
if (points.length - 2 > forwardIndex) {//points.length = 5            g3d.setCenter([point2.x, 1600, point2.y]);//把结束点变成起始点           
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];//json 中path的points 的最后一个点          
 g3d.setCenter([lastPoint.x, 1400, lastPoint.y]);           
g3d.rotate(-Math.PI / 2, 0,
{              
 frames: 30,              
 interval: 30,              
 finishFunc: function()
{                   
window.isAnimationRunning = false;              
 }          
 });      
 }   
}});

不管“path”的点有多少个，这个判断语句还是能运作，只在最后一个点是跳出 finishFunc 动画结束后调用的函数，并将 window.isAnimationRunning 值设为 false 停止 startAnim 函数。如果不是最后一个点，用户“旋转”之后，回调 forward 函数。至此，全部代码解释完毕，很短的代码量，却做出了这么大的工程！

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关阅读：

手机端怎样用rem+scss做适配

canvas如何实现github404动态

위 내용은 H5의 WebGL을 활용하여 3D 가상 컴퓨터실에서 로밍 애니메이션을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!