Skip to content

Commit 564a574

Browse files
ren-ozekiren-ozeki
committed
translate Installation.html
1 parent 42dd7c0 commit 564a574

16 files changed

+1753
-25
lines changed

‎docs/manual/ja/introduction/Animation-system.html‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<base href="../../../" />
6+
<script src="page.js"></script>
7+
<link type="text/css" rel="stylesheet" href="page.css" />
8+
</head>
9+
<body>
10+
<h1>[name]</h1>
11+
12+
<h2>Overview</h2>
13+
14+
<p class="desc">
15+
Within the three.js animation system you can animate various properties of your models:
16+
the bones of a [page:SkinnedMesh skinned and rigged model],
17+
[page:Geometry.morphTargets morph targets], different material properties (colors,
18+
opacity, booleans), visibility and transforms. The animated properties can be faded in,
19+
faded out, crossfaded and warped. The weight and time scales of different simultaneous
20+
animations on the same object as well as on different objects can be changed
21+
independently. Various animations on the same and on different objects can be
22+
synchronized.<br /><br />
23+
24+
To achieve all this in one homogeneous system, the three.js animation system
25+
[link:https://github.com/mrdoob/three.js/issues/6881 has completely changed in 2015]
26+
(beware of outdated information!), and it has now an architecture similar to
27+
Unity/Unreal Engine 4. This page gives a short overview of the main components of the
28+
system and how they work together.
29+
30+
</p>
31+
32+
<h3>Animation Clips</h3>
33+
34+
<p class="desc">
35+
36+
If you have successfully imported an animated 3D object (it doesn't matter if it has
37+
bones or morph targets or both) — for example exporting it from Blender with the
38+
[link:https://github.com/KhronosGroup/glTF-Blender-IO glTF Blender exporter] and
39+
loading it into a three.js scene using [page:GLTFLoader] — one of the response fields
40+
should be an array named "animations", containing the [page:AnimationClip AnimationClips]
41+
for this model (see a list of possible loaders below).<br /><br />
42+
43+
Each *AnimationClip* usually holds the data for a certain activity of the object. If the
44+
mesh is a character, for example, there may be one AnimationClip for a walkcycle, a second
45+
for a jump, a third for sidestepping and so on.
46+
47+
</p>
48+
49+
<h3>Keyframe Tracks</h3>
50+
51+
<p class="desc">
52+
53+
Inside of such an *AnimationClip* the data for each animated property are stored in a
54+
separate [page:KeyframeTrack]. Assuming a character object has a [page:Skeleton skeleton],
55+
one keyframe track could store the data for the position changes of the lower arm bone
56+
over time, a different track the data for the rotation changes of the same bone, a third
57+
the track position, rotation or scaling of another bone, and so on. It should be clear,
58+
that an AnimationClip can be composed of lots of such tracks.<br /><br />
59+
60+
Assuming the model has [page:Geometry.morphTargets morph targets] (for example one morph
61+
target showing a friendly face and another showing an angry face), each track holds the
62+
information as to how the [page:Mesh.morphTargetInfluences influence] of a certain morph
63+
target changes during the performance of the clip.
64+
65+
</p>
66+
67+
<h3>Animation Mixer</h3>
68+
69+
<p class="desc">
70+
71+
The stored data forms only the basis for the animations - actual playback is controlled by
72+
the [page:AnimationMixer]. You can imagine this not only as a player for animations, but
73+
as a simulation of a hardware like a real mixer console, which can control several animations
74+
simultaneously, blending and merging them.
75+
76+
</p>
77+
78+
<h3>Animation Actions</h3>
79+
80+
<p class="desc">
81+
82+
The *AnimationMixer* itself has only very few (general) properties and methods, because it
83+
can be controlled by the [page:AnimationAction AnimationActions]. By configuring an
84+
*AnimationAction* you can determine when a certain *AnimationClip* shall be played, paused
85+
or stopped on one of the mixers, if and how often the clip has to be repeated, whether it
86+
shall be performed with a fade or a time scaling, and some additional things, such crossfading
87+
or synchronizing.
88+
89+
</p>
90+
91+
<h3>Animation Object Groups</h3>
92+
93+
<p class="desc">
94+
95+
If you want a group of objects to receive a shared animation state, you can use an
96+
[page:AnimationObjectGroup].
97+
98+
</p>
99+
100+
<h3>Supported Formats and Loaders</h3>
101+
102+
<p class="desc">
103+
Note that not all model formats include animation (OBJ notably does not), and that only some
104+
three.js loaders support [page:AnimationClip AnimationClip] sequences. Several that <i>do</i>
105+
support this animation type:
106+
</p>
107+
108+
<ul>
109+
<li>[page:ObjectLoader THREE.ObjectLoader]</li>
110+
<li>THREE.BVHLoader</li>
111+
<li>THREE.ColladaLoader</li>
112+
<li>THREE.FBXLoader</li>
113+
<li>[page:GLTFLoader THREE.GLTFLoader]</li>
114+
<li>THREE.MMDLoader</li>
115+
</ul>
116+
117+
<p class="desc">
118+
Note that 3ds max and Maya currently can't export multiple animations (meaning animations which are not
119+
on the same timeline) directly to a single file.
120+
</p>
121+
122+
<h2>Example</h2>
123+
124+
<code>
125+
let mesh;
126+
127+
// Create an AnimationMixer, and get the list of AnimationClip instances
128+
const mixer = new THREE.AnimationMixer( mesh );
129+
const clips = mesh.animations;
130+
131+
// Update the mixer on each frame
132+
function update () {
133+
mixer.update( deltaSeconds );
134+
}
135+
136+
// Play a specific animation
137+
const clip = THREE.AnimationClip.findByName( clips, 'dance' );
138+
const action = mixer.clipAction( clip );
139+
action.play();
140+
141+
// Play all animations
142+
clips.forEach( function ( clip ) {
143+
mixer.clipAction( clip ).play();
144+
} );
145+
</code>
146+
147+
</body>
148+
</html>

‎docs/manual/ja/introduction/Browser-support.html‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<base href="../../../" />
6+
<script src="page.js"></script>
7+
<link type="text/css" rel="stylesheet" href="page.css" />
8+
</head>
9+
<body>
10+
<h1>[name]</h1>
11+
12+
<h2>Overview</h2>
13+
<div>
14+
<p>
15+
Three.js can use WebGL to render your scenes on all modern browsers. For older browsers, especially Internet Explorer 10 and below, you may have to fallback to one of the other [link:https://github.com/mrdoob/three.js/tree/master/examples/jsm/renderers renderers] (CSS2DRenderer, CSS3DRenderer, SVGRenderer). Additionally, you may have to include some polyfills, especially if you are using files from the [link:https://github.com/mrdoob/three.js/tree/master/examples /examples] folder.
16+
</p>
17+
<p>
18+
Note: if you don't need to support these old browsers, then it is not recommended to use the other renderers as they are slower and support less features than the WebGLRenderer.
19+
</p>
20+
</div>
21+
22+
<h2>Browsers that support WebGL</h2>
23+
<div>
24+
<p>
25+
Google Chrome 9+, Firefox 4+, Opera 15+, Safari 5.1+, Internet Explorer 11 and Microsoft Edge. You can find which browsers support WebGL at [link:https://caniuse.com/#feat=webgl Can I use WebGL].
26+
</p>
27+
</div>
28+
29+
<h2>JavaScript Language Features or Web APIs Used in three.js</h2>
30+
<div>
31+
<p>
32+
Here are some features used in three.js. Some of them may require additional polyfills.
33+
</p>
34+
<table>
35+
<thead>
36+
<tr>
37+
<th>Feature</th>
38+
<th>Use Scope</th>
39+
<th>Modules</th>
40+
</tr>
41+
</thead>
42+
<tbody>
43+
<tr>
44+
<td>Typed Arrays</td>
45+
<td>Source</td>
46+
<td>BufferAttribute, BufferGeometry, etc.</td>
47+
</tr>
48+
<tr>
49+
<td>Web Audio API</td>
50+
<td>Source</td>
51+
<td>Audio, AudioContext, AudioListener, etc.</td>
52+
</tr>
53+
<tr>
54+
<td>WebXR Device API</td>
55+
<td>Source</td>
56+
<td>WebXRManager</td>
57+
</tr>
58+
<tr>
59+
<td>Blob</td>
60+
<td>Source</td>
61+
<td>FileLoader, etc.</td>
62+
</tr>
63+
<tr>
64+
<td>Promise</td>
65+
<td>Examples</td>
66+
<td>GLTFLoader, DRACOLoader, BasisTextureLoader, GLTFExporter, VRButton, ARButton, etc.</td>
67+
</tr>
68+
<tr>
69+
<td>Fetch</td>
70+
<td>Examples</td>
71+
<td>ImageBitmapLoader, etc.</td>
72+
</tr>
73+
<tr>
74+
<td>File API</td>
75+
<td>Examples</td>
76+
<td>GLTFExporter, etc.</td>
77+
</tr>
78+
<tr>
79+
<td>URL API</td>
80+
<td>Examples</td>
81+
<td>GLTFLoader, etc.</td>
82+
</tr>
83+
<tr>
84+
<td>Pointer Lock API</td>
85+
<td>Examples</td>
86+
<td>PointerLockControls</td>
87+
</tr>
88+
</tbody>
89+
</table>
90+
</div>
91+
92+
<h2>Polyfills</h2>
93+
<div>
94+
<p>Just import polyfills based on your requirements. Taking IE9 as an example, you need to polyfill at least these features:</p>
95+
<ul>
96+
<li>Typed Arrays</li>
97+
<li>Blob</li>
98+
</ul>
99+
</div>
100+
101+
<h3>Suggested polyfills</h3>
102+
<div>
103+
<ul>
104+
<li>
105+
[link:https://github.com/zloirock/core-js core-js]
106+
</li>
107+
<li>
108+
[link:https://github.com/inexorabletash/polyfill/blob/master/typedarray.js typedarray.js]
109+
</li>
110+
<li>
111+
[link:https://github.com/stefanpenner/es6-promise/ ES6-Promise]
112+
</li>
113+
<li>
114+
[link:https://github.com/eligrey/Blob.js Blob.js]
115+
</li>
116+
<li>
117+
[link:https://github.com/github/fetch fetch]
118+
</li>
119+
</ul>
120+
</div>
121+
</body>
122+
</html>

‎docs/manual/ja/introduction/Creating-text.html‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<base href="../../../" />
6+
<script src="page.js"></script>
7+
<link type="text/css" rel="stylesheet" href="page.css" />
8+
</head>
9+
<body>
10+
<h1>[name]</h1>
11+
<div>
12+
<p>
13+
There are often times when you might need to use text in your three.js application - here are
14+
a couple of ways that you can do so.
15+
</p>
16+
</div>
17+
18+
<h2>1. DOM + CSS</h2>
19+
<div>
20+
<p>
21+
Using HTML is generally the easiest and fastest manner to add text. This is the method
22+
used for descriptive overlays in most three.js examples.
23+
</p>
24+
<p>You can add content to a</p>
25+
<code>&lt;div id="info"&gt;Description&lt;/div&gt;</code>
26+
27+
<p>
28+
and use CSS markup to position absolutely at a position above all others with a
29+
z-index especially if you are running three.js full screen.
30+
</p>
31+
32+
<code>
33+
#info {
34+
position: absolute;
35+
top: 10px;
36+
width: 100%;
37+
text-align: center;
38+
z-index: 100;
39+
display:block;
40+
}
41+
</code>
42+
43+
</div>
44+
45+
46+
47+
<h2>2. Draw text to canvas and use as a [page:Texture]</h2>
48+
<div>
49+
<p>Use this method if you wish to draw text easily on a plane in your three.js scene.</p>
50+
</div>
51+
52+
53+
<h2>3. Create a model in your favourite 3D application and export to three.js</h2>
54+
<div>
55+
<p>Use this method if you prefer working with your 3d applications and importing the models to three.js</p>
56+
</div>
57+
58+
59+
60+
<h2>4. Procedural Text Geometry</h2>
61+
<div>
62+
<p>
63+
If you prefer to work purely in THREE.js or to create procedural and dynamic 3D
64+
text geometries, you can create a mesh whose geometry is an instance of THREE.TextGeometry:
65+
</p>
66+
<p>
67+
<code>new THREE.TextGeometry( text, parameters );</code>
68+
</p>
69+
<p>
70+
In order for this to work, however, your TextGeometry will need an instance of THREE.Font
71+
to be set on its "font" parameter.
72+
73+
See the [page:TextGeometry] page for more info on how this can be done, descriptions of each
74+
accepted parameter, and a list of the JSON fonts that come with the THREE.js distribution itself.
75+
</p>
76+
77+
<h3>Examples</h3>
78+
79+
<p>
80+
[example:webgl_geometry_text WebGL / geometry / text]<br />
81+
[example:webgl_shadowmap WebGL / shadowmap]
82+
</p>
83+
84+
<p>
85+
If Typeface is down, or you want to use a font that is not there, there's a tutorial
86+
with a python script for blender that allows you to export text to Three.js's JSON format:
87+
[link:http://www.jaanga.com/2012/03/blender-to-threejs-create-3d-text-with.html]
88+
</p>
89+
90+
</div>
91+
92+
93+
94+
<h2>5. Bitmap Fonts</h2>
95+
<div>
96+
<p>
97+
BMFonts (bitmap fonts) allow batching glyphs into a single BufferGeometry. BMFont rendering
98+
supports word-wrapping, letter spacing, kerning, signed distance fields with standard
99+
derivatives, multi-channel signed distance fields, multi-texture fonts, and more.
100+
See [link:https://github.com/Jam3/three-bmfont-text three-bmfont-text].
101+
</p>
102+
<p>
103+
Stock fonts are available in projects like
104+
[link:https://github.com/etiennepinchon/aframe-fonts A-Frame Fonts], or you can create your own
105+
from any .TTF font, optimizing to include only characters required for a project.
106+
</p>
107+
<p>
108+
Some helpful tools:
109+
</p>
110+
<ul>
111+
<li>[link:http://msdf-bmfont.donmccurdy.com/ msdf-bmfont-web] <i>(web-based)</i></li>
112+
<li>[link:https://github.com/soimy/msdf-bmfont-xml msdf-bmfont-xml] <i>(commandline)</i></li>
113+
<li>[link:https://github.com/libgdx/libgdx/wiki/Hiero hiero] <i>(desktop app)</i></li>
114+
</ul>
115+
</div>
116+
117+
118+
119+
</body>
120+
</html>

0 commit comments

Comments
 (0)