diff --git a/editor/js/Editor.js b/editor/js/Editor.js index e2c14d13c97271035f66ffdca5671917fec0778f..65bc2fb49fbe2ff669c46a4c3718f94412eedefe 100644 --- a/editor/js/Editor.js +++ b/editor/js/Editor.js @@ -127,47 +127,78 @@ Editor.prototype = { // - addHelper: function ( object ) { + addHelper: function () { - if ( object instanceof THREE.PointLight ) { + var geometry = new THREE.SphereGeometry( 20, 4, 2 ); + var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } ); - var helper = new THREE.PointLightHelper( object, 10 ); - helper.userData.object = object; - this.sceneHelpers.add( helper ); - this.helpers[ object.id ] = helper; + return function ( object ) { - this.signals.helperAdded.dispatch( helper ); + if ( object instanceof THREE.PointLight ) { - } else if ( object instanceof THREE.DirectionalLight ) { + var picker = new THREE.Mesh( geometry, material ); + picker.name = 'picker'; + picker.userData.object = object; + picker.visible = false; - var helper = new THREE.DirectionalLightHelper( object, 10 ); - helper.userData.object = object; - this.sceneHelpers.add( helper ); - this.helpers[ object.id ] = helper; + var helper = new THREE.PointLightHelper( object, 10 ); + helper.add( picker ); + + this.sceneHelpers.add( helper ); + this.helpers[ object.id ] = helper; - this.signals.helperAdded.dispatch( helper ); + this.signals.helperAdded.dispatch( helper ); - } else if ( object instanceof THREE.SpotLight ) { + } else if ( object instanceof THREE.DirectionalLight ) { - var helper = new THREE.SpotLightHelper( object, 10 ); - helper.userData.object = object; - this.sceneHelpers.add( helper ); - this.helpers[ object.id ] = helper; + var picker = new THREE.Mesh( geometry, material ); + picker.name = 'picker'; + picker.userData.object = object; + picker.visible = false; - this.signals.helperAdded.dispatch( helper ); + var helper = new THREE.DirectionalLightHelper( object, 20 ); + helper.add( picker ); - } else if ( object instanceof THREE.HemisphereLight ) { + this.sceneHelpers.add( helper ); + this.helpers[ object.id ] = helper; - var helper = new THREE.HemisphereLightHelper( object, 10 ); - helper.userData.object = object; - this.sceneHelpers.add( helper ); - this.helpers[ object.id ] = helper; + this.signals.helperAdded.dispatch( helper ); - this.signals.helperAdded.dispatch( helper ); + } else if ( object instanceof THREE.SpotLight ) { - } + var picker = new THREE.Mesh( geometry, material ); + picker.name = 'picker'; + picker.userData.object = object; + picker.visible = false; - }, + var helper = new THREE.SpotLightHelper( object, 10 ); + helper.add( picker ); + + this.sceneHelpers.add( helper ); + this.helpers[ object.id ] = helper; + + this.signals.helperAdded.dispatch( helper ); + + } else if ( object instanceof THREE.HemisphereLight ) { + + var picker = new THREE.Mesh( geometry, material ); + picker.name = 'picker'; + picker.userData.object = object; + picker.visible = false; + + var helper = new THREE.HemisphereLightHelper( object, 10 ); + helper.add( picker ); + + this.sceneHelpers.add( helper ); + this.helpers[ object.id ] = helper; + + this.signals.helperAdded.dispatch( helper ); + + } + + }; + + }(), removeHelper: function ( object ) { @@ -211,17 +242,7 @@ Editor.prototype = { selectById: function ( id ) { - var scope = this; - - this.scene.traverse( function ( node ) { - - if ( node.id === id ) { - - scope.select( node ); - - } - - } ); + this.select( this.scene.getObjectById( id ) ); }, diff --git a/editor/js/Menubar.Add.js b/editor/js/Menubar.Add.js index 5b2a71f98d3348167cc77fc5d26e2ebf3b164032..ff0c9e64f710fa0c72f2579fd00798731facc7cb 100644 --- a/editor/js/Menubar.Add.js +++ b/editor/js/Menubar.Add.js @@ -36,7 +36,7 @@ Menubar.Add = function ( editor ) { var heightSegments = 1; var geometry = new THREE.PlaneGeometry( width, height, widthSegments, heightSegments ); - var material = new THREE.MeshLambertMaterial(); + var material = new THREE.MeshPhongMaterial(); var mesh = new THREE.Mesh( geometry, material ); mesh.name = 'Plane ' + ( ++ meshCount ); @@ -64,7 +64,7 @@ Menubar.Add = function ( editor ) { var depthSegments = 1; var geometry = new THREE.CubeGeometry( width, height, depth, widthSegments, heightSegments, depthSegments ); - var mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial() ); + var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial() ); mesh.name = 'Cube ' + ( ++ meshCount ); editor.addObject( mesh ); @@ -88,7 +88,7 @@ Menubar.Add = function ( editor ) { var openEnded = false; var geometry = new THREE.CylinderGeometry( radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded ); - var mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial() ); + var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial() ); mesh.name = 'Cylinder ' + ( ++ meshCount ); editor.addObject( mesh ); @@ -109,7 +109,7 @@ Menubar.Add = function ( editor ) { var heightSegments = 16; var geometry = new THREE.SphereGeometry( radius, widthSegments, heightSegments ); - var mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial() ); + var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial() ); mesh.name = 'Sphere ' + ( ++ meshCount ); editor.addObject( mesh ); @@ -129,7 +129,7 @@ Menubar.Add = function ( editor ) { var detail = 2; var geometry = new THREE.IcosahedronGeometry ( radius, detail ); - var mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial() ); + var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial() ); mesh.name = 'Icosahedron ' + ( ++ meshCount ); editor.addObject( mesh ); @@ -152,7 +152,7 @@ Menubar.Add = function ( editor ) { var arc = Math.PI * 2; var geometry = new THREE.TorusGeometry( radius, tube, radialSegments, tubularSegments, arc ); - var mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial() ); + var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial() ); mesh.name = 'Torus ' + ( ++ meshCount ); editor.addObject( mesh ); @@ -177,7 +177,7 @@ Menubar.Add = function ( editor ) { var heightScale = 1; var geometry = new THREE.TorusKnotGeometry( radius, tube, radialSegments, tubularSegments, p, q, heightScale ); - var mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial() ); + var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial() ); mesh.name = 'TorusKnot ' + ( ++ meshCount ); editor.addObject( mesh ); diff --git a/editor/js/Viewport.js b/editor/js/Viewport.js index d84c0b61b660221c7e382ecd30c7d9dde76d7791..4e76efb265333dfa29271ab3c366a783c34ffb59 100644 --- a/editor/js/Viewport.js +++ b/editor/js/Viewport.js @@ -288,13 +288,13 @@ var Viewport = function ( editor ) { signals.helperAdded.add( function ( object ) { - objects.push( object ); + objects.push( object.getObjectByName( 'picker' ) ); } ); signals.helperRemoved.add( function ( object ) { - objects.splice( objects.indexOf( object ), 1 ); + objects.splice( objects.indexOf( object.getObjectByName( 'picker' ) ), 1 ); } ); diff --git a/src/extras/helpers/DirectionalLightHelper.js b/src/extras/helpers/DirectionalLightHelper.js index 62d2920f8ee6bf47581414ee3cd2535688801b72..8e72ce6c4eb977ed56b13d75db8ce4274bf07336 100644 --- a/src/extras/helpers/DirectionalLightHelper.js +++ b/src/extras/helpers/DirectionalLightHelper.js @@ -3,51 +3,56 @@ * @author mrdoob / http://mrdoob.com/ */ -THREE.DirectionalLightHelper = function ( light, sphereSize ) { +THREE.DirectionalLightHelper = function ( light, size ) { THREE.Object3D.call( this ); - this.matrixAutoUpdate = false; - this.light = light; + this.light.updateMatrixWorld(); - var geometry = new THREE.SphereGeometry( sphereSize, 4, 2 ); - var material = new THREE.MeshBasicMaterial( { fog: false, wireframe: true } ); - material.color.copy( this.light.color ).multiplyScalar( this.light.intensity ); + this.matrixWorld = light.matrixWorld; + this.matrixAutoUpdate = false; - this.lightSphere = new THREE.Mesh( geometry, material ); - this.lightSphere.matrixWorld = this.light.matrixWorld; - this.lightSphere.matrixAutoUpdate = false; - this.add( this.lightSphere ); + var geometry = new THREE.PlaneGeometry( size, size ); + var material = new THREE.MeshBasicMaterial( { wireframe: true, fog: false } ); + material.color.copy( this.light.color ).multiplyScalar( this.light.intensity ); - /* - this.targetSphere = new THREE.Mesh( geometry, material ); - this.targetSphere.position = this.light.target.position; - this.add( this.targetSphere ); - */ + this.lightPlane = new THREE.Mesh( geometry, material ); + this.add( this.lightPlane ); geometry = new THREE.Geometry(); - geometry.vertices.push( this.light.position ); - geometry.vertices.push( this.light.target.position ); + geometry.vertices.push( new THREE.Vector3() ); + geometry.vertices.push( new THREE.Vector3() ); geometry.computeLineDistances(); - material = new THREE.LineDashedMaterial( { dashSize: 4, gapSize: 4, opacity: 0.75, transparent: true, fog: false } ); + material = new THREE.LineBasicMaterial( { fog: false } ); material.color.copy( this.light.color ).multiplyScalar( this.light.intensity ); this.targetLine = new THREE.Line( geometry, material ); this.add( this.targetLine ); -} + this.update(); + +}; THREE.DirectionalLightHelper.prototype = Object.create( THREE.Object3D.prototype ); THREE.DirectionalLightHelper.prototype.update = function () { - this.lightSphere.material.color.copy( this.light.color ).multiplyScalar( this.light.intensity ); + var vector = new THREE.Vector3(); - this.targetLine.geometry.computeLineDistances(); - this.targetLine.geometry.verticesNeedUpdate = true; - this.targetLine.material.color.copy( this.light.color ).multiplyScalar( this.light.intensity ); + return function () { -}; + vector.getPositionFromMatrix( this.light.matrixWorld ).negate(); + + this.lightPlane.lookAt( vector ); + this.lightPlane.material.color.copy( this.light.color ).multiplyScalar( this.light.intensity ); + + this.targetLine.geometry.vertices[ 1 ].copy( vector ); + this.targetLine.geometry.verticesNeedUpdate = true; + this.targetLine.material.color.copy( this.lightPlane.material.color ); + + } + +}(); diff --git a/src/extras/helpers/HemisphereLightHelper.js b/src/extras/helpers/HemisphereLightHelper.js index 28878f0028b0752a5a615f2e66c4569260373b2d..e117776525f5517b08159f1d7a5fe70b2ad37973 100644 --- a/src/extras/helpers/HemisphereLightHelper.js +++ b/src/extras/helpers/HemisphereLightHelper.js @@ -8,37 +8,46 @@ THREE.HemisphereLightHelper = function ( light, sphereSize, arrowLength, domeSiz THREE.Object3D.call( this ); this.light = light; + this.light.updateMatrixWorld(); + + this.matrixWorld = light.matrixWorld; + this.matrixAutoUpdate = false; + + this.colors = [ new THREE.Color(), new THREE.Color() ]; var geometry = new THREE.SphereGeometry( sphereSize, 4, 2 ); geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) ); for ( var i = 0, il = 8; i < il; i ++ ) { - geometry.faces[ i ].materialIndex = i < 4 ? 0 : 1; + geometry.faces[ i ].color = this.colors[ i < 4 ? 0 : 1 ]; } - var materialSky = new THREE.MeshBasicMaterial( { fog: false, wireframe: true } ); - materialSky.color.copy( light.color ).multiplyScalar( light.intensity ); - - var materialGround = new THREE.MeshBasicMaterial( { fog: false, wireframe: true } ); - materialGround.color.copy( light.groundColor ).multiplyScalar( light.intensity ); + var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors, wireframe: true } ); - this.lightSphere = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( [ materialSky, materialGround ] ) ); - this.lightSphere.position = light.position; - this.lightSphere.lookAt( new THREE.Vector3() ); + this.lightSphere = new THREE.Mesh( geometry, material ); this.add( this.lightSphere ); + this.update(); + }; THREE.HemisphereLightHelper.prototype = Object.create( THREE.Object3D.prototype ); THREE.HemisphereLightHelper.prototype.update = function () { - this.lightSphere.lookAt( new THREE.Vector3() ); + var vector = new THREE.Vector3(); - this.lightSphere.material.materials[ 0 ].color.copy( this.light.color ).multiplyScalar( this.light.intensity ); - this.lightSphere.material.materials[ 1 ].color.copy( this.light.groundColor ).multiplyScalar( this.light.intensity ); + return function () { -}; + this.colors[ 0 ].copy( this.light.color ).multiplyScalar( this.light.intensity ); + this.colors[ 1 ].copy( this.light.groundColor ).multiplyScalar( this.light.intensity ); + + this.lightSphere.lookAt( vector.getPositionFromMatrix( this.light.matrixWorld ).negate() ); + this.lightSphere.geometry.colorsNeedUpdate = true; + + } + +}(); diff --git a/src/extras/helpers/PointLightHelper.js b/src/extras/helpers/PointLightHelper.js index 3b52695f728306834627dbac7c74cb56ffa44758..91adefed2e2bbd070c965a5009c289916cbc4dfc 100644 --- a/src/extras/helpers/PointLightHelper.js +++ b/src/extras/helpers/PointLightHelper.js @@ -6,9 +6,10 @@ THREE.PointLightHelper = function ( light, sphereSize ) { this.light = light; + this.light.updateMatrixWorld(); var geometry = new THREE.SphereGeometry( sphereSize, 4, 2 ); - var material = new THREE.MeshBasicMaterial( { fog: false, wireframe: true } ); + var material = new THREE.MeshBasicMaterial( { wireframe: true, fog: false } ); material.color.copy( this.light.color ).multiplyScalar( this.light.intensity ); THREE.Mesh.call( this, geometry, material ); diff --git a/src/extras/helpers/SpotLightHelper.js b/src/extras/helpers/SpotLightHelper.js index e1c27bcb99e80f00a1d4dbde3a84de8516c91d77..71313499c319093115f9d4e0548ab58e30a52737 100644 --- a/src/extras/helpers/SpotLightHelper.js +++ b/src/extras/helpers/SpotLightHelper.js @@ -6,50 +6,45 @@ THREE.SpotLightHelper = function ( light ) { - // spotlight helper must be a child of the scene + THREE.Object3D.call( this ); this.light = light; + this.light.updateMatrixWorld(); + + this.matrixWorld = light.matrixWorld; + this.matrixAutoUpdate = false; var geometry = new THREE.CylinderGeometry( 0, 1, 1, 8, 1, true ); geometry.applyMatrix( new THREE.Matrix4().makeTranslation( 0, -0.5, 0 ) ); - geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) ); - var material = new THREE.MeshBasicMaterial( { wireframe: true, opacity: 0.3, transparent: true } ); - - THREE.Mesh.call( this, geometry, material ); + var material = new THREE.MeshBasicMaterial( { wireframe: true, fog: false } ); + + this.cone = new THREE.Mesh( geometry, material ); + this.add( this.cone ); this.update(); }; -THREE.SpotLightHelper.prototype = Object.create( THREE.Mesh.prototype ); +THREE.SpotLightHelper.prototype = Object.create( THREE.Object3D.prototype ); -THREE.SpotLightHelper.prototype.update = ( function () { +THREE.SpotLightHelper.prototype.update = function () { - var targetPosition = new THREE.Vector3(); + var vector = new THREE.Vector3(); - return function() { + return function () { var coneLength = this.light.distance ? this.light.distance : 10000; - var coneWidth = coneLength * Math.tan( this.light.angle ); - this.scale.set( coneWidth, coneWidth, coneLength ); - - this.light.updateMatrixWorld( true ); - - this.position.getPositionFromMatrix( this.light.matrixWorld ); - - this.light.target.updateMatrixWorld( true ); - - targetPosition.getPositionFromMatrix( this.light.target.matrixWorld ); + this.cone.scale.set( coneWidth, coneWidth, coneLength ); - this.lookAt( targetPosition ); + this.cone.lookAt( vector.getPositionFromMatrix( this.light.matrixWorld ).negate() ); - this.material.color.copy( this.light.color ).multiplyScalar( this.light.intensity ); + this.cone.material.color.copy( this.light.color ).multiplyScalar( this.light.intensity ); } -}()); +}();