Skip to content

Commit 890a757

Browse files
mrdoobmrdoob
committed
Refactored helpers.
1 parent c1d45fd commit 890a757

File tree

7 files changed

+138
-107
lines changed

7 files changed

+138
-107
lines changed

‎editor/js/Editor.js

Lines changed: 59 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -127,47 +127,78 @@ Editor.prototype = {
127127

128128
//
129129

130-
addHelper: function ( object ) {
130+
addHelper: function () {
131131

132-
if ( object instanceof THREE.PointLight ) {
132+
var geometry = new THREE.SphereGeometry( 20, 4, 2 );
133+
var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
133134

134-
var helper = new THREE.PointLightHelper( object, 10 );
135-
helper.userData.object = object;
136-
this.sceneHelpers.add( helper );
137-
this.helpers[ object.id ] = helper;
135+
return function ( object ) {
138136

139-
this.signals.helperAdded.dispatch( helper );
137+
if ( object instanceof THREE.PointLight ) {
140138

141-
} else if ( object instanceof THREE.DirectionalLight ) {
139+
var picker = new THREE.Mesh( geometry, material );
140+
picker.name = 'picker';
141+
picker.userData.object = object;
142+
picker.visible = false;
142143

143-
var helper = new THREE.DirectionalLightHelper( object, 10 );
144-
helper.userData.object = object;
145-
this.sceneHelpers.add( helper );
146-
this.helpers[ object.id ] = helper;
144+
var helper = new THREE.PointLightHelper( object, 10 );
145+
helper.add( picker );
146+
147+
this.sceneHelpers.add( helper );
148+
this.helpers[ object.id ] = helper;
147149

148-
this.signals.helperAdded.dispatch( helper );
150+
this.signals.helperAdded.dispatch( helper );
149151

150-
} else if ( object instanceof THREE.SpotLight ) {
152+
} else if ( object instanceof THREE.DirectionalLight ) {
151153

152-
var helper = new THREE.SpotLightHelper( object, 10 );
153-
helper.userData.object = object;
154-
this.sceneHelpers.add( helper );
155-
this.helpers[ object.id ] = helper;
154+
var picker = new THREE.Mesh( geometry, material );
155+
picker.name = 'picker';
156+
picker.userData.object = object;
157+
picker.visible = false;
156158

157-
this.signals.helperAdded.dispatch( helper );
159+
var helper = new THREE.DirectionalLightHelper( object, 20 );
160+
helper.add( picker );
158161

159-
} else if ( object instanceof THREE.HemisphereLight ) {
162+
this.sceneHelpers.add( helper );
163+
this.helpers[ object.id ] = helper;
160164

161-
var helper = new THREE.HemisphereLightHelper( object, 10 );
162-
helper.userData.object = object;
163-
this.sceneHelpers.add( helper );
164-
this.helpers[ object.id ] = helper;
165+
this.signals.helperAdded.dispatch( helper );
165166

166-
this.signals.helperAdded.dispatch( helper );
167+
} else if ( object instanceof THREE.SpotLight ) {
167168

168-
}
169+
var picker = new THREE.Mesh( geometry, material );
170+
picker.name = 'picker';
171+
picker.userData.object = object;
172+
picker.visible = false;
169173

170-
},
174+
var helper = new THREE.SpotLightHelper( object, 10 );
175+
helper.add( picker );
176+
177+
this.sceneHelpers.add( helper );
178+
this.helpers[ object.id ] = helper;
179+
180+
this.signals.helperAdded.dispatch( helper );
181+
182+
} else if ( object instanceof THREE.HemisphereLight ) {
183+
184+
var picker = new THREE.Mesh( geometry, material );
185+
picker.name = 'picker';
186+
picker.userData.object = object;
187+
picker.visible = false;
188+
189+
var helper = new THREE.HemisphereLightHelper( object, 10 );
190+
helper.add( picker );
191+
192+
this.sceneHelpers.add( helper );
193+
this.helpers[ object.id ] = helper;
194+
195+
this.signals.helperAdded.dispatch( helper );
196+
197+
}
198+
199+
};
200+
201+
}(),
171202

172203
removeHelper: function ( object ) {
173204

@@ -211,17 +242,7 @@ Editor.prototype = {
211242

212243
selectById: function ( id ) {
213244

214-
var scope = this;
215-
216-
this.scene.traverse( function ( node ) {
217-
218-
if ( node.id === id ) {
219-
220-
scope.select( node );
221-
222-
}
223-
224-
} );
245+
this.select( this.scene.getObjectById( id ) );
225246

226247
},
227248

‎editor/js/Menubar.Add.js

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ Menubar.Add = function ( editor ) {
3636
var heightSegments = 1;
3737

3838
var geometry = new THREE.PlaneGeometry( width, height, widthSegments, heightSegments );
39-
var material = new THREE.MeshLambertMaterial();
39+
var material = new THREE.MeshPhongMaterial();
4040
var mesh = new THREE.Mesh( geometry, material );
4141
mesh.name = 'Plane ' + ( ++ meshCount );
4242

@@ -64,7 +64,7 @@ Menubar.Add = function ( editor ) {
6464
var depthSegments = 1;
6565

6666
var geometry = new THREE.CubeGeometry( width, height, depth, widthSegments, heightSegments, depthSegments );
67-
var mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial() );
67+
var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial() );
6868
mesh.name = 'Cube ' + ( ++ meshCount );
6969

7070
editor.addObject( mesh );
@@ -88,7 +88,7 @@ Menubar.Add = function ( editor ) {
8888
var openEnded = false;
8989

9090
var geometry = new THREE.CylinderGeometry( radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded );
91-
var mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial() );
91+
var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial() );
9292
mesh.name = 'Cylinder ' + ( ++ meshCount );
9393

9494
editor.addObject( mesh );
@@ -109,7 +109,7 @@ Menubar.Add = function ( editor ) {
109109
var heightSegments = 16;
110110

111111
var geometry = new THREE.SphereGeometry( radius, widthSegments, heightSegments );
112-
var mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial() );
112+
var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial() );
113113
mesh.name = 'Sphere ' + ( ++ meshCount );
114114

115115
editor.addObject( mesh );
@@ -129,7 +129,7 @@ Menubar.Add = function ( editor ) {
129129
var detail = 2;
130130

131131
var geometry = new THREE.IcosahedronGeometry ( radius, detail );
132-
var mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial() );
132+
var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial() );
133133
mesh.name = 'Icosahedron ' + ( ++ meshCount );
134134

