Skip to content

Commit

Permalink
Manual: Clean up. (#26358)
Browse files Browse the repository at this point in the history 
* Manual: Clean up.

* Manual: More clean up.
  • Loading branch information
@Mugen87
Mugen87 authored Jul 2, 2023
1 parent 4e07037 commit aff5cb1
Show file tree
Hide file tree
Showing 20 changed files with 123 additions and 72 deletions.
6 changes: 4 additions & 2 deletions manual/en/lights.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -291,7 +291,8 @@ <h2 id="-pointlight-"><a href="/docs/#api/en/lights/PointLight"><code class="not
<p>A <a href="/docs/#api/en/lights/PointLight"><code class="notranslate" translate="no">PointLight</code></a> is a light that sits at a point and shoots light
in all directions from that point. Let's change the code.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const color = 0xFFFFFF;
const intensity = 1;
-const intensity = 1;
+const intensity = 150;
-const light = new THREE.DirectionalLight(color, intensity);
+const light = new THREE.PointLight(color, intensity);
light.position.set(0, 10, 0);
Expand Down Expand Up @@ -347,7 +348,8 @@ <h2 id="-spotlight-"><a href="/docs/#api/en/lights/SpotLight"><code class="notra
open toward the target.</p>
<p>Modifying our <a href="/docs/#api/en/lights/DirectionalLight"><code class="notranslate" translate="no">DirectionalLight</code></a> with helper from above</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const color = 0xFFFFFF;
const intensity = 1;
-const intensity = 1;
+const intensity = 150;
-const light = new THREE.DirectionalLight(color, intensity);
+const light = new THREE.SpotLight(color, intensity);
scene.add(light);
Expand Down
17 changes: 9 additions & 8 deletions manual/en/post-processing.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,8 +67,7 @@ <h2 id="-clear-"><code class="notranslate" translate="no">clear</code></h2>
<p>Whether or not to clear before rendering this pass</p>
<h2 id="-rendertoscreen-"><code class="notranslate" translate="no">renderToScreen</code></h2>
<p>Whether or not to render to the canvas instead the current destination render
target. Usually you need to set this to true on the last pass you add to your
<code class="notranslate" translate="no">EffectComposer</code>.</p>
target. In most use cases you do not set this flag explicitly since the last pass in the pass chain is automatically rendered to screen.</p>
<p>Let's put together a basic example. We'll start with the example from <a href="responsive.html">the
article on responsiveness</a>.</p>
<p>To that first we create an <code class="notranslate" translate="no">EffectComposer</code>.</p>
Expand All @@ -89,27 +88,29 @@ <h2 id="-rendertoscreen-"><code class="notranslate" translate="no">renderToScree
);
composer.addPass(bloomPass);
</pre>
<p>Finally we had a <code class="notranslate" translate="no">FilmPass</code> that draws noise and scanlines on top of its input.</p>
<p>Next we had a <code class="notranslate" translate="no">FilmPass</code> that draws noise and scanlines on top of its input.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const filmPass = new FilmPass(
0.35, // noise intensity
0.025, // scanline intensity
648, // scanline count
false, // grayscale
);
filmPass.renderToScreen = true;
composer.addPass(filmPass);
</pre>
<p>Since the <code class="notranslate" translate="no">filmPass</code> is the last pass we set its <code class="notranslate" translate="no">renderToScreen</code> property to
true to tell it to render to the canvas. Without setting this it would instead
render to the next render target.</p>
<p>Finally we had a <code class="notranslate" translate="no">OutputPass</code> which performs color space conversion to sRGB and optional tone mapping.
This pass is usually the last pass of the pass chain.
</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const outputPass = new OutputPass();
composer.addPass(outputPass);
</pre>
<p>To use these classes we need to import a bunch of scripts.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {EffectComposer} from 'three/addons/postprocessing/EffectComposer.js';
import {RenderPass} from 'three/addons/postprocessing/RenderPass.js';
import {BloomPass} from 'three/addons/postprocessing/BloomPass.js';
import {FilmPass} from 'three/addons/postprocessing/FilmPass.js';
import {OutputPass} from 'three/addons/postprocessing/OutputPass.js';
</pre>
<p>For pretty much any post processing <code class="notranslate" translate="no">EffectComposer.js</code>, and <code class="notranslate" translate="no">RenderPass.js</code>
<p>For pretty much any post processing <code class="notranslate" translate="no">EffectComposer.js</code>, <code class="notranslate" translate="no">RenderPass.js</code> and <code class="notranslate" translate="no">OutputPass.js</code>
are required.</p>
<p>The last things we need to do are to use <code class="notranslate" translate="no">EffectComposer.render</code> instead of
<a href="/docs/#api/en/renderers/WebGLRenderer.render"><code class="notranslate" translate="no">WebGLRenderer.render</code></a> <em>and</em> to tell the <code class="notranslate" translate="no">EffectComposer</code> to match the size of
Expand Down
1 change: 0 additions & 1 deletion manual/examples/background-v01.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,6 @@

}

renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.shadowMap.enabled = true;

const hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 2 );
Expand Down
1 change: 0 additions & 1 deletion manual/examples/background.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,6 @@

}

renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.shadowMap.enabled = true;

const hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 2 );
Expand Down
1 change: 0 additions & 1 deletion manual/examples/postprocessing-3dlut-prep.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,6 @@

const canvas = document.querySelector( '#c' );
const renderer = new THREE.WebGLRenderer( { antialias: true, canvas } );
renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.autoClearColor = false;

const fov = 45;
Expand Down
1 change: 0 additions & 1 deletion manual/examples/postprocessing-adobe-lut-to-png-converter.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -181,7 +181,6 @@ <h1>Adobe LUT to PNG converter</h1>
};

const effectLUT = new ShaderPass( lutShader );
effectLUT.renderToScreen = true;

const renderBG = new RenderPass( sceneBG, cameraBG );

Expand Down
1 change: 0 additions & 1 deletion manual/examples/postprocessing-custom.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,6 @@
};

const colorPass = new ShaderPass( colorShader );
colorPass.renderToScreen = true;
composer.addPass( colorPass );

function resizeRendererToDisplaySize( renderer ) {
Expand Down
6 changes: 4 additions & 2 deletions manual/fr/lights.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -238,7 +238,8 @@ <h2 id="-directionallight-"><a href="/docs/#api/en/lights/DirectionalLight"><cod
<h2 id="-pointlight-"><a href="/docs/#api/en/lights/PointLight"><code class="notranslate" translate="no">PointLight</code></a></h2>
<p>Un <a href="/docs/#api/en/lights/PointLight"><code class="notranslate" translate="no">PointLight</code></a> est une lumière qui se trouve en un point et projette de la lumière dans toutes les directions à partir de ce point. Changeons le code.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const color = 0xFFFFFF;
const intensity = 1;
-const intensity = 1;
+const intensity = 150;
-const light = new THREE.DirectionalLight(color, intensity);
+const light = new THREE.PointLight(color, intensity);
light.position.set(0, 10, 0);
Expand Down Expand Up @@ -283,7 +284,8 @@ <h2 id="-spotlight-"><a href="/docs/#api/en/lights/SpotLight"><code class="notra
<p>Pour utiliser une <a href="/docs/#api/en/lights/SpotLight"><code class="notranslate" translate="no">SpotLight</code></a>, nous avons besoin d'une cible tout comme la lumière directionnelle. Le cône de lumière s'ouvrira vers la cible.</p>
<p>Modifions notre <a href="/docs/#api/en/lights/DirectionalLight"><code class="notranslate" translate="no">DirectionalLight</code></a> avec le 'helper' vu plus haut</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const color = 0xFFFFFF;
const intensity = 1;
-const intensity = 1;
+const intensity = 150;
-const light = new THREE.DirectionalLight(color, intensity);
+const light = new THREE.SpotLight(color, intensity);
scene.add(light);
Expand Down
26 changes: 18 additions & 8 deletions manual/fr/textures.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,10 +60,12 @@ <h2 id="-a-name-hello-a-hello-texture"><a name="hello"></a> Hello Texture</h2>
<p>Modifions l'un de nos premiers échantillons. Tout ce que nous avons à faire, c'est de créer un <a href="/docs/#api/en/loaders/TextureLoader"><code class="notranslate" translate="no">TextureLoader</code></a>. Appelons-le avec sa méthode
<a href="/docs/#api/en/loaders/TextureLoader#load"><code class="notranslate" translate="no">load</code></a> et l'URL d'une image définissons la propriété <code class="notranslate" translate="no">map</code> du matériau sur le résultat au lieu de définir sa <code class="notranslate" translate="no">color</code>.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">+const loader = new THREE.TextureLoader();
+const texture = loader.load( 'resources/images/wall.jpg' );
+texture.colorSpace = THREE.SRGBColorSpace;

const material = new THREE.MeshBasicMaterial({
- color: 0xFF8844,
+ map: loader.load('resources/images/wall.jpg'),
+ map: texture,
});
</pre>
<p>Notez que nous utilisons un <a href="/docs/#api/en/materials/MeshBasicMaterial"><code class="notranslate" translate="no">MeshBasicMaterial</code></a>, donc pas besoin de lumières.</p>
Expand All @@ -90,20 +92,28 @@ <h2 id="-a-name-six-a-6-textures-une-pour-chaque-face-d-un-cube"><a name="six"><

<p>Fabriquons juste 6 materiaux et passons-les sous forme de tableau lors de la création de la <a href="/docs/#api/en/objects/Mesh"><code class="notranslate" translate="no">Mesh</code></a></p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const loader = new THREE.TextureLoader();
-const texture = loader.load( 'resources/images/wall.jpg' );
-texture.colorSpace = THREE.SRGBColorSpace;

-const material = new THREE.MeshBasicMaterial({
- map: loader.load('resources/images/wall.jpg'),
- map: texture,
-});
+const materials = [
+ new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-1.jpg')}),
+ new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-2.jpg')}),
+ new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-3.jpg')}),
+ new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-4.jpg')}),
+ new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-5.jpg')}),
+ new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-6.jpg')}),
+ new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-1.jpg')}),
+ new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-2.jpg')}),
+ new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-3.jpg')}),
+ new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-4.jpg')}),
+ new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-5.jpg')}),
+ new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-6.jpg')}),
+];
-const cube = new THREE.Mesh(geometry, material);
+const cube = new THREE.Mesh(geometry, materials);

+function loadColorTexture( path ) {
+ const texture = loader.load( path );
+ texture.colorSpace = THREE.SRGBColorSpace;
+ return texture;
+}
</pre>
<p>Ça marche !</p>
<p></p><div translate="no" class="threejs_example_container notranslate">
Expand Down
6 changes: 4 additions & 2 deletions manual/ja/lights.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -261,7 +261,8 @@ <h2 id="-pointlight-"><code class="notranslate" translate="no">PointLight（点
<p><a href="/docs/#api/ja/lights/PointLight"><code class="notranslate" translate="no">PointLight</code></a> はある点から全方向に光を放つライトです。
コード変更しましょう。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const color = 0xFFFFFF;
const intensity = 1;
-const intensity = 1;
+const intensity = 150;
-const light = new THREE.DirectionalLight(color, intensity);
+const light = new THREE.PointLight(color, intensity);
light.position.set(0, 10, 0);
Expand Down Expand Up @@ -312,7 +313,8 @@ <h2 id="-spotlight-"><code class="notranslate" translate="no">SpotLight（集中
ライトの円錐体がターゲットに向かって照らされます。</p>
<p>上記のヘルパーを使って <a href="/docs/#api/ja/lights/DirectionalLight"><code class="notranslate" translate="no">DirectionalLight</code></a> を修正します。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const color = 0xFFFFFF;
const intensity = 1;
-const intensity = 1;
+const intensity = 150;
-const light = new THREE.DirectionalLight(color, intensity);
+const light = new THREE.SpotLight(color, intensity);
scene.add(light);
Expand Down
3 changes: 0 additions & 3 deletions manual/ja/post-processing.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,11 +89,8 @@ <h2 id="-rendertoscreen-"><code class="notranslate" translate="no">renderToScree
648, // scanline count
false, // grayscale
);
filmPass.renderToScreen = true;
composer.addPass(filmPass);
</pre>
<p><code class="notranslate" translate="no">filmPass</code> は最後のPassなので、<code class="notranslate" translate="no">renderToScreen</code> プロパティをtrueに設定し、キャンバスにレンダリングするようにします。
この設定がないと次のレンダーターゲットにレンダリングされます。</p>
<p>これらのクラスを使用するには、以下をインポートする必要があります。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {EffectComposer} from 'three/addons/postprocessing/EffectComposer.js';
import {RenderPass} from 'three/addons/postprocessing/RenderPass.js';
Expand Down
26 changes: 18 additions & 8 deletions manual/ja/textures.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,10 +64,12 @@ <h2 id="-a-name-hello-a-"><a name="hello"></a> ハロー・テクスチャ</h2>
<a href="/docs/#api/ja/loaders/TextureLoader#load"><code class="notranslate" translate="no">load</code></a>を画像のURLを引数にして呼び、<code class="notranslate" translate="no">color</code>を設定する代わりに、
マテリアルの<code class="notranslate" translate="no">map</code>属性にその結果を渡してください。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">+const loader = new THREE.TextureLoader();
+const texture = loader.load( 'resources/images/wall.jpg' );
+texture.colorSpace = THREE.SRGBColorSpace;

