Three.JS는 브라우저에서 실행되는 3D 엔진입니다. 카메라, 빛과 그림자, 재료 및 기타 물체를 포함한 다양한 3 차원 장면을 만들 수 있습니다. 홈페이지에서 많은 멋진 시연을 볼 수 있습니다. 그러나이 엔진은 여전히 비교적 미숙 한 개발 단계에 있습니다. API가 부족하고 문서화 부족으로 인해 초보자에 대한 학습의 어려움 (특히 문서 부족)이 증가했습니다. Three.js 코드는 Github에서 호스팅됩니다.
http://github.com/mrdoob/three.js/
예를 살펴 보겠습니다
<! docType html> <html> <head> <meta charset = "utf-8"/> <title> </title> </head> <script type = "text/javaScript"src = "js/3.js"> </script> <style> div#canvas-frame {테두리 : 없음; 커서 : 포인터; 너비 : 100%; 높이 : 600px; 배경색 : #eeeeee; } </style> <cript> var 렌더러; function initthree () {width = document.getElementById ( 'canvas-frame'). clientWidth; height = document.getElementById ( 'canvas-frame'). clientHeight; // 렌더러는 렌더링 결과와 페이지에 어떤 요소를 그려야하는지, 그리고이를 그리는 방법을 결정합니다. renderer = new Three.webglrenderer ({antialias : true}); 렌더러 .SetSize (너비, 높이); // domElement는 렌더러의 캔버스를 나타내며 모든 렌더링은 document.getElementById ( 'canvas-frame')에 그려집니다. renderer.setClearColor (0xfffff, 1.0); } // 카메라 관점 카메라 var 카메라; 함수 initcamera () {camera = new Three.PerspectiveCamera (45, 너비/높이, 1,10000); camera.position.x = 0; Camera.Position.y = 1000; Camera.Position.z = 0; 카메라 .up.y = 0; 카메라 .up.y = 0; 카메라 .up.z = 1; camera.lookat ({x : 0, y : 0, z : 0}); } // 장면 var 장면; 함수 initscene () {scene = new Three.Scene (); } // light var light; 함수 initlight () {light = new Three.DirectionAllight (0xff0000, 1.0, 0); light.position.set (100, 100, 200); scene.add (빛); } // Geometry var Cube; 함수 initObject () {// 선언 된 지오메트리, var geometry = new Three.geometry ()를 저장하는 데 사용할 수있는 정점 매개 변수가 있습니다. // lineBasicMaterial (매개 변수) // 기본 변환 : 기본 // 재료 번역 : 원료 // 매개 변수 : 재료의 모양을 정의하는 객체입니다. 자료를 정의하기위한 여러 속성이 포함되어 있습니다. 이 속성은 // 번역 : 매개 변수 // 색상 : 선의 색상으로, 16 진수로 표시되고 기본 색상은 흰색입니다. // linewidth // linecap : 선의 양쪽 끝의 모양은 기본적으로 둥글게됩니다. 효과는 선이 더 두껍을 때만 볼 수 있습니다. // 캡 번역 : HAT // LineJoin : 기본적으로 두 줄 사이의 연결 지점의 모양. // 번역에 가입 : 추가 // vertexColors : 라인 자료가 정점 요소를 사용하는지 여부를 정의하면 부울 값입니다. 그것은 선의 각 부분의 색상이 정점의 색상에 따라 보간된다는 것을 의미합니다. // vertex 번역 : Vertex // Fog : 재료의 색상이 글로벌 포그 효과의 영향을 받는지 여부를 정의합니다. // 번역 : FOG VAR 재료 = NEW THRE.LINEBASICMATERIAL ({vertexColors : true}); // 두 엔드 포인트의 색상 인 두 가지 색상을 정의합니다. var color1 = new Three.Color (0x4444444), color2 = new Three.Color (0xff0000); // 라인의 자료는 두 점의 색상에 의해 결정될 수 있습니다. var p1 = new Three.vector3 (); var p2 = new Three.vector3 (); P1. 세트 (-100,0,100); P2. 세트 (100,0, -100); geometry.vertices.push (p1); geometry.vertices.push (p2); geometry.colors.push (color1, color2); // 선을 정의하고 3 개의 매개 변수가 여기에 전달됩니다. // 첫 번째는 두 개의 정점과 정점 색상을 포함하는 Geometry Geometry입니다. // 두 번째는 선의 재료입니다. // 장면에 줄을 추가합니다 .add (line); } 함수 threestart () {initthree (); initcamera (); initscene (); initlight (); initObject (); renderer.clear (); 렌더러. 렌더 (장면, 카메라); } </script> <body onload = "threestart ()"> <div id = "canvas-frame"> </div> </body> </html>이 예제가 Three.js를 배우는 데 도움이되기를 바랍니다