Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Manual: Clean up. #26358

Merged
merged 2 commits into from
Jul 2, 2023
Merged

Manual: Clean up. #26358

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2fc4239
Manual: Clean up.
Mugen87 Jul 2, 2023
c21ab9d
Manual: More clean up.
Mugen87 Jul 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions manual/en/lights.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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