const material = new THREE.MeshBasicMaterial({
- color: 0xFF8844,
+ map: loader.load('resources/images/wall.jpg'),
+ map: texture,
});
</pre>
<p><a href="/docs/#api/ja/materials/MeshBasicMaterial"><code class="notranslate" translate="no">MeshBasicMaterial</code></a>を使っているので、光源が必要ないことに注意してください。</p>
Expand All @@ -94,20 +96,28 @@ <h2 id="-a-name-six-a-6-"><a name="six"></a> 立方体の各面に異なる6つ

<p><a href="/docs/#api/ja/objects/Mesh"><code class="notranslate" translate="no">Mesh</code></a>を作るときに、単に6つのマテリアルを作り、配列として渡します。</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const loader = new THREE.TextureLoader();
-const texture = loader.load( 'resources/images/wall.jpg' );
-texture.colorSpace = THREE.SRGBColorSpace;

-const material = new THREE.MeshBasicMaterial({
- map: loader.load('resources/images/wall.jpg'),
- map: texture,
-});
+const materials = [
+ new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-1.jpg')}),
+ new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-2.jpg')}),
+ new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-3.jpg')}),
+ new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-4.jpg')}),
+ new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-5.jpg')}),
+ new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-6.jpg')}),
+ new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-1.jpg')}),
+ new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-2.jpg')}),
+ new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-3.jpg')}),
+ new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-4.jpg')}),
+ new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-5.jpg')}),
+ new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-6.jpg')}),
+];
-const cube = new THREE.Mesh(geometry, material);
+const cube = new THREE.Mesh(geometry, materials);

