Home Explore Help
Sign In
javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

fix helpers

Gregg Tavares 7 years ago
parent
fbf6a820de
commit
ed4ca443ab
7 changed files with 40 additions and 20 deletions
Split View Show Diff Stats
  1. 17 4
      threejs/lessons/threejs-lights.md
  2. 7 3
      threejs/threejs-lights-directional-w-helper.html
  3. 2 1
      threejs/threejs-lights-directional.html
  4. 3 5
      threejs/threejs-lights-point-physically-correct.html
  5. 2 2
      threejs/threejs-lights-point.html
  6. 2 2
      threejs/threejs-lights-rectarea.html
  7. 7 3
      threejs/threejs-lights-spot-w-helper.html

+ 17 - 4
threejs/lessons/threejs-lights.md
View File 

@@ -255,7 +255,7 @@ of helper objects we can add to our scene to help visualize
 
 invisible parts of a scene. In this case we'll use the
 
 `DirectionalLightHelper` which will draw a plane, to represent
 
 the light, and a line from the light to the target. We just
 
-pass it the light and add it to the scene.
 
+pass it the light and add itd add it to the scene.
 
 
 ```javascript
 
 const helper = new THREE.DirectionalLightHelper(light);
 
@@ -286,7 +286,11 @@ Then we can use that for both the light's position
 
 and the target's position like this
 
 
 ```javascript
 
-+const onChange = helper.update.bind(helper);
 
++const onChange = () => {
 
++  light.target.updateMatrixWorld();
 
++  helper.update();
 
++};
 
++onChange();
 
 
 const gui = new dat.GUI();
 
 gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
 
@@ -328,7 +332,17 @@ Let's also switch to a `PointLightHelper`
 
 -const helper = new THREE.DirectionalLightHelper(light);
 
 +const helper = new THREE.PointLightHelper(light);
 
 scene.add(helper);
 
-helper.update();
 
+```
 
+
 
+and as there is no target the `onChange` function can be simpler.
 
+
 
+```javascript
 
+-const onChange = () => {
 
+-  light.target.updateMatrixWorld();
 
+-  helper.update();
 
+-};
 
+-onChange();
 
++const onChange = helper.update.bind(helper);
 
 ```
 
 
 Note that at some level a `PointLightHelper` has no um, point.
 
@@ -384,7 +398,6 @@ scene.add(light.target);
 
 -const helper = new THREE.DirectionalLightHelper(light);
 
 +const helper = new THREE.SpotLightHelper(light);
 
 scene.add(helper);
 
-helper.update();
 
 ```
 
 
 The spotlight's cone's angle is set with the [`angle`](Spotlight.angle)

+ 7 - 3
threejs/threejs-lights-directional-w-helper.html
View File 

@@ -65,7 +65,8 @@ function main() {
 
     const mesh = new THREE.Mesh(planeGeo, planeMat);
 
     mesh.rotation.x = Math.PI * -.5;
 
     scene.add(mesh);
 
-  }  {
 
+  }
 
