1. 텍스트 모양
3D 텍스트에 대해 말하면, 나는 초기에 단어의 예술적 단어를 기억합니다.
그런 다음 TextGeometry 사용하여 3 차원 텍스트 모양을 만들 수 있습니다.
텍스트 모양을 사용하려면 추가 글꼴 라이브러리를 다운로드하고 인용해야합니다. 여기에서 helvetiker 글꼴을 예로 들어 봅시다.
인용하다:
<script type = "text/javaScript"src = "당신의 경로/helvetiker_regular.typeface.json"> </script>
TextGeometry의 생성자는 다음과 같습니다.
Three.TextGeometry (텍스트, 매개 변수)
텍스트는 문자 그대로 문자열입니다.
매개 변수는 다음 매개 변수로 구성된 개체입니다.
・ 크기 : 글꼴 크기, 일반적으로 대문자 높이
・ 높이 : 텍스트의 두께
Curvesegments : 아크 세그먼트의 수는 텍스트의 곡선을 더 매끄럽게 만듭니다.
・ font : font, default는 'helvetiker'이며 참조 해야하는 글꼴 파일
・ weight : 값은 '정상'또는 '굵은'이므로 두껍는지를 나타냅니다.
・ 스타일 : 값은 '정상'또는 '이탤릭체'이며 이탤릭체가 이탤릭체인지 여부를 나타냅니다.
・ BevelEnabled : 조모 사용 여부, 부울 값, 가장자리에서 비스듬히 절단하는 것을 의미합니다.
bevelthickness : 아모프 두께
bevelsize : 모 찰퍼 너비
3 차원 텍스트 만들기 : new THREE.TextGeometry('Hello', {size: 1, height: 1})， 그 효과는 다음과 같습니다.
원하는 효과를 달성하기 위해 재료 및 조명을 적절하게 조정할 수 있습니다.
// 금속 빛나는 물체 var 재료 = 새로운 3.meshphongmaterial ({color : 0xffff00, ppecular : 0xffff00, // 하이라이트 부품의 밝기와 하이라이트 부품의 색상을 지정하십시오. 색상 특성과 동일한 색상으로 설정하면 금속과 유사한 다른 재료가 얻어지면 회색 회색으로 설정되면 플라스틱 shininess가 표시됩니다. 30}); // 방향 조명 var light = new Three.DirectionAllight (0xffffff); light.position.set (-5, 10, 5); scene.add (light);소스 코드 :
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> 3.js 테스트 Six </title> </head> <body onload = "init ()"> <canvas id = "maincanvas"> </canvas> </body> <script type = "text/javascript" src = "JS/Three.min.js"> </script> <!-자세한 정보는 https://github.com/mrdoob/three.js/tree/mas document.getElementById ( 'maincanvas')}); renderer.setClearColor (0x0000000); var scene = new Three.Scene (); // 카메라 var 카메라 = 새로운 3.othographiccamera (-2.5, 2.5, 1.875, -1.875, 0.1, 100); Camera.Position.set (5, 5, 20); Camera.LOOKAT (New Three.Vector3 (1, 0, 0)); scene.add (카메라); // var material = new Three.MeshBasicMaterial ({// 색상 : 0xffff00, // WireFrame : True //}); // 금속 빛나는 개체 var var var var var var 3.meshphongmaterial ({color : 0xffff00, ppecular : 0xffff00, // 하이라이트 부품의 밝기와 하이라이트 부품의 색상을 지정합니다. 색상 특성과 동일한 색상으로 설정하면 또 다른 금속 같은 재료가 얻어 질 것입니다. 회색으로 설정하면 플라스틱 부위가 나타납니다. // Direction light var light = new Three.DirectionAllight (0xffffff); light.position.set (-5, 10, 5); scene.add (빛); // font var loader = new Three.FontRoader (); loader.load ( './ helvetiker_regular.typeface.json', function (font) {var mesh = new Three.Mesh (new Three.TextGeometry ( 'hello : {font : font, size : 1, 높이 : 1}), 자료); sceent.Add (mesh); // 렌더 렌더 렌더 (render,}); } </script> </html>2. 사용자 정의 모양
3.js가 제공하지 않은 모양의 경우 사용자 정의 모양을 제공하여 작성할 수 있습니다.
맞춤형 모양은 각 정점 위치와 정점 연결의 수동 사양이 필요하기 때문에 모양이 매우 복잡한 경우 프로그래머의 계산은 비교적 커집니다. 이 경우 3ds Max와 같은 모델링 소프트웨어에서 모델을 생성 한 다음 3.js를 사용하여 장면으로 가져 오는 것이 좋습니다. 이는보다 효율적이고 편리합니다.
사용자 정의 모양은 CubeGeometry , SphereGeometry 등과 같은 다른 기하학적 형태의 부모 클래스 인 Geometry 클래스를 사용하며 생성자는 다음과 같습니다.
THREE.Geometry()
형상을 초기화 한 다음 정점 위치 및 정점 연결 상태를 설정하십시오.
소스 코드 :
<! docType html> <html> <head> <meta charset = "utf-8"> <title> 3.js 테스트 6-two </title> </head> <body onload = "init ()"> <canvas id = "maincanvas"> </canvas> </body> <cript type = "text/javascript" src = "JS/Three.js"> </script> <script type = "text/javaScript"> function () {var renderer = new Three.WebGlrenderer ({canvas : document.getElementBas ( 'mainCanvas')}); renderer.setClearColor (0x0000000); var scene = new Three.Scene (); // 카메라 var 카메라 = 새로운 3.othographiccamera (-5, 5, 3.75, -3.75, 0.1, 100); Camera.Position.set (25, 25, 25); Camera.LOOKAT (New Three.Vector3 (0, 0, 0)); scene.add (카메라); var 자료 = 새로운 3.meshbasicmaterial ({color : 0xffff00, Wireframe : true}); // 지오메트리 초기화 var Geometry = new Three.Geometry (); // 정점 위치 설정 // 상단 4 정점 Geometry.vertices.push (새 3.vector3 (-1, 2, -1)); geometry.vertices.push (new Three.Vector3 (1, 2, -1)); geometry.vertices.push (new Three.Vector3 (1, 2, 1)); geometry.vertices.push (new Three.Vector3 (-1, 2, 1)); geometry.vertices.push (new Three.Vector3 (-1, 2, 1)); geometry.vertices.push (new Three.Vector3 (-1, 2, 1)); geometry.vertices.push (new Three.Vector3 (-1, 2, 1)); geometry.vertices.push (new Three.Vector3 (-1, 2, 1)); // 하단 4 정점 Geometry.vertices.push (new Three.Vector3 (-2, 0, -2)); geometry.vertices.push (new Three.Vector3 (2, 0, -2)); geometry.vertices.push (new Three.Vector3 (2, 0, 2)); geometry.vertices.push (new Three.Vector3 (2, 0, 2)); geometry.vertices.push (new Three.Vector3 (-2, 0, 2)); // 정점 연결 상태 설정 // 상단 지오메트리.faces.push (새 3.face3 (0, 1, 3)); geometry.faces.push (새 3.face3 (1, 2, 3)); // geometry.faces.push (new Three.face4 (0, 1, 2, 3)); // 하단 지오메트리 .faces.push (새 3.face3 (4, 5, 6)); geometry.faces.push (새로운 3.face3 (5, 6, 7)); // geometry.faces.push (new Three.face4 (4, 5, 6, 7)); // Side Geometry.faces.push (New Three.face3 (1, 5, 6)); geometry.faces.push (새 3.face3 (6, 2, 1)); geometry.faces.push (새 3.face3 (2, 6, 7)); geometry.faces.push (새 3.face3 (7, 3, 2)); geometry.faces.push (새 3.face3 (3, 7, 0)); geometry.faces.push (새 3.face3 (7, 4, 0)); geometry.faces.push (새 3.face3 (0, 4, 5)); geometry.faces.push (새 3.face3 (0, 4, 5)); geometry.faces.push (새 3.face3 (0, 4, 5)); geometry.faces.push (새 3.face3 (0, 5, 1)); // // 4 개의 정점으로 구성된 얼굴 // geometry.faces.push (new Three.face4 (0, 1, 5, 4)); // geometry.faces.push (new Three.face4 (1, 2, 6, 5)); // geometry.faces.push (new Three.face4 (2, 3, 7, 6)); // geometry.faces.push (new Three.face4 (3, 0, 4, 7)); var mesh = new Three.Mesh (지오메트리, 재료); scene.add (mesh); // 렌더 렌더러 렌더 (장면, 카메라); } </script> </html> new THREE.Vector3(-1, 2, -1) vertex 위치로 geometry.vertices 배열에 추가되는 벡터를 생성한다는 점에 유의해야합니다.
그리고 3 개의 정점으로 구성된 얼굴은 new THREE.Face3(0, 1, 2) 에 의해 만들어지며이를 geometry.faces 배열에 추가하십시오. 세 가지 매개 변수는 geometry.vertices 에서 3 개의 정점의 시퀀스 번호입니다. 4 개의 정점으로 구성된 패치를 설정 해야하는 경우 THREE.Face4 유사하게 사용할 수 있습니다.
// Top Geometry.faces.push (새로운 Three.face4 (0, 1, 2, 3)); // 하단 지오메트리.faces.paces.push (새 3.face4 (4, 5, 6, 7)); // 4면 geometry.faces.paces.push (new Three.face4 (0, 1, 5, 4); 5)); geometry.faces.push (new Three.face4 (2, 3, 7, 6)); Geometry.faces.push (New Three.face4 (2, 3, 7, 6)); Geometry.faces.push (New Three.face4 (3, 0, 4, 7));
위의 내용은 3.js 학습 텍스트 모양 및 편집기가 컴파일 한 사용자 정의 모양의 전체 내용입니다. 편집자는 또한 3.JS에 관한 여러 관련 기사를 편집했습니다. 필요한 경우 아래 관련 기사의 링크를 통해 볼 수 있습니다. 3.js를 배우는 모든 사람을 도울 수 있기를 바랍니다.