Skip to content

T
three.js

Ablesons / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 1f7353eb 编写于 作者: H hareha
浏览文件
操作

created docs/api/ko/constants and modified

上级 27251d79
展开全部 隐藏空白更改
内联 并排
Showing with 964 addition and 31 deletion
docs/api/ko/animation/KeyframeTrack.html
浏览文件 @ 1f7353eb
......@@ -98,9 +98,9 @@
</p>
<p>
오브젝트 이름으로 골자나 멀티머티리얼을 특정할 수도 있습니다. 예시:
오브젝트 이름으로 골자나 다중 재질을 특정할 수도 있습니다. 예시:
.bones[R_hand].scale;
추가적으로, 머티리얼 배열의 네 번째 머티리얼의 확상광 중 레드 채널은 .materials[3].diffuse[r]로 접근할 수 있습니다.
추가적으로, 재질 배열의 네 번째 재질의 확상광 중 레드 채널은 .materials[3].diffuse[r]로 접근할 수 있습니다.
</p>
<p>
......
docs/api/ko/audio/AudioListener.html
浏览文件 @ 1f7353eb
......@@ -13,7 +13,7 @@
<p class="desc">
[name]는 장면 안의 모든 지정 및 비지정 오디오 효과의 가상 [link:https://developer.mozilla.org/de/docs/Web/API/AudioListener listener]입니다.<br />
three.js 앱은 일반적으로 단일 [name] 인스턴스를 생성합니다. 이는 [page:Audio Audio]와 [page:PositionalAudio PositionalAudio] 같은 오디오 엔티티의 필수 생성자 파라미터입니다.<br />
three.js 앱은 일반적으로 단일 [name] 인스턴스를 생성합니다. 이는 [page:Audio Audio]와 [page:PositionalAudio PositionalAudio] 같은 오디오 개체의 필수 생성자 파라미터입니다.<br />
대부분의 경우, 리스너 오브젝트는 카메라의 자식입니다. 그래서 카메라의 3D 변환은 곧 리스너의 3D 변환이 됩니다.
</p>
......@@ -67,7 +67,7 @@
<p>기본값은 *null*입니다.</p>
<h3>[property:Number timeDelta]</h3>
<p>오디오 엔티티에 대한 시간 델타값입니다. [link:https://developer.mozilla.org/en-US/docs/Web/API/AudioParam/linearRampToValueAtTime AudioParam.linearRampToValueAtTimeDefault]()에서 사용됩니다. 기본값은 *0*입니다.</p>
<p>오디오 개체에 대한 시간 델타값입니다. [link:https://developer.mozilla.org/en-US/docs/Web/API/AudioParam/linearRampToValueAtTime AudioParam.linearRampToValueAtTimeDefault]()에서 사용됩니다. 기본값은 *0*입니다.</p>
<h2>메서드</h2>
......
docs/api/ko/constants/Animation.html 0 → 100644
浏览文件 @ 1f7353eb
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>애니메이션 상수</h1>
<h2>루프 모드</h2>
<code>
THREE.LoopOnce
THREE.LoopRepeat
THREE.LoopPingPong
</code>
<h2>보간법 모드</h2>
<code>
THREE.InterpolateDiscrete
THREE.InterpolateLinear
THREE.InterpolateSmooth
</code>
<h2>엔딩 모드</h2>
<code>
THREE.ZeroCurvatureEnding
THREE.ZeroSlopeEnding
THREE.WrapAroundEnding
</code>
<h2>소스 코드</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/constants.js src/constants.js]
</p>
</body>
</html>
docs/api/ko/constants/Core.html 0 → 100644
浏览文件 @ 1f7353eb
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>핵심 상수</h1>
<h2>리비전 번호</h2>
<code>
THREE.REVISION
</code>
<div id="rev">
three.js의 현재 리비전 번호([link:https://github.com/mrdoob/three.js/releases revision number]).
</div>
<h2>마우스 버튼</h2>
<code>
THREE.MOUSE.LEFT
THREE.MOUSE.MIDDLE
THREE.MOUSE.RIGHT
</code>
<h2>소스 코드</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/constants.js src/constants.js]
</p>
</body>
</html>
docs/api/ko/constants/CustomBlendingEquations.html 0 → 100644
浏览文件 @ 1f7353eb
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>사용자 지정 혼합 방정식 상수</h1>
<p>
모든 재질 타입에 사용할 수 있습니다. 먼저 THREE.CustomBlending에 머티리얼의 혼합 모드를 설정하고, 필요한 혼합방정식, 소스 인자, 표적 인자를 추가합니다.
</p>
<h2>코드 예제</h2>
<code>
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
material.blending = THREE.CustomBlending;
material.blendEquation = THREE.AddEquation; //default
material.blendSrc = THREE.SrcAlphaFactor; //default
material.blendDst = THREE.OneMinusSrcAlphaFactor; //default
</code>
<h2>예제</h2>
<p>[example:webgl_materials_blending_custom materials / blending / custom ]</p>
<h2>Blending Equations</h2>
<code>
THREE.AddEquation
THREE.SubtractEquation
THREE.ReverseSubtractEquation
THREE.MinEquation
THREE.MaxEquation
</code>
<h2>소스 인자</h2>
<code>
THREE.ZeroFactor
THREE.OneFactor
THREE.SrcColorFactor
THREE.OneMinusSrcColorFactor
THREE.SrcAlphaFactor
THREE.OneMinusSrcAlphaFactor
THREE.DstAlphaFactor
THREE.OneMinusDstAlphaFactor
THREE.DstColorFactor
THREE.OneMinusDstColorFactor
THREE.SrcAlphaSaturateFactor
</code>
<h2>표적 인자</h2>
<p>
모든 소스 인자는 <code>THREE.SrcAlphaSaturateFactor</code>를 제외하고 표적 인자로 사용할 수 있습니다
</p>
<h2>소스 코드</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/constants.js src/constants.js]
</p>
</body>
</html>
docs/api/ko/constants/Materials.html 0 → 100644
浏览文件 @ 1f7353eb
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>재질 상수</h1>
<p class="desc">
이 상수들은 [page:MeshBasicMaterial.combine MeshBasicMaterial],
[page:MeshLambertMaterial.combine MeshLambertMaterial] 및
[page:MeshPhongMaterial.combine MeshPhongMaterial]에만 적용되는 텍스쳐 결합 연산을 제외한
모든 재질 타입에 공통 속성을 정의합니다.
<br />
</p>
<h2>측면</h2>
<code>
THREE.FrontSide
THREE.BackSide
THREE.DoubleSide
</code>
<p>
어느 측면(앞,뒤 혹은 둘 다)이 렌더링 될 지 정의합니다.
기본값은 [page:Constant FrontSide]입니다.
</p>
<h2>혼합 모드</h2>
<code>
THREE.NoBlending
THREE.NormalBlending
THREE.AdditiveBlending
THREE.SubtractiveBlending
THREE.MultiplyBlending
THREE.CustomBlending
</code>
<p>
WebGL에서 사용되는 WebGLRender에 보내진 재료의 RGB값과 알파값에 대한 소스와 표적 혼합 방정식을 제어합니다.<br />
기본값은 [page:Constant NormalBlending]입니다.<br />
[page:CustomBlendingEquation Custom Blending Equations]를 사용하기 위해서는 [page:Constant CustomBlending]이 반드시 설정되어야 하는 것을 주의하세요.<br />
[example:webgl_materials_blending materials / blending] 예제를 참고하세요.<br />
</p>
<h2>깊이 모드</h2>
<code>
THREE.NeverDepth
THREE.AlwaysDepth
THREE.LessDepth
THREE.LessEqualDepth
THREE.GreaterEqualDepth
THREE.GreaterDepth
THREE.NotEqualDepth
</code>
<p>
재질에서 다음 픽셀의 Z-depth를 현재 Z-depth 버퍼 값과 비교하는데 사용되는 함수입니다. 비교 결과가 true면 픽셀이 그려집니다.<br />
[page:Materials NeverDepth]는 절대 true를 리턴하지 않습니다.<br />
[page:Materials AlwaysDepth]는 항상 true를 리턴합니다.<br />
[page:Materials LessDepth] 다음 픽셀의 Z-depth가 현재 버퍼의 Z-depth보다 작으면 true를 리턴합니다.<br />
[page:Materials LessEqualDepth] 다음 픽셀의 Z-depth가 현재 버퍼의 Z-depth보다 작거나 같으면 true를 리턴합니다.<br />
[page:Materials GreaterEqualDepth] 다음 픽셀의 Z-depth가 현재 버퍼의 Z-depth보다 크거나 같으면 true를 리턴합니다.<br />
[page:Materials GreaterDepth] 다음 픽셀의 Z-depth가 현재 버퍼의 Z-depth보다 크면 true를 리턴합니다<br />
[page:Materials NotEqualDepth] 다음 픽셀의 Z-depth가 현재 버퍼의 Z-depth와 다르면 true를 리턴합니다.<br />
</p>
<h2>텍스쳐 결합 연산</h2>
<code>
THREE.MultiplyOperation
THREE.MixOperation
THREE.AddOperation
</code>
<p>
[page:MeshBasicMaterial.combine MeshBasicMaterial], [page:MeshLambertMaterial.combine MeshLambertMaterial] 및 [page:MeshPhongMaterial.combine MeshPhongMaterial]과 관련해
표면 색상의 결과를 환경 맵과 결합하는 방법을 정의합니다(있는 경우).<br />
[page:Constant MultiplyOperation]이 기본값이며 환경맵 색상과 표면 색상을 곱합니다.<br />
[page:Constant MixOperation] 두 색상 혼합을 위해 반사율을 사용합니다.<br />
[page:Constant AddOperation] 두 색상을 더합니다.
</p>
<h2>스텐실 함수</h2>
<code>
THREE.NeverStencilFunc
THREE.LessStencilFunc
THREE.EqualStencilFunc
THREE.LessEqualStencilFunc
THREE.GreaterStencilFunc
THREE.NotEqualStencilFunc
THREE.GreaterEqualStencilFunc
THREE.AlwaysStencilFunc
</code>
<p>
재질에서 스텐실 연산을 수행할지 말지 정의하는 함수들입니다.<br />
[page:Materials NeverStencilFunc]는 절대 true를 리턴하지 않습니다.<br />
[page:Materials LessStencilFunc]는 스텐실 참조값이 현재 스텐실 값보다 작으면 true를 리턴합니다.<br />
[page:Materials EqualStencilFunc]는 스텐실 참조값이 현재 스텐실 값과 같으면 true를 리턴합니다.<br />
[page:Materials LessEqualStencilFunc]는 스텐실 참조값이 현재 스텐실 값보다 작거나 같으면 true를 리턴합니다.<br />
[page:Materials GreaterStencilFunc] 는 스텐실 참조값이 현재 스텐실 값보다 크면 true를 리턴합니다..<br />
[page:Materials NotEqualStencilFunc] 는 스텐실 참조값이 현재 스텐실 값과 다르면 true를 리턴합니다.<br />
[page:Materials GreaterEqualStencilFunc] 는 스텐실 참조값이 현재 스텐실 값보다 크거나 같으면 true를 리턴합니다.<br />
[page:Materials AlwaysStencilFunc]는 항상 true를 리턴합니다.<br />
</p>
<h2>스텐실 연산</h2>
<code>
THREE.ZeroStencilOp
THREE.KeepStencilOp
THREE.ReplaceStencilOp
THREE.IncrementStencilOp
THREE.DecrementStencilOp
THREE.IncrementWrapStencilOp
THREE.DecrementWrapStencilOp
THREE.InvertStencilOp
</code>
<p>
재질의 스텐실 버퍼 픽셀에서 스텐실 함수로부터 실행되는 스텐실 연산입니다.<br />
[page:Materials ZeroStencilOp]는 스텐실 값을 0으로 만듭니다.<br />
[page:Materials KeepStencilOp]는 현재 스텐실 값을 변경시키지 않습니다.<br />
[page:Materials ReplaceStencilOp]는 스텐실 값을 특정 스텐실 참조값으로 교체합니다.<br />
[page:Materials IncrementStencilOp]는 현재 스텐실 값을 1 증가시킵니다.<br />
[page:Materials DecrementStencilOp]는 현재 스텐실 값을 1 감소시킵니다.<br />
[page:Materials IncrementWrapStencilOp]는 현재 스텐실 값을 1 증가시킵니다. 만약 증가된 값이 255를 넘으면 0으로 설정됩니다.<br />
[page:Materials DecrementWrapStencilOp]는 현재 스텐실 값을 1 감소시킵니다. 만약 감소된 값이 0 아래로 내려가면 255로 설정됩니다.<br />
[page:Materials InvertStencilOp]는 현재 스텐실 값의 비트값 반전을 수행합니다.<br />
</p>
<h2>소스 코드</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/constants.js src/constants.js]
</p>
</body>
</html>
docs/api/ko/constants/Renderer.html 0 → 100644
浏览文件 @ 1f7353eb
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>WebGLRenderer 상수</h1>
<h2>페이스 컬링 모드</h2>
<code>
THREE.CullFaceNone
THREE.CullFaceBack
THREE.CullFaceFront
THREE.CullFaceFrontBack
</code>
<p>
[page:constant CullFaceNone]은 페이스 컬링을 비활성화 합니다.<br />
[page:constant CullFaceBack]은 후면 페이스 컬링을 합니다(기본값).<br />
[page:constant CullFaceFront]는 전면 페이스 컬링을 합니다.<br />
[page:constant CullFaceFrontBack]은 전면 후면 모두 페이스 컬링을 합니다.
</p>
<h2>그립자 타입</h2>
<code>
THREE.BasicShadowMap
THREE.PCFShadowMap
THREE.PCFSoftShadowMap
THREE.VSMShadowMap
</code>
<p>
WebGLRenderer의 [page:WebGLRenderer.shadowMap.type shadowMap.type] 프로퍼티를 정의합니다.<br /><br />
[page:constant BasicShadowMap]은 필터링 안 된 그림자 맵을 사용하며 빠르지만 품질이 가장 낮습니다.<br />
[page:constant PCFShadowMap]은 Percentage-Closer Filtering (PCF) 알고리즘을 사용해 그림자 맵을 필터링합니다 (기본값).<br />
[page:constant PCFSoftShadowMap]은 Percentage-Closer Filtering (PCF) 알고리즘을 사용해 특히 저해상도 그림자 맵에서 보다 부드러운 그림자로 나타나는 그림자 맵을 필터링합니다.<br />
[page:constant VSMShadowMap]은 Variance Shadow Map (VSM) 알고리즘을 사용해 그림자 맵을 필터링합니다. VSMShadowMap를 사용하면 보든 리시버도 그림자를 만들 것입니다.
</p>
<h2>톤 맵핑</h2>
<code>
THREE.NoToneMapping
THREE.LinearToneMapping
THREE.ReinhardToneMapping
THREE.CineonToneMapping
THREE.ACESFilmicToneMapping
</code>
<p>
WebGLRenderer의 [page:WebGLRenderer.toneMapping toneMapping] 프로퍼티를 정의합니다.
일반 컴퓨터 모니터 또는 모바일 기기 화면의 저수준 밝기 범위에서 고수준 밝기 범위(HDR) 화면을 추정하는데에 사용됩니다.<br /><br />
[example:webgl_tonemapping WebGL / tonemapping] 예제를 참고하세요.
</p>
<h2>소스 코드</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/constants.js src/constants.js]
</p>
</body>
</html>
docs/api/ko/constants/Textures.html 0 → 100644
浏览文件 @ 1f7353eb
此差异已折叠。
docs/list.json
浏览文件 @ 1f7353eb
......@@ -1072,6 +1072,15 @@
"OrthographicCamera": "api/ko/cameras/OrthographicCamera",
"PerspectiveCamera": "api/ko/cameras/PerspectiveCamera",
"StereoCamera": "api/ko/cameras/StereoCamera"
},
"상수": {
"Animation": "api/ko/constants/Animation",
"Core": "api/ko/constants/Core",
"CustomBlendingEquation": "api/ko/constants/CustomBlendingEquations",
"Materials": "api/ko/constants/Materials",
"Renderer": "api/ko/constants/Renderer",
"Textures": "api/ko/constants/Textures"
}
},
......
docs/manual/ko/introduction/Animation-system.html
浏览文件 @ 1f7353eb
......@@ -13,7 +13,7 @@
<p class="desc">
three.js 애니메이션 시스템에서는 모델의 다양한 속성을 설정할 수 있습니다:
[page:SkinnedMesh 스킨 및 리깅 모델], [page:Geometry.morphTargets 모프타깃]의 골자, 서로 다른 소재의 속성(색상, 불투명도, 참/거짓 연산),
[page:SkinnedMesh 스킨 및 리깅 모델], [page:Geometry.morphTargets 모프타깃]의 골자, 서로 다른 재질의 속성(색상, 불투명도, 참/거짓 연산),
가시성과 변환이 그 예입니다. 애니메이션의 속성은 페이드 아웃, 페이드 아웃, 크로스페이드, 랩이 있습니다.
한 오브젝트에 대한 동시에 일어나는 다른 확대 시간 및 가중치 조절이나, 서로 다른 오브젝트간의 애니메이션도 전부 개별로 변화시킬 수 있습니다.
같은, 혹은 서로 다른 오브젝트틀간의 다양한 애니메이션도 싱크를 맞출 수 있습니다.
......
docs/manual/ko/introduction/Creating-a-scene.html
浏览文件 @ 1f7353eb
......@@ -9,7 +9,7 @@
<body>
<h1>장면 만들기([name])</h1>
<p>이 섹션의 목표는 three.js에 대한 간략한 설명을 하는 것입니다. spinning cube라는 scene을 설정하는 것부터 시작할 것입니다. 막히거나 도움이 필요할 때에는 아래쪽의 실습 예제를 확인해주세요.</p>
<p>이 장의 목표는 three.js에 대한 간략한 설명을 하는 것입니다. spinning cube라는 장면을 설정하는 것부터 시작할 것입니다. 막히거나 도움이 필요할 때에는 아래쪽의 실습 예제를 확인해주세요.</p>
<h2>시작하기에 앞서</h2>
......@@ -58,7 +58,7 @@
<p>두 번째 속성은 <strong>aspect ratio(종횡비)</strong>입니다. 대부분의 경우 요소의 높이와 너비에 맞추어 표시하게 할텐데, 그렇지 않으면 와이드스크린에 옛날 영화를 트는 것처럼 이미지가 틀어져 보일 것입니다.</p>
<p>다음 두 속성은 <strong>near</strong> 와 <strong>far</strong> 절단면입니다. 무슨 뜻인가 하면, <strong>far</strong> 값 보다 멀리 있는 요소나 <strong>near</strong> 값보다 가까이 있는 물체는 렌더링 되지 않는다는 뜻입니다. 지금 시점에서 이것까지 고려할 필요는 없지만, 앱 성능 향상을 위해 사용할 수 있습니다.</p>
<p>다음 두 속성은 <strong>near</strong> 와 <strong>far</strong> 절단면입니다. 무슨 뜻인가 하면, <strong>far</strong> 값 보다 멀리 있는 요소나 <strong>near</strong> 값보다 가까이 있는 오브젝트는 렌더링 되지 않는다는 뜻입니다. 지금 시점에서 이것까지 고려할 필요는 없지만, 앱 성능 향상을 위해 사용할 수 있습니다.</p>
<p>다음은 renderer입니다. 마법이 일어나는 곳입니다. 같이 사용하는 WebGLRenderer와 더불어, three.js는 다른 몇가지 renderer를 사용하는데, 오래된 브라우저 혹은 모종의 사유로 WebGL을 지원 안할때의 대비용으로 사용하는 것입니다.</p>
......@@ -81,9 +81,9 @@
<p>큐브를 만드려면, <strong>BoxGeometry</strong>가 필요합니다. 여기에는 큐브에 필요한 모든 꼭짓점 (<strong>vertices</strong>) 와 면(<strong>faces</strong>)이 포함돼 있습니다. 여기에 대해서는 나중에 더 자세히 알아봅시다.</p>
<p>geometry와 더불어, 무언가를 색칠해줄 요소가 필요합니다. Three.js에서는 여러 방법을 고려했지만, 현재로서는<strong>MeshBasicMaterial</strong>을 고수하고자 합니다. 이 속성이 적용된 물체들은 모두 영향을 받을 것입니다. 가장 단순하게 알아볼 수 있도록, 여기에서는 녹색인 <strong>0x00ff00</strong>만을 속성으로 사용하겠습니다. CSS 나 Photoshop에서처럼 (<strong>hex colors</strong>)로 동일하게 작동합니다.</p>
<p>geometry와 더불어, 무언가를 색칠해줄 요소가 필요합니다. Three.js에서는 여러 방법을 고려했지만, 현재로서는<strong>MeshBasicMaterial</strong>을 고수하고자 합니다. 이 속성이 적용된 오브젝트들은 모두 영향을 받을 것입니다. 가장 단순하게 알아볼 수 있도록, 여기에서는 녹색인 <strong>0x00ff00</strong>만을 속성으로 사용하겠습니다. CSS 나 Photoshop에서처럼 (<strong>hex colors</strong>)로 동일하게 작동합니다.</p>
<p>세 번째로 필요한 것은<strong>Mesh</strong>입니다. mesh는 geometry를 물체에 적용시키고 우리가 화면 안에서 자유롭게 움직일 수 있게 해 줍니다.
<p>세 번째로 필요한 것은<strong>Mesh</strong>입니다. mesh는 기하학을 받아 재질을 적용하고 우리가 화면 안에 삽입하고 자유롭게 움직일 수 있게 해 줍니다.
<p>기본 설정상 <strong>scene.add()</strong>를 불러오면, 추가된 모든 것들은 <strong>(0,0,0)</strong> 속성을 가집니다. 이렇게 되면 카메라와 큐브가 동일한 위치에 겹치게 되겠죠. 이를 피하기 위해, 카메라를 약간 움직여 두었습니다.</p>
......@@ -99,7 +99,7 @@
animate();
</code>
<p>이 코드는 하면이 새로고침 될 때마다 계속해서 렌더링을 해 줄 것입니다. (일반적인 경우에 1초에 60번 렌더링 됩니다). 웹 브라우저에서 게임을 만들기 시작한 지 얼마 안 된 분이라면, <em>"왜 그냥 setInterval을 쓰지 않는거죠?"</em>라고 질문할 수도 있을 겁니다. 단적으로 말하면 가능은 합니다. 하지만 <strong>requestAnimationFrame</strong> 을 사용하는 것이 훨씬 이점이 많습니다. 아마 가장 큰 이점은 유저가 브라우저 창에서 이탈했을때 멈춰주는 기능일 것입니다. 이를 통해 소중한 전력과 배터리를 아낄 수 있죠.</p>
<p>이 코드는 화면이 새로고침 될 때마다 계속해서 렌더링을 해 줄 것입니다. (일반적인 경우에 1초에 60번 렌더링 됩니다). 웹 브라우저에서 게임을 만들기 시작한 지 얼마 안 된 분이라면, <em>"왜 그냥 setInterval을 쓰지 않는거죠?"</em>라고 질문할 수도 있을 겁니다. 단적으로 말하면 가능은 합니다. 하지만 <strong>requestAnimationFrame</strong> 을 사용하는 것이 훨씬 이점이 많습니다. 아마 가장 큰 이점은 유저가 브라우저 창에서 이탈했을때 멈춰주는 기능일 것입니다. 이를 통해 소중한 전력과 배터리를 아낄 수 있죠.</p>
<h2>큐브 애니메이팅</h2>
......
docs/manual/ko/introduction/Drawing-lines.html
浏览文件 @ 1f7353eb
......@@ -28,7 +28,7 @@ camera.lookAt( 0, 0, 0 );
const scene = new THREE.Scene();
</code>
<p>다음으로는 물체를 정의해야 합니다. 선을 그리기 위해서는 [page:LineBasicMaterial]나 [page:LineDashedMaterial]를 사용하면 됩니다.</p>
<p>다음으로는 재질을 정의해야 합니다. 선을 그리기 위해서는 [page:LineBasicMaterial]나 [page:LineDashedMaterial]를 사용하면 됩니다.</p>
<code>
//create a blue LineBasicMaterial
const material = new THREE.LineBasicMaterial( { color: 0x0000ff } );
......@@ -49,7 +49,7 @@ const geometry = new THREE.BufferGeometry().setFromPoints( points );
<p>선은 연속된 꼭짓점 쌍 사이에 그려지고 첫 번재와 마지막 꼭짓점에는 그려지지 않습니다. (선은 닫혀있지 않습니다.)</p>
<p>이제 두 선과 물체를 위한 점이 생겼으니, 합쳐서 선을 만들 수 있습니다.</p>
<p>이제 두 선을 그리기 위한 점과 재질이 있으니, 합쳐서 선을 만들 수 있습니다.</p>
<code>
const line = new THREE.Line( geometry, material );
</code>
......
docs/manual/ko/introduction/FAQ.html
浏览文件 @ 1f7353eb
......@@ -47,7 +47,7 @@ visible_height = 2 * Math.tan( ( Math.PI / 180 ) * camera.fov / 2 ) * distance_f
<h2>왜 오브젝트 일부가 안 보일까요?</h2>
<p>
이는 페이스 컬링 문제일 수 있습니다. 각 면들은 어느 방향이 어느 방향인지에 대한 정보를 가지고 있습니다. 그리고 컬링은 일반적으로 뒷편의 면을 제거해 버립니다. 이 문제가 의심된다면 물체의 면을 THREE.DoubleSide로 변경해 보세요.
이는 페이스 컬링 문제일 수 있습니다. 각 면들은 어느 방향이 어느 방향인지에 대한 정보를 가지고 있습니다. 그리고 컬링은 일반적으로 뒷편의 면을 제거해 버립니다. 이 문제가 의심된다면 재질의 면을 THREE.DoubleSide로 변경해 보세요.
<code>material.side = THREE.DoubleSide</code>
</p>
</body>
......
docs/manual/ko/introduction/How-to-dispose-of-objects.html
浏览文件 @ 1f7353eb
......@@ -12,32 +12,32 @@
<h1>오브젝트를 폐기하는 방법([name])</h1>
<p>
애플리케이션에서 성능을 개선하고 메모리 누수를 방지하기 위한 중요한 한 가지는 사용되지 않는 라이브러리 엔티티를 폐기하는 것입니다.
*three.js* 유형의 인스턴스는 생성될 때마다 일정량의 메모리를 할당하게 됩니다. 하지만 *three.js*는 특정 개체에 대해 기하학적 구조나 소재 WebGL 관련 물체(예: 버퍼 또는 쉐이더 프로그램)의 렌더링에 필요한 것입니다.
애플리케이션에서 성능을 개선하고 메모리 누수를 방지하기 위한 중요한 한 가지는 사용되지 않는 라이브러리 개체를 폐기하는 것입니다.
*three.js* 유형의 인스턴스는 생성될 때마다 일정량의 메모리를 할당하게 됩니다. 하지만 *three.js*는 특정 개체에 대해 기하학적 구조나 WebGL 관련 재질(예: 버퍼 또는 쉐이더 프로그램) 개체의 렌더링에 필요한 것입니다.
이러한 오브젝트들은 자동으로 폐기되지 않는다는 점을 주의하세요. 대신, 애플리케이션에서는 메모리 자원을 확보하기 위해 특별한 API를 사용해야 합니다.
이 가이드에서는 이 API의 사용 방법과 이와 관련해서 어떤 오브젝트가 있는지에 대한 간략한 설명을 제공해 드립니다.
</p>
<h2>기하학적 물체</h2>
<h2>기하학</h2>
<p>
기하학적 물체는 속성 집합으로 정의된 꼭짓점 정보를 표시하는데, *three.js*는 속성마다 하나의 [link: https://developer.mozilla.org/en-US/docs/Web/API/WebGLBuffer WebGLBuffer] 유형의 대상을 만들어 내부에 저장합니다.
이러한 엔티티는 [page:BufferGeometry.dispose]를 호출할 때만 폐기됩니다.
기하학은 속성 집합으로 정의된 꼭짓점 정보를 표시하는데, *three.js*는 속성마다 하나의 [link: https://developer.mozilla.org/en-US/docs/Web/API/WebGLBuffer WebGLBuffer] 유형의 대상을 만들어 내부에 저장합니다.
이러한 개체는 [page:BufferGeometry.dispose]를 호출할 때만 폐기됩니다.
만약 애플리케이션에서 기하학을 더이상 사용하지 않는다면, 이 방법을 실행하여 모든 관련 자원을 폐기하세요.
</p>
<h2>소재</h2>
<h2>재질</h2>
<p>
소재는 물체가 어떻게 렌더링되는지를 정의합니다. *three.js*는 소재에 정의된 정보를 사용하여 렌더링을 위한 하나의 셰이더 프로그램을 구축합니다.
셰이더 프로그램은 해당 소재가 폐기된 후에만 삭제할 수 있습니다. 성능상의 이유로 *three.js*는 가능하다면 활용 가능한 셰이더 프로그램을 재사용하게 되어 있습니다. 따라서 셰이더 프로그램은 모든 관련된 소재들이 사라진 후에야 삭제됩니다.
[page:Material.dispose]() 를 실행함으로써 소재를 폐기할 수 있습니다.
재질은 오브젝트가 어떻게 렌더링되는지를 정의합니다. *three.js*는 재질에 정의된 정보를 사용하여 렌더링을 위한 하나의 셰이더 프로그램을 구축합니다.
셰이더 프로그램은 해당 재질이 폐기된 후에만 삭제할 수 있습니다. 성능상의 이유로 *three.js*는 가능하다면 활용 가능한 셰이더 프로그램을 재사용하게 되어 있습니다. 따라서 셰이더 프로그램은 모든 관련된 재질들이 사라진 후에야 삭제됩니다.
[page:Material.dispose]() 를 실행함으로써 재질을 폐기할 수 있습니다.
</p>
<h2>텍스쳐</h2>
<p>
소재의 폐기는 텍스쳐에 영향을 미치지 않습니다. 이들은 분리되어 있어 하나의 텍스쳐를 여러 소재로 동시에 사용할 수 있습니다.
재질의 폐기는 텍스쳐에 영향을 미치지 않습니다. 이들은 분리되어 있어 하나의 텍스쳐를 여러 재질로 동시에 사용할 수 있습니다.
[page:Texture] 인스턴스를 만들 때마다 three.js는 내부에서 [link: https://developer.mozilla.org/en-US/docs/Web/API/WebGLTexture WebGLTexture] 인스턴스를 만듭니다.
buffer와 비슷하게, 이 오브젝트는 [page:Texture.dispose]() 호출로만 삭제가 가능합니다.
</p>
......@@ -62,8 +62,8 @@
<h3>*three.js*는 왜 자동으로 오브젝트를 폐기 못하나요?</h3>
<p>
이 문제가 커뮤니티에서 여러 차례 제기돼 온 만큼 확실한 대답을 해 드려야겠습니다. 사실, *three.js*는 사용자가 만든 엔티티(예를 들어 기하체 또는 소재)의 라이프사이클이나 역할 범위를 알지 못하며, 이는 애플리케이션의 책임입니다.
예를 들어, 만약 하나의 소재가 현재 렌더링에 사용되고 있지 않더라도, 바로 다음 프레임에 필수적인 소재일 수 있을 것입니다. 그래서 만약 애플리케이션에서 특정 오브젝트가 삭제되어도 된다고 하면,
이 문제가 커뮤니티에서 여러 차례 제기돼 온 만큼 확실한 대답을 해 드려야겠습니다. 사실, *three.js*는 사용자가 만든 개체(예를 들어 기하체 또는 재질)의 라이프사이클이나 역할 범위를 알지 못하며, 이는 애플리케이션의 책임입니다.
예를 들어, 만약 하나의 재질이 현재 렌더링에 사용되고 있지 않더라도, 바로 다음 프레임에 필수적인 재질일 수 있을 것입니다. 그래서 만약 애플리케이션에서 특정 오브젝트가 삭제되어도 된다고 하면,
해당하는 *dispose()* 메서드를 통해 엔진에 알려줘야 합니다.
</p>
......@@ -99,7 +99,7 @@
<p>
일반적으로 이 점에 대한 명확한 해답은 없습니다. *dispose()*는 구체적인 사용 방법에 따라 적절히 활용하는 방법이 좌우됩니다. 굳이 오브젝트를 자꾸 폐기할 필요는 없다는 것을 기억해 두세요.
다양한 레벨로 구성된 게임이 좋은 예가 될 수 있을 것입니다. 레벨이 바뀌면, 폐기를 할 때입니다. 애플리케이션은 오래된 화면을 지나가면서 오래된 소재, 기하학, 텍스쳐를 모두 폐기할 수 있습니다.
다양한 레벨로 구성된 게임이 좋은 예가 될 수 있을 것입니다. 레벨이 바뀌면, 폐기를 할 때입니다. 애플리케이션은 오래된 화면을 지나가면서 오래된 재질, 기하학, 텍스쳐를 모두 폐기할 수 있습니다.
앞의 장에서 언급한 바와 같이 만약 여전히 사용하고 있는 오브젝트를 폐기해도 런타임 에러를 만들지는 않을 것입니다. 단일 프레임에서 퍼포먼스가 떨어지는 정도가 가장 안 좋은 정도일 것입니다.
</p>
......
docs/manual/ko/introduction/How-to-update-things.html
浏览文件 @ 1f7353eb
......@@ -159,13 +159,13 @@ geometry.dynamic = true;
</div>
<h2>물체(Materials)</h2>
<h2>재질(Materials)</h2>
<div>
<p>모든 uniforms 값들은 자유롭게 변경이 가능합니다. (예를 들면 colors, textures, opacity, etc), 값들은 shader에 매 프레임 전송됩니다.</p>
<p>GLstate와 관련된 파라미터들 또한 언제나 변경 가능합니다.(depthTest, blending, polygonOffset, 등).</p>
<p>아래 속성들은 런타임에서 쉽게 변경할 수 없습니다. (적어도 물체가 한 번 렌더링 된 이후):</p>
<p>아래 속성들은 런타임에서 쉽게 변경할 수 없습니다. (적어도 재질이 한 번 렌더링 된 이후):</p>
<ul>
<li>uniforms의 갯수와 타입</li>
<li>아래 항목들의 사용 혹은 비사용 여부
......@@ -188,10 +188,10 @@ geometry.dynamic = true;
<p>좀 더 부드럽게 하기 위해서는, 값이 0인 빛, 흰색 텍스쳐, 밀도가 0인 안개 등의 "가상" 값을 가지도록 특성들을 변경해 시뮬레이션해 볼 수 있습니다.</p>
<p>기하학 블록에 사용되는 물체를 자유롭게 바꿀 수 있지만, 오브젝트를 어떻게 블록으로 나눌 지에 대한 점은 변경할 수 없습니다(물체의 면에 따라). </p>
<p>기하학 블록에 사용되는 재질을 자유롭게 바꿀 수 있지만, 오브젝트를 어떻게 블록으로 나눌 지에 대한 점은 변경할 수 없습니다(재질의 면에 따라). </p>
<h3>런타임 중에 물체의 서로 다른 설정을 해야 할 때:</h3>
<p>물체와 블록의 수가 적다면, 오브젝트를 미리 분리해놓을 수 있습니다. (예를 들면 사람에 있어서 머리/얼굴/상의/바지, 자동차에 있어서 앞부분/옆부분/윗부분/유리/타이어/내부). </p>
<h3>런타임 중에 재질의 서로 다른 설정을 해야 할 때:</h3>
<p>재질과 블록의 수가 적다면, 오브젝트를 미리 분리해놓을 수 있습니다. (예를 들면 사람에 있어서 머리/얼굴/상의/바지, 자동차에 있어서 앞부분/옆부분/윗부분/유리/타이어/내부). </p>
<p>수가 많다면 (예를 들어 모든 얼굴들이 조금씩 다른 경우), 다른 해결 방법을 생각해봐야 하는데, 속성/텍스쳐를 사용하여 얼굴마다 다른 형태를 입히는 방법 등이 있을 것입니다..</p>
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或