+  {
 
     const cubeSize = 4;
 
     const cubeGeo = new THREE.BoxBufferGeometry(cubeSize, cubeSize, cubeSize);
 
     const cubeMat = new THREE.MeshPhongMaterial({color: '#8AC'});
 
@@ -117,8 +118,11 @@ function main() {
 
     const helper = new THREE.DirectionalLightHelper(light);
 
     scene.add(helper);
 
 
-    const onChange = helper.update.bind(helper);
 
-    setTimeout(onChange);
 
+    const onChange = () => {
 
+      light.target.updateMatrixWorld();
 
+      helper.update();
 
+    };
 
+    onChange();
 
 
     const gui = new dat.GUI();
 
     gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');

+ 2 - 1
threejs/threejs-lights-directional.html
View File 

@@ -65,7 +65,8 @@ function main() {
 
     const mesh = new THREE.Mesh(planeGeo, planeMat);
 
     mesh.rotation.x = Math.PI * -.5;
 
     scene.add(mesh);
 
-  }  {
 
+  }
 
+  {
 
     const cubeSize = 4;
 
     const cubeGeo = new THREE.BoxBufferGeometry(cubeSize, cubeSize, cubeSize);
 
     const cubeMat = new THREE.MeshPhongMaterial({color: '#8AC'});

+ 3 - 5
threejs/threejs-lights-point-physically-correct.html
View File 

@@ -4,7 +4,7 @@
 
   <head>
 
     <meta charset="utf-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
 
-    <title>Three.js - Lights - Point</title>
 
+    <title>Three.js - Lights - Physically Correct Lights</title>
 
     <style>
 
     html, body {
 
         margin: 0;
 
@@ -66,7 +66,8 @@ function main() {
 
     const mesh = new THREE.Mesh(planeGeo, planeMat);
 
     mesh.rotation.x = Math.PI * -.5;
 
     scene.add(mesh);
 
-  }  {
 
+  }
 
+  {
 
     const cubeSize = 4;
 
     const cubeGeo = new THREE.BoxBufferGeometry(cubeSize, cubeSize, cubeSize);
 
     const cubeMat = new THREE.MeshPhongMaterial({color: '#8AC'});
 
@@ -119,9 +120,6 @@ function main() {
 
     const helper = new THREE.PointLightHelper(light);
 
     scene.add(helper);
 
 
-    const onChange = helper.update.bind(helper);
 
-    setTimeout(onChange);
 
-
 
     const gui = new dat.GUI();
 
     gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
 
     gui.add(light, 'decay', 0, 4);

+ 2 - 2
threejs/threejs-lights-point.html
View File 

@@ -65,7 +65,8 @@ function main() {
 
     const mesh = new THREE.Mesh(planeGeo, planeMat);
 
     mesh.rotation.x = Math.PI * -.5;
 
     scene.add(mesh);
 
-  }  {
 
+  }
 
+  {
 
     const cubeSize = 4;
 
     const cubeGeo = new THREE.BoxBufferGeometry(cubeSize, cubeSize, cubeSize);
 
     const cubeMat = new THREE.MeshPhongMaterial({color: '#8AC'});
 
@@ -116,7 +117,6 @@ function main() {
 
     scene.add(helper);
 
 
     const onChange = helper.update.bind(helper);
 
-    setTimeout(onChange);
 
 
     const gui = new dat.GUI();
 
     gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');

+ 2 - 2
threejs/threejs-lights-rectarea.html
View File 

@@ -66,7 +66,8 @@ function main() {
 
     const mesh = new THREE.Mesh(planeGeo, planeMat);
 
     mesh.rotation.x = Math.PI * -.5;
 
     scene.add(mesh);
 
-  }  {
 
+  }
 
+  {
 
     const cubeSize = 4;
 
     const cubeGeo = new THREE.BoxBufferGeometry(cubeSize, cubeSize, cubeSize);
 
     const cubeMat = new THREE.MeshStandardMaterial({color: '#8AC'});
 
@@ -133,7 +134,6 @@ function main() {
 
     scene.add(helper);
 
 
     const onChange = helper.update.bind(helper);
 
-    setTimeout(onChange);
 
 
     const gui = new dat.GUI();
 
     gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');

+ 7 - 3
threejs/threejs-lights-spot-w-helper.html
View File 

@@ -65,7 +65,8 @@ function main() {
 
     const mesh = new THREE.Mesh(planeGeo, planeMat);
 
     mesh.rotation.x = Math.PI * -.5;
 
     scene.add(mesh);
 
-  }  {
 
+  }
 
+  {
 
     const cubeSize = 4;
 
     const cubeGeo = new THREE.BoxBufferGeometry(cubeSize, cubeSize, cubeSize);
 
     const cubeMat = new THREE.MeshPhongMaterial({color: '#8AC'});
 
@@ -130,8 +131,11 @@ function main() {
 
     const helper = new THREE.SpotLightHelper(light);
 
     scene.add(helper);
 
 
-    const onChange = helper.update.bind(helper);
 
-    setTimeout(onChange);
 
+    const onChange = () => {
 
+      light.target.updateMatrixWorld();
 
+      helper.update();
 
+    };
 
+    onChange();
 
 
     const gui = new dat.GUI();
 
     gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');