+function loadColorTexture( path ) {
+ const texture = loader.load( path );
+ texture.colorSpace = THREE.SRGBColorSpace;
+ return texture;
+}
</pre>
<p>動きました！</p>
<p></p><div translate="no" class="threejs_example_container notranslate">
Expand Down
6 changes: 4 additions & 2 deletions manual/ko/lights.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -270,7 +270,8 @@ <h2 id="-pointlight-"><a href="/docs/#api/ko/lights/PointLight"><code class="not
<p><a href="/docs/#api/ko/lights/PointLight"><code class="notranslate" translate="no">PointLight</code></a>는 한 점에서 무한히 뻗어나가는 광원입니다. 코드를
다시 한 번 수정해보죠.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const color = 0xFFFFFF;
const intensity = 1;
-const intensity = 1;
+const intensity = 150;
-const light = new THREE.DirectionalLight(color, intensity);
+const light = new THREE.PointLight(color, intensity);
light.position.set(0, 10, 0);
Expand Down Expand Up @@ -324,7 +325,8 @@ <h2 id="-spotlight-"><a href="/docs/#api/ko/lights/SpotLight"><code class="notra
정해줘야 합니다. 원뿔의 밑면이 해당 목표물을 바라보게 되죠.</p>
<p>위 예제의 <a href="/docs/#api/ko/lights/DirectionalLight"><code class="notranslate" translate="no">DirectionalLight</code></a>와 헬퍼 객체를 수정하겠습니다.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const color = 0xFFFFFF;
const intensity = 1;
-const intensity = 1;
+const intensity = 150;
-const light = new THREE.DirectionalLight(color, intensity);
+const light = new THREE.SpotLight(color, intensity);
scene.add(light);
Expand Down
2 changes: 0 additions & 2 deletions manual/ko/post-processing.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,10 +73,8 @@ <h2 id="-rendertoscreen-"><code class="notranslate" translate="no">renderToScree
648, // 스캔라인 개수
false, // 흑백
);
filmPass.renderToScreen = true;
composer.addPass(filmPass);
</pre>
<p><code class="notranslate" translate="no">filmPass</code>가 마지막 pass이기에 캔버스에 결과를 바로 렌더링하도록 <code class="notranslate" translate="no">renderToScreen</code> 옵션을 true로 설정했습니다. 이 옵션을 설정하지 않으면 캔버스가 아닌 다음 렌더 타겟에 장면을 렌더링할 거예요.</p>
<p>또 이 클래스들을 사용하기 위해 여러 스크립트를 불러와야 합니다.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
Expand Down
Loading

0 comments on commit aff5cb1

Please sign in to comment.