우리는 기본 WebGL API 개발을 사용하는 것이 얼마나 피곤한 지 보았습니다. 이로 인해 많은 WebGL 프레임 워크가 개발되었습니다. 이러한 프레임 워크를 사용하면 필요한 3D 장면을 빠르게 만들 수 있습니다. 이 프레임 워크는 장면, 카메라, 모델, 조명, 재료 등과 같이 다양한 정도로 3D 장면을 생성하는 다양한 요소를 캡슐화합니다. 이 캡슐화 된 객체를 사용하면 필요한 3D 장면을 쉽게 만들 수 있으므로 논리에 더 많은 에너지를 집중하면됩니다.
현재 아무도 다른 프레임 워크를 압도하는 이점이 없습니다. 어떤 종류의 프레임을 선택 해야하는지 개인 취향에 따라 다릅니다. 그러나 프레임 워크를 선택할 때 개인적으로 프레임 워크의 마지막 업데이트 시간을 보는 것이 낫다고 생각합니다. 안정적인 업데이트 프레임 워크를 선택하면 항상 최신 기능을 사용하고 프로그램을보다 안정적으로 만들 수 있습니다.
다음 예제는 개발을 위해 Three.JS 프레임 워크를 사용합니다.
Three.JS는 비교적 포괄적 인 오픈 소스 프레임 워크로, 3D 장면의 다양한 요소가 잘 캡슐화됩니다. 카메라, 모델, 조명, 재료 등을 쉽게 만들 수 있습니다. 다른 렌더러를 선택할 수도 있습니다. Three.JS는 다양한 렌더링 방법을 제공합니다. 캔버스를 사용하여 렌더링하거나 WebGL 또는 SVG를 사용하여 렌더링 할 수 있습니다.
또한 3.JS는 여러 형식으로 3D 파일을로드 할 수 있으며 모델 파일은 Blender, Maya, Chinema4D, 3Dmax 등에서 나올 수 있으며 (구체) 구체, (항공기) 비행기, (큐브) 큐브, (실린더) 실린더에서 비교적 기본적인 것들이 있습니다. Three.js는이 객체를 매우 쉽게 만듭니다.
좋아, 말도 안되는 말을하지 말고 코드를보십시오.
<! doctype html>
<html>
<헤드>
<title> Threejsdemo </title>
<meta charset = "utf-8">
<스타일>
몸
{
여백 : 0px;
배경색 :#B0B0B0;
과부하 : 숨겨진;
}
</스타일>
</head>
<body>
<script src = "Three.js"> </script>
<cript>
var 카메라, 장면, 렌더러;
var mesh;
init ();
생기 있게 하다();
함수 init () {
장면 = 새로운 3.scene ();
카메라 = 새로운 3.perspectiveCamera (70, window.innerWidth /Window.innerHeight,1,1000);
Camera.Position.z = 400;
scene.add (카메라);
지오메트리 = 새로운 3.cubegeometry (200,200,200);
재료 = 새로운 3.meshbasicmaterial ({color : 0xff0000, Wireframe : true});
메시 = 새로운 3.mesh (지오메트리, 재료);
scene.add (mesh);
renderer = new Three.WebGlrenderer ();
renderer.setsize (window.innerwidth, window.innerheight);
document.body.appendChild (renderer.domelement);
}
기능 애니메이션 () {
requestAnimationFrame (애니메이션);
mesh.rotation.x += 0.05;
mesh.rotation.y += 0.05;
렌더러. 렌더 (장면, 카메라);
}
</스크립트>
</body>
</html>
이것은 WebGL API를 사용한 이전 코드와 비교하여 모든 코드입니다. 이것은 너무 간단합니다.
코드는 매우 직관적이며 몇 단계 만 있습니다.
1. 장면 장면을 만듭니다.
2. 카메라 카메라를 만듭니다.
3. 모델 형상 생성/로드.
4. 재료를로드하십시오.
5. 모델 객체 메쉬 (지오메트리 및 재료로 구성)를 렌더링합니다.
6. 애니메이션 활성화.
이것은 각 프레임 워크에서 제공하는 기능입니다. 다른 프레임 워크를 사용하는 것은 기본적으로 함수 이름이 다를 수 있다는 점을 제외하고는 동일합니다. 다음 참조에는 많은 프레임 워크 학습 문서가 나열되며 여러 가지 학습 방법을 선택할 수 있습니다.
모델 데이터와 관련하여 JSON은 짧고 간결하기 때문에 네트워크 전송에 더 적합하기 때문에 한 가지 말을하고 싶습니다. 앞으로 WebGL에 가장 적합한 모델 데이터 형식이 될 수 있으므로 많은 프레임 워크가 JSON 형식의 모델 데이터를 지원하기 시작했습니다.
실제 참조 :개발 센터 : https://developer.mozilla.org/en/webgl
프리미엄 온라인 개발 도구 : http://webglplayground.net/
다양한 프레임 워크에 대한 기본 튜토리얼 : http : //www.html5/ "> html5china.com/html5features/webgl/
Webgl Chinese Tutorial : http://www.hwebgl.com/?p=42
Oak3d 중국 자습서 : http://www.hwebgl.com/?cat=57
Cubicvr3d 공식 웹 사이트 : http://www.cubicvr.org/
Three.js 그래픽 라이브러리 : https://github.com/mrdoob/three.js
다양한 프레임 워크에 대한 게시물 수집 : http://www.appcrews.com/2011/07/129.html