135135
editor.addObject( mesh );
@@ -152,7 +152,7 @@ Menubar.Add = function ( editor ) {
152152
var arc = Math.PI * 2;
153153

154154
var geometry = new THREE.TorusGeometry( radius, tube, radialSegments, tubularSegments, arc );
155-
var mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial() );
155+
var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial() );
156156
mesh.name = 'Torus ' + ( ++ meshCount );
157157

158158
editor.addObject( mesh );
@@ -177,7 +177,7 @@ Menubar.Add = function ( editor ) {
177177
var heightScale = 1;
178178

179179
var geometry = new THREE.TorusKnotGeometry( radius, tube, radialSegments, tubularSegments, p, q, heightScale );
180-
var mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial() );
180+
var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial() );
181181
mesh.name = 'TorusKnot ' + ( ++ meshCount );
182182

183183
editor.addObject( mesh );

‎editor/js/Viewport.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -288,13 +288,13 @@ var Viewport = function ( editor ) {
288288

289289
signals.helperAdded.add( function ( object ) {
290290

291-
objects.push( object );
291+
objects.push( object.getObjectByName( 'picker' ) );
292292

293293
} );
294294

295295
signals.helperRemoved.add( function ( object ) {
296296

297-
objects.splice( objects.indexOf( object ), 1 );
297+
objects.splice( objects.indexOf( object.getObjectByName( 'picker' ) ), 1 );
298298

299299
} );
300300

‎src/extras/helpers/DirectionalLightHelper.js

Lines changed: 29 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,51 +3,56 @@
33
* @author mrdoob / http://mrdoob.com/
44
*/
55

6-
THREE.DirectionalLightHelper = function ( light, sphereSize ) {
6+
THREE.DirectionalLightHelper = function ( light, size ) {
77

88
THREE.Object3D.call( this );
99

10-
this.matrixAutoUpdate = false;
11-
1210
this.light = light;
11+
this.light.updateMatrixWorld();
1312

14-
var geometry = new THREE.SphereGeometry( sphereSize, 4, 2 );
15-
var material = new THREE.MeshBasicMaterial( { fog: false, wireframe: true } );
16-
material.color.copy( this.light.color ).multiplyScalar( this.light.intensity );
13+
this.matrixWorld = light.matrixWorld;
14+
this.matrixAutoUpdate = false;
1715

18-
this.lightSphere = new THREE.Mesh( geometry, material );
19-
this.lightSphere.matrixWorld = this.light.matrixWorld;
20-
this.lightSphere.matrixAutoUpdate = false;
21-
this.add( this.lightSphere );
16+
var geometry = new THREE.PlaneGeometry( size, size );
17+
var material = new THREE.MeshBasicMaterial( { wireframe: true, fog: false } );
18+
material.color.copy( this.light.color ).multiplyScalar( this.light.intensity );
2219

23-
/*
24-
this.targetSphere = new THREE.Mesh( geometry, material );
25-
this.targetSphere.position = this.light.target.position;
26-
this.add( this.targetSphere );
27-
*/
20+
this.lightPlane = new THREE.Mesh( geometry, material );
21+
this.add( this.lightPlane );
2822

2923
geometry = new THREE.Geometry();
30-
geometry.vertices.push( this.light.position );
31-
geometry.vertices.push( this.light.target.position );
24+
geometry.vertices.push( new THREE.Vector3() );
25+
geometry.vertices.push( new THREE.Vector3() );
3226
geometry.computeLineDistances();
3327

34-
material = new THREE.LineDashedMaterial( { dashSize: 4, gapSize: 4, opacity: 0.75, transparent: true, fog: false } );
28+
material = new THREE.LineBasicMaterial( { fog: false } );
3529
material.color.copy( this.light.color ).multiplyScalar( this.light.intensity );
3630

3731
this.targetLine = new THREE.Line( geometry, material );
3832
this.add( this.targetLine );
3933

40-
}
34+
this.update();
35+
36+
};
4137

4238
THREE.DirectionalLightHelper.prototype = Object.create( THREE.Object3D.prototype );
4339

4440
THREE.DirectionalLightHelper.prototype.update = function () {
4541

46-
this.lightSphere.material.color.copy( this.light.color ).multiplyScalar( this.light.intensity );
42+
var vector = new THREE.Vector3();
4743

48-
this.targetLine.geometry.computeLineDistances();
49-
this.targetLine.geometry.verticesNeedUpdate = true;
50-
this.targetLine.material.color.copy( this.light.color ).multiplyScalar( this.light.intensity );
44+
return function () {
5145

52-
};
46+
vector.getPositionFromMatrix( this.light.matrixWorld ).negate();
47+
48+
this.lightPlane.lookAt( vector );
49+
this.lightPlane.material.color.copy( this.light.color ).multiplyScalar( this.light.intensity );
50+
51+
this.targetLine.geometry.vertices[ 1 ].copy( vector );
52+
this.targetLine.geometry.verticesNeedUpdate = true;
53+
this.targetLine.material.color.copy( this.lightPlane.material.color );
54+
55+
}
56+
57+
}();
5358

