의견 : 우리는 많은 WebGL 프레임 워크가 개발 되었기 때문에 기본 WebGL API를 사용하여 개발하는 것이 얼마나 피곤한 지 보았습니다. 이 프레임 워크는 3D 장면을 다양한 수준으로 만드는 다양한 요소를 캡슐화합니다. 필요한 3D 장면을 신속하게 만들 수 있습니다. 관심있는 친구들은 그것에 대해 배울 수 있습니다. 아마도이 기사는 당신에게 도움이 될 것입니다.
우리는 기본 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
프리미엄 온라인 개발 도구 :
다양한 프레임 워크에 대한 기본 튜토리얼 :
Webgl Chinese 튜토리얼 :? p = 42
OAK3D 중국 튜토리얼 :? cat = 57
cubicvr3d 공식 웹 사이트 :
Three.js 그래픽 라이브러리 : https://github.com/mrdoob/three.js
다양한 프레임에 대한 수집 게시물 :