‎src/extras/helpers/HemisphereLightHelper.js

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,37 +8,46 @@ THREE.HemisphereLightHelper = function ( light, sphereSize, arrowLength, domeSiz
88
THREE.Object3D.call( this );
99

1010
this.light = light;
11+
this.light.updateMatrixWorld();
12+
13+
this.matrixWorld = light.matrixWorld;
14+
this.matrixAutoUpdate = false;
15+
16+
this.colors = [ new THREE.Color(), new THREE.Color() ];
1117

1218
var geometry = new THREE.SphereGeometry( sphereSize, 4, 2 );
1319
geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );
1420

1521
for ( var i = 0, il = 8; i < il; i ++ ) {
1622

17-
geometry.faces[ i ].materialIndex = i < 4 ? 0 : 1;
23+
geometry.faces[ i ].color = this.colors[ i < 4 ? 0 : 1 ];
1824

1925
}
2026

21-
var materialSky = new THREE.MeshBasicMaterial( { fog: false, wireframe: true } );
22-
materialSky.color.copy( light.color ).multiplyScalar( light.intensity );
23-
24-
var materialGround = new THREE.MeshBasicMaterial( { fog: false, wireframe: true } );
25-
materialGround.color.copy( light.groundColor ).multiplyScalar( light.intensity );
27+
var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors, wireframe: true } );
2628

27-
this.lightSphere = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( [ materialSky, materialGround ] ) );
28-
this.lightSphere.position = light.position;
29-
this.lightSphere.lookAt( new THREE.Vector3() );
29+
this.lightSphere = new THREE.Mesh( geometry, material );
3030
this.add( this.lightSphere );
3131

32+
this.update();
33+
3234
};
3335

3436
THREE.HemisphereLightHelper.prototype = Object.create( THREE.Object3D.prototype );
3537

3638
THREE.HemisphereLightHelper.prototype.update = function () {
3739

38-
this.lightSphere.lookAt( new THREE.Vector3() );
40+
var vector = new THREE.Vector3();
3941

40-
this.lightSphere.material.materials[ 0 ].color.copy( this.light.color ).multiplyScalar( this.light.intensity );
41-
this.lightSphere.material.materials[ 1 ].color.copy( this.light.groundColor ).multiplyScalar( this.light.intensity );
42+
return function () {
4243

43-
};
44+
this.colors[ 0 ].copy( this.light.color ).multiplyScalar( this.light.intensity );
45+
this.colors[ 1 ].copy( this.light.groundColor ).multiplyScalar( this.light.intensity );
46+
47+
this.lightSphere.lookAt( vector.getPositionFromMatrix( this.light.matrixWorld ).negate() );
48+
this.lightSphere.geometry.colorsNeedUpdate = true;
49+
50+
}
51+
52+
}();
4453

‎src/extras/helpers/PointLightHelper.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,10 @@
66
THREE.PointLightHelper = function ( light, sphereSize ) {
77

88
this.light = light;
9+
this.light.updateMatrixWorld();
910

1011
var geometry = new THREE.SphereGeometry( sphereSize, 4, 2 );
11-
var material = new THREE.MeshBasicMaterial( { fog: false, wireframe: true } );
12+
var material = new THREE.MeshBasicMaterial( { wireframe: true, fog: false } );
1213
material.color.copy( this.light.color ).multiplyScalar( this.light.intensity );
1314

1415
THREE.Mesh.call( this, geometry, material );

0 commit comments

Comments
 (0)