From d20b0069e37e5b80c6a8ac6131411ac1b0660bee Mon Sep 17 00:00:00 2001 From: HypnosNova <601670314@qq.com> Date: Thu, 19 Jul 2018 23:38:30 +0800 Subject: [PATCH 001/145] add boxselection demo --- examples/files.js | 1 + examples/js/interactive/SelectionBox.js | 116 +++++++++++ examples/js/interactive/SelectionHelper.js | 73 +++++++ examples/webgl_interactive_boxselection.html | 206 +++++++++++++++++++ 4 files changed, 396 insertions(+) create mode 100644 examples/js/interactive/SelectionBox.js create mode 100644 examples/js/interactive/SelectionHelper.js create mode 100644 examples/webgl_interactive_boxselection.html diff --git a/examples/files.js b/examples/files.js index be31c9d93f2cb9..e6782372416c2f 100644 --- a/examples/files.js +++ b/examples/files.js @@ -59,6 +59,7 @@ var files = { "webgl_interactive_lines", "webgl_interactive_points", "webgl_interactive_raycasting_points", + "webgl_interactive_boxselection", "webgl_interactive_voxelpainter", "webgl_kinect", "webgl_lensflares", diff --git a/examples/js/interactive/SelectionBox.js b/examples/js/interactive/SelectionBox.js new file mode 100644 index 00000000000000..f5fcca100e20f4 --- /dev/null +++ b/examples/js/interactive/SelectionBox.js @@ -0,0 +1,116 @@ +/** + * @author HypnosNova / https://www.threejs.org.cn/gallery + * This is a class to check whether objects are in a selection area in 3D space + */ + +function SelectionBox ( camera, scene, deep ) { + + this.camera = camera; + this.scene = scene; + this.startPoint = new THREE.Vector3(); + this.endPoint = new THREE.Vector3(); + this.collection = []; + this.deep = deep || Number.MAX_VALUE; + +} + +SelectionBox.prototype.select = function ( startPoint, endPoint ) { + + this.startPoint = startPoint || this.startPoint; + this.endPoint = endPoint || this.endPoint; + this.collection = []; + + var boxSelectionFrustum = this.createFrustum( this.startPoint, this.endPoint ); + this.searchChildInFrustum( boxSelectionFrustum, this.scene ); + + return this.collection; + +} + +SelectionBox.prototype.createFrustum = function ( startPoint, endPoint ) { + + startPoint = startPoint || this.startPoint; + endPoint = endPoint || this.endPoint + + this.camera.updateProjectionMatrix(); + this.camera.updateMatrixWorld(); + this.camera.updateMatrix(); + + var tmpPoint = startPoint.clone(); + tmpPoint.x = Math.min( startPoint.x, endPoint.x ); + tmpPoint.y = Math.max( startPoint.y, endPoint.y ); + endPoint.x = Math.max( startPoint.x, endPoint.x ); + endPoint.y = Math.min( startPoint.y, endPoint.y ); + + var vecNear = this.camera.position.clone(); + var vecTopLeft = tmpPoint.clone(); + var vecTopRight = new THREE.Vector3( endPoint.x, tmpPoint.y, 0 ); + var vecDownRight = endPoint.clone(); + var vecDownLeft = new THREE.Vector3( tmpPoint.x, endPoint.y, 0 ); + vecTopLeft.unproject( this.camera ); + vecTopRight.unproject( this.camera ); + vecDownRight.unproject( this.camera ); + vecDownLeft.unproject( this.camera ); + + var vectemp1 = vecTopLeft.clone().sub( vecNear ); + var vectemp2 = vecTopRight.clone().sub( vecNear ); + var vectemp3 = vecDownRight.clone().sub( vecNear ); + vectemp1.normalize(); + vectemp2.normalize(); + vectemp3.normalize(); + + vectemp1.multiplyScalar( this.deep ); + vectemp2.multiplyScalar( this.deep ); + vectemp3.multiplyScalar( this.deep ); + vectemp1.add( vecNear ); + vectemp2.add( vecNear ); + vectemp3.add( vecNear ); + + var planeTop = new THREE.Plane(); + planeTop.setFromCoplanarPoints( vecNear, vecTopLeft, vecTopRight ); + var planeRight = new THREE.Plane(); + planeRight.setFromCoplanarPoints( vecNear, vecTopRight, vecDownRight ); + var planeDown = new THREE.Plane(); + planeDown.setFromCoplanarPoints( vecDownRight, vecDownLeft, vecNear ); + var planeLeft = new THREE.Plane(); + planeLeft.setFromCoplanarPoints( vecDownLeft, vecTopLeft, vecNear ); + var planeFront = new THREE.Plane(); + planeFront.setFromCoplanarPoints( vecTopRight, vecDownRight, vecDownLeft ); + var planeBack = new THREE.Plane(); + planeBack.setFromCoplanarPoints( vectemp3, vectemp2, vectemp1 ); + planeBack.normal = planeBack.normal.multiplyScalar( -1 ); + + return new THREE.Frustum( planeTop, planeRight, planeDown, planeLeft, planeFront, planeBack ); + +} + +SelectionBox.prototype.searchChildInFrustum = function ( frustum, object ) { + + if ( object instanceof THREE.Mesh ) { + + if ( object.material !== undefined ) { + + object.geometry.computeBoundingSphere(); + var center = object.geometry.boundingSphere.center.clone().applyMatrix4( object.matrixWorld ); + + if ( frustum.containsPoint( center ) ) { + + this.collection.push( object ); + + } + + } + + } + + if ( object.children.length > 0 ) { + + for ( var x = 0; x < object.children.length; x++ ) { + + this.searchChildInFrustum( frustum, object.children[x] ); + + } + + } + +} \ No newline at end of file diff --git a/examples/js/interactive/SelectionHelper.js b/examples/js/interactive/SelectionHelper.js new file mode 100644 index 00000000000000..d18c68fb1e6e72 --- /dev/null +++ b/examples/js/interactive/SelectionHelper.js @@ -0,0 +1,73 @@ +function SelectionHelper ( selectionBox, renderer, cssClassName ) { + + this.element = document.createElement( "div" ); + this.element.classList.add( cssClassName ); + this.element.style.pointerEvents = "none"; + + this.renderer = renderer; + + this.startPoint = { x: 0, y: 0 }; + this.pointTopLeft = { x: 0, y: 0 }; + this.pointBottomRight = { x: 0, y: 0 }; + + this.isDown = false; + + this.renderer.domElement.addEventListener( "mousedown", function ( event ) { + + this.isDown = true; + this.onSelectStart( event ); + + }.bind( this ), false ); + + this.renderer.domElement.addEventListener( "mousemove", function ( event ) { + + if ( this.isDown ) { + + this.onSelectMove( event ); + + } + + }.bind( this ), false ); + + this.renderer.domElement.addEventListener( "mouseup", function ( event ) { + + this.isDown = false; + this.onSelectOver( event ); + + }.bind( this ), false ); + +} + +SelectionHelper.prototype.onSelectStart = function ( event ) { + + this.renderer.domElement.parentElement.appendChild( this.element ); + + this.element.style.left = event.clientX + "px"; + this.element.style.top = event.clientY + "px"; + this.element.style.width = "0px"; + this.element.style.height = "0px"; + + this.startPoint.x = event.clientX; + this.startPoint.y = event.clientY; + +} + +SelectionHelper.prototype.onSelectMove = function ( event ) { + + this.pointBottomRight.x = Math.max( this.startPoint.x, event.clientX ); + this.pointBottomRight.y = Math.max( this.startPoint.y, event.clientY ); + this.pointTopLeft.x = Math.min( this.startPoint.x, event.clientX ); + this.pointTopLeft.y = Math.min( this.startPoint.y, event.clientY ); + + this.element.style.left = this.pointTopLeft.x + "px"; + this.element.style.top = this.pointTopLeft.y + "px"; + this.element.style.width = ( this.pointBottomRight.x - this.pointTopLeft.x ) + "px"; + this.element.style.height = ( this.pointBottomRight.y - this.pointTopLeft.y ) + "px"; + +} + +SelectionHelper.prototype.onSelectOver = function ( event ) { + + this.element.parentElement.removeChild( this.element ); + +} diff --git a/examples/webgl_interactive_boxselection.html b/examples/webgl_interactive_boxselection.html new file mode 100644 index 00000000000000..f24e3cbaceec31 --- /dev/null +++ b/examples/webgl_interactive_boxselection.html @@ -0,0 +1,206 @@ + + +
+[example:canvas_camera_orthographic camera / orthographic ]
[example:webgl_camera camera ]
[example:webgl_interactive_cubes_ortho interactive / cubes / ortho ]
[example:webgl_materials_cubemap_dynamic materials / cubemap / dynamic ]
diff --git a/docs/api/en/cameras/PerspectiveCamera.html b/docs/api/en/cameras/PerspectiveCamera.html index 63277b5b71906c..a1b817c18f2626 100644 --- a/docs/api/en/cameras/PerspectiveCamera.html +++ b/docs/api/en/cameras/PerspectiveCamera.html @@ -22,8 +22,6 @@[example:canvas_geometry_birds geometry / birds ]
-[example:canvas_geometry_cube geometry / cube ]
[example:webgl_animation_skinning_blending animation / skinning / blending ]
[example:webgl_animation_skinning_morph animation / skinning / blending ]
[example:webgl_effects_stereo effects / stereo ]
diff --git a/docs/api/en/deprecated/DeprecatedList.html b/docs/api/en/deprecated/DeprecatedList.html index 4cc5cbe2bc9e54..737b6ad746a9ef 100644 --- a/docs/api/en/deprecated/DeprecatedList.html +++ b/docs/api/en/deprecated/DeprecatedList.html @@ -501,11 +501,11 @@- CanvasRenderer has been moved to [link:https://github.com/mrdoob/three.js/blob/master/examples/js/renderers/CanvasRenderer.js /examples/js/renderers/CanvasRenderer.js]. + CanvasRenderer has been removed.
- [example:canvas_camera_orthographic camera / orthographic ]
- [example:canvas_interactive_voxelpainter interactive / voxelpainter ]
- [example:canvas_materials materials ]
- [example:canvas_sandbox sandbox ]
[example:webgl_animation_cloth animation / cloth ]
[example:webgl_animation_skinning_blending animation / skinning / blending ]
- [example:canvas_morphtargets_horse morphtargets / horse ]
[example:misc_controls_fly controls / fly ]
[example:misc_lights_test lights / test ]
[example:webvr_cubes cubes ]
diff --git a/docs/api/en/lights/PointLight.html b/docs/api/en/lights/PointLight.html
index 9308b6f9e9d4ce..3011e318f3b4db 100644
--- a/docs/api/en/lights/PointLight.html
+++ b/docs/api/en/lights/PointLight.html
@@ -23,7 +23,6 @@
- [example:canvas_lights_pointlights lights / pointlights ]
[example:webgl_lights_pointlights lights / pointlights ]
[example:webgl_lights_pointlights2 lights / pointlights2 ]
[example:webgldeferred_animation animation ]
diff --git a/docs/api/en/materials/LineDashedMaterial.html b/docs/api/en/materials/LineDashedMaterial.html
index 7473f8b5347c7b..cfa1fef5d2ce14 100644
--- a/docs/api/en/materials/LineDashedMaterial.html
+++ b/docs/api/en/materials/LineDashedMaterial.html
@@ -18,7 +18,6 @@
[example:webgl_lines_dashed WebGL / lines / dashed]
- [example:canvas_lines_dashed Canvas / lines /dashed]
diff --git a/docs/examples/SpriteCanvasMaterial.html b/docs/examples/SpriteCanvasMaterial.html
deleted file mode 100644
index b49cba14f63226..00000000000000
--- a/docs/examples/SpriteCanvasMaterial.html
+++ /dev/null
@@ -1,61 +0,0 @@
-
-
-
-
-
-
-
-
-
-
- [page:Material] →
-
- [name]
-
- Create a material that can draw custom sprites using a 2d canvas.
-
-
- Constructor
-
-
- [name]( [param:Object parameters] )
-
- parameters is an object that can be used to set up the default properties
-
-
- rotation - the rotation of the sprite
- color - the color of the sprite
- program - the program used to draw the sprite
-
-
-
- Properties
-
- [property:Radians rotation]
-
- The rotation of the sprite in radians. Default is 0.
-
-
- [property:Color color]
-
- The color of the sprite. The material will set up the color for the context before calling the material's program.
-
-
- Methods
-
-
-
- [method:null program]([param:CanvasRenderingContext2D context], [param:Color color])
-
- context -- The canvas context
- color -- The color of the sprite
-
-
- Define a program that will use the context to draw the sprite.
-
-
- Source
-
- [link:https://github.com/mrdoob/three.js/blob/master/examples/js/renderers/CanvasRenderer.js examples/js/renderers/CanvasRenderer.js]
-
-
diff --git a/docs/examples/renderers/CanvasRenderer.html b/docs/examples/renderers/CanvasRenderer.html
deleted file mode 100644
index e99b9f95cd28c5..00000000000000
--- a/docs/examples/renderers/CanvasRenderer.html
+++ /dev/null
@@ -1,174 +0,0 @@
-
-
-
-
-
-
-
-
-
-
- [name]
-
-
- The Canvas renderer displays your beautifully crafted scenes not using WebGL,
- but draws it using the (slower) Canvas 2D Context
- API.
-
-
- NOTE: The Canvas renderer has been deprecated and is no longer part of the three.js core.
-
- If you still need to use it you can find it here: [link:https://github.com/mrdoob/three.js/blob/master/examples/js/[path].js examples/js/[path].js].
-
- This renderer can be a nice fallback from [page:WebGLRenderer] for simple scenes:
-
-
- function webglAvailable() {
- try {
- var canvas = document.createElement( 'canvas' );
- return !!( window.WebGLRenderingContext && (
- canvas.getContext( 'webgl' ) ||
- canvas.getContext( 'experimental-webgl' ) )
- );
- } catch ( e ) {
- return false;
- }
- }
-
- if ( webglAvailable() ) {
- renderer = new THREE.WebGLRenderer();
- } else {
- renderer = new THREE.CanvasRenderer();
- }
-
-
- Note: both WebGLRenderer and CanvasRenderer are embedded in the web page using an HTML5 <canvas> tag.
- The "Canvas" in CanvasRenderer means it uses Canvas 2D instead of WebGL.
-
- Don't confuse either CanvasRenderer with the SoftwareRenderer example, which simulates a screen buffer in a Javascript array.
-
-
- Constructor
-
-
- [name]([param:object parameters])
- parameters is an optional object with properties defining the renderer's behaviour. The constructor also accepts no parameters at all. In all cases, it will assume sane defaults when parameters are missing.
-
-
- [page:DOMElement canvas] - A [link:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas canvas]
- where the renderer draws its output.
- This corresponds to the [page:CanvasRenderer.domElement domElement] property below.
- If not passed in here, a new canvas element will be created.
-
- [page:Boolean alpha] - whether the canvas contains an alpha (transparency) buffer or not.
- Default is *false*.
-
-
-
- Properties
-
- [property:Object info]
-
-
- An object with a series of statistical information about the graphics board memory and the rendering process. Useful for debugging or just for the sake of curiosity. The object contains the following fields:
-
- - render:
-
- - vertices
- - faces
-
-
-
-
-
- [property:DOMElement domElement]
-
-
- A [page:Canvas] where the renderer draws its output.
- This is automatically created by the renderer in the constructor (if not provided already); you just need to add it to your page.
-
-
- [property:Boolean autoClear]
-
- Defines whether the renderer should automatically clear its output before rendering.
-
-
- [property:Boolean sortObjects]
-
- Defines whether the renderer should sort objects. Default is true.
- Note: Sorting is used to attempt to properly render objects that have some degree of transparency. By definition, sorting objects may not work in all cases. Depending on the needs of application, it may be neccessary to turn off sorting and use other methods to deal with transparency rendering e.g. manually determining the object rendering order.
-
-
- [property:boolean sortElements]
-
- Defines whether the renderer should sort the face of each object. Default is true.
-
-
-
- Methods
-
- [method:null render]([param:Scene scene], [param:Camera camera])
-
- scene -- The scene to render.
- camera -- the camera to view the scene.
-
-
- Render a scene using a camera.
-
-
- [method:null clear]()
-
- Tells the renderer to clear its color drawing buffer with the clearcolor.
-
-
- [method:null setClearColor]([param:Color color], [param:number alpha])
-
- color -- The color to clear the canvas with.
- alpha -- The alpha channel to clear the canvas with.
-
-
- This set the clearColor and the clearAlpha.
-
-
-
- [method:null setSize]([param:Number width], [param:Number height])
-
- width -- The width of the drawing canvas.
- height -- The height of the drawing canvas.
-
-
- This set the size of the drawing canvas and if updateStyle is set, then the css of the canvas is updated too.
-
-
- [method:null setClearColorHex]([param:number hex], [param:number alpha])
-
- hex -- The the hexadecimal value of the color to clear the canvas with.
- alpha -- The alpha channel to clear the canvas with.
-
-
- This set the clearColor and the clearAlpha.
-
-
- [method:number getClearColorHex]()
-
- Returns the [page:number hex] color.
-
-
- [method:number getClearAlpha]()
-
- Returns the alpha value.
-
-
- Empty Methods to Maintain Compatibility with [page:WebglRenderer]
-
- [method:null clearColor]()
- [method:null clearDepth]()
- [method:null clearStencil]()
- [method:number getMaxAnisotropy]() - returns 1
-
-
- Source
-
- [link:https://github.com/mrdoob/three.js/blob/master/examples/js/[path].js examples/js/[path].js]
-
-
diff --git a/docs/list.js b/docs/list.js
index 0327f2b077f12f..3755cdec595e45 100644
--- a/docs/list.js
+++ b/docs/list.js
@@ -383,7 +383,6 @@ var list = {
"Plugins": {
"LookupTable": "examples/Lut",
- "SpriteCanvasMaterial": "examples/SpriteCanvasMaterial"
},
"QuickHull": {
@@ -395,7 +394,6 @@ var list = {
},
"Renderers": {
- "CanvasRenderer": "examples/renderers/CanvasRenderer",
"CSS2DRenderer": "examples/renderers/CSS2DRenderer",
"CSS3DRenderer": "examples/renderers/CSS3DRenderer",
"SVGRenderer": "examples/renderers/SVGRenderer"
@@ -807,7 +805,6 @@ var list = {
"Plugins": {
"LookupTable": "examples/Lut",
- "SpriteCanvasMaterial": "examples/SpriteCanvasMaterial"
},
"QuickHull": {
@@ -819,7 +816,6 @@ var list = {
},
"Renderers": {
- "CanvasRenderer": "examples/renderers/CanvasRenderer",
"CSS2DRenderer": "examples/renderers/CSS2DRenderer",
"CSS3DRenderer": "examples/renderers/CSS3DRenderer",
"SVGRenderer": "examples/renderers/SVGRenderer"
diff --git a/docs/manual/en/introduction/Creating-text.html b/docs/manual/en/introduction/Creating-text.html
index 2c03afd3641e60..77b98802492c28 100644
--- a/docs/manual/en/introduction/Creating-text.html
+++ b/docs/manual/en/introduction/Creating-text.html
@@ -77,7 +77,6 @@ 4. Procedural Text Geometry
Examples
[example:webgl_geometry_text WebGL / geometry / text]
- [example:canvas_geometry_text canvas / geometry / text]
[example:webgl_shadowmap WebGL / shadowmap]
diff --git a/examples/canvas_ascii_effect.html b/examples/canvas_ascii_effect.html
deleted file mode 100644
index b8ea7b1b254b4f..00000000000000
--- a/examples/canvas_ascii_effect.html
+++ /dev/null
@@ -1,140 +0,0 @@
-
-
-
- three.js - ASCII Effect
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/canvas_camera_orthographic.html b/examples/canvas_camera_orthographic.html
deleted file mode 100644
index 98c8d206bb0ee5..00000000000000
--- a/examples/canvas_camera_orthographic.html
+++ /dev/null
@@ -1,153 +0,0 @@
-
-
-
- three.js canvas - camera - orthographic
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/canvas_geometry_birds.html b/examples/canvas_geometry_birds.html
deleted file mode 100644
index 75e10bd44fedb5..00000000000000
--- a/examples/canvas_geometry_birds.html
+++ /dev/null
@@ -1,483 +0,0 @@
-
-
-
- three.js canvas - geometry - birds
-
-
-
-
-
-
-
- three.js - birds demo
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/canvas_geometry_cube.html b/examples/canvas_geometry_cube.html
deleted file mode 100644
index 623c2c3d492844..00000000000000
--- a/examples/canvas_geometry_cube.html
+++ /dev/null
@@ -1,209 +0,0 @@
-
-
-
- three.js canvas - geometry - cube
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/canvas_geometry_earth.html b/examples/canvas_geometry_earth.html
deleted file mode 100644
index 16c4ed99073f23..00000000000000
--- a/examples/canvas_geometry_earth.html
+++ /dev/null
@@ -1,176 +0,0 @@
-
-
-
- three.js canvas - geometry - earth
-
-
-
-
-
-
-
- three.js - earth demo
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/canvas_geometry_hierarchy.html b/examples/canvas_geometry_hierarchy.html
deleted file mode 100644
index a8e677d1004140..00000000000000
--- a/examples/canvas_geometry_hierarchy.html
+++ /dev/null
@@ -1,136 +0,0 @@
-
-
-
- three.js canvas - geometry - hierarchy
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/canvas_geometry_nurbs.html b/examples/canvas_geometry_nurbs.html
deleted file mode 100644
index 27db193e800733..00000000000000
--- a/examples/canvas_geometry_nurbs.html
+++ /dev/null
@@ -1,245 +0,0 @@
-
-
-
- three.js canvas - geometry - NURBS
-
-
-
-
-
-
-
- three.js - NURBS curve example
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/canvas_geometry_panorama.html b/examples/canvas_geometry_panorama.html
deleted file mode 100644
index b91e682e79b802..00000000000000
--- a/examples/canvas_geometry_panorama.html
+++ /dev/null
@@ -1,237 +0,0 @@
-
-
-
- three.js canvas - panorama demo
-
-
-
-
-
-
-
- three.js - panorama demo. cubemap by Jochum Skoglund.
-
-
-
-
-
-
-
-
-
diff --git a/examples/canvas_geometry_panorama_fisheye.html b/examples/canvas_geometry_panorama_fisheye.html
deleted file mode 100644
index cc53ca866ae8d7..00000000000000
--- a/examples/canvas_geometry_panorama_fisheye.html
+++ /dev/null
@@ -1,248 +0,0 @@
-
-
-
- three.js canvas - panorama fisheye demo
-
-
-
-
-
-
-
- three.js - panorama fisheye demo. cubemap by Jochum Skoglund. (mousewheel: change fov)
-
-
-
-
-
-
-
-
-
diff --git a/examples/canvas_geometry_shapes.html b/examples/canvas_geometry_shapes.html
deleted file mode 100644
index e3da4b16833d1f..00000000000000
--- a/examples/canvas_geometry_shapes.html
+++ /dev/null
@@ -1,409 +0,0 @@
-
-
-
- three.js canvas - geometry - shapes
-
-
-
-
-
-
-
- three.js - shape geometry
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/canvas_geometry_terrain.html b/examples/canvas_geometry_terrain.html
deleted file mode 100644
index 63a12bef58b704..00000000000000
--- a/examples/canvas_geometry_terrain.html
+++ /dev/null
@@ -1,218 +0,0 @@
-
-
-
- three.js canvas - geometry - terrain
-
-
-
-
-
-
-
Generating...
- three.js - terrain demo. generate another
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/canvas_geometry_text.html b/examples/canvas_geometry_text.html
deleted file mode 100644
index 12193b68ac92a8..00000000000000
--- a/examples/canvas_geometry_text.html
+++ /dev/null
@@ -1,229 +0,0 @@
-
-
-
- three.js canvas - geometry - text
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/canvas_interactive_cubes.html b/examples/canvas_interactive_cubes.html
deleted file mode 100644
index 66deb1cf0be1dd..00000000000000
--- a/examples/canvas_interactive_cubes.html
+++ /dev/null
@@ -1,199 +0,0 @@
-
-
-
- three.js canvas - interactive - cubes
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/canvas_interactive_cubes_tween.html b/examples/canvas_interactive_cubes_tween.html
deleted file mode 100644
index e1cd126333ca3a..00000000000000
--- a/examples/canvas_interactive_cubes_tween.html
+++ /dev/null
@@ -1,186 +0,0 @@
-
-
-
- three.js canvas - interactive - cubes tween
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/canvas_interactive_sprites.html b/examples/canvas_interactive_sprites.html
deleted file mode 100644
index c5f9fb75f05e8e..00000000000000
--- a/examples/canvas_interactive_sprites.html
+++ /dev/null
@@ -1,206 +0,0 @@
-
-
-
- three.js canvas - interactive sprites
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/canvas_interactive_voxelpainter.html b/examples/canvas_interactive_voxelpainter.html
deleted file mode 100644
index 44330f4abe4e17..00000000000000
--- a/examples/canvas_interactive_voxelpainter.html
+++ /dev/null
@@ -1,202 +0,0 @@
-
-
-
- three.js canvas - interactive - voxel painter
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/canvas_lights_pointlights.html b/examples/canvas_lights_pointlights.html
deleted file mode 100644
index ae977edd0806b0..00000000000000
--- a/examples/canvas_lights_pointlights.html
+++ /dev/null
@@ -1,155 +0,0 @@
-
-
-
- three.js canvas - point light
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/canvas_lines.html b/examples/canvas_lines.html
deleted file mode 100644
index 917bc18fe0d1d4..00000000000000
--- a/examples/canvas_lines.html
+++ /dev/null
@@ -1,171 +0,0 @@
-
-
-
- three.js canvas - lines - random
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/canvas_lines_colors.html b/examples/canvas_lines_colors.html
deleted file mode 100644
index 471e6a921aff40..00000000000000
--- a/examples/canvas_lines_colors.html
+++ /dev/null
@@ -1,246 +0,0 @@
-
-
-
- three.js canvas - lines - colors
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/canvas_lines_dashed.html b/examples/canvas_lines_dashed.html
deleted file mode 100644
index b9b62aaa8d7f0e..00000000000000
--- a/examples/canvas_lines_dashed.html
+++ /dev/null
@@ -1,157 +0,0 @@
-
-
-
- three.js canvas - dashed lines
-
-
-
-
-
-
- three.js - dashed lines example
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/canvas_lines_sphere.html b/examples/canvas_lines_sphere.html
deleted file mode 100644
index 45ffe34ee6c1c1..00000000000000
--- a/examples/canvas_lines_sphere.html
+++ /dev/null
@@ -1,190 +0,0 @@
-
-
-
- three.js canvas - lines - sphere
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/canvas_materials.html b/examples/canvas_materials.html
deleted file mode 100644
index 23e066530a67f0..00000000000000
--- a/examples/canvas_materials.html
+++ /dev/null
@@ -1,189 +0,0 @@
-
-
-
- three.js canvas - materials
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/canvas_materials_normal.html b/examples/canvas_materials_normal.html
deleted file mode 100644
index 4dcae35d0030eb..00000000000000
--- a/examples/canvas_materials_normal.html
+++ /dev/null
@@ -1,115 +0,0 @@
-
-
-
- three.js canvas - normal material
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/canvas_materials_reflection.html b/examples/canvas_materials_reflection.html
deleted file mode 100644
index 61d8f21ad9bff0..00000000000000
--- a/examples/canvas_materials_reflection.html
+++ /dev/null
@@ -1,113 +0,0 @@
-
-
-
- three.js canvas - spherical reflection
-
-
-
-
-
-
-
-
- three.js - spherical reflection demo.
- Walt Disney head by David OReilly. Reflection texture by Kewlers.
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/canvas_materials_video.html b/examples/canvas_materials_video.html
deleted file mode 100644
index 0d62faf920cb12..00000000000000
--- a/examples/canvas_materials_video.html
+++ /dev/null
@@ -1,224 +0,0 @@
-
-
-
- three.js canvas - materials - video
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/canvas_morphtargets_horse.html b/examples/canvas_morphtargets_horse.html
deleted file mode 100644
index 7685f6002c4067..00000000000000
--- a/examples/canvas_morphtargets_horse.html
+++ /dev/null
@@ -1,152 +0,0 @@
-
-
-
- three.js canvas - morph targets - horse
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/canvas_particles_floor.html b/examples/canvas_particles_floor.html
deleted file mode 100644
index 0b8351aa2f1d40..00000000000000
--- a/examples/canvas_particles_floor.html
+++ /dev/null
@@ -1,152 +0,0 @@
-
-
-
- three.js canvas - particles - floor
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/canvas_particles_random.html b/examples/canvas_particles_random.html
deleted file mode 100644
index 59df12e579aac9..00000000000000
--- a/examples/canvas_particles_random.html
+++ /dev/null
@@ -1,169 +0,0 @@
-
-
-
- three.js canvas - particles - random
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/canvas_particles_sprites.html b/examples/canvas_particles_sprites.html
deleted file mode 100644
index 4d3816a48232da..00000000000000
--- a/examples/canvas_particles_sprites.html
+++ /dev/null
@@ -1,203 +0,0 @@
-
-
-
- three.js canvas - particles - sprites
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/canvas_particles_waves.html b/examples/canvas_particles_waves.html
deleted file mode 100644
index 63431e6f16d12f..00000000000000
--- a/examples/canvas_particles_waves.html
+++ /dev/null
@@ -1,191 +0,0 @@
-
-
-
- three.js canvas - particles - waves
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/canvas_performance.html b/examples/canvas_performance.html
deleted file mode 100644
index 11f7223662d742..00000000000000
--- a/examples/canvas_performance.html
+++ /dev/null
@@ -1,131 +0,0 @@
-
-
-
- three.js canvas - performance
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/canvas_sandbox.html b/examples/canvas_sandbox.html
deleted file mode 100644
index 8f97dfffde6cf7..00000000000000
--- a/examples/canvas_sandbox.html
+++ /dev/null
@@ -1,136 +0,0 @@
-
-
-
- three.js canvas - sandbox
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/files.js b/examples/files.js
index 9dadbd2a2c34a6..1ffb53995d0436 100644
--- a/examples/files.js
+++ b/examples/files.js
@@ -370,40 +370,6 @@ var files = {
"css2d": [
"css2d_label"
],
- "canvas": [
- "canvas_ascii_effect",
- "canvas_camera_orthographic",
- "canvas_geometry_birds",
- "canvas_geometry_cube",
- "canvas_geometry_earth",
- "canvas_geometry_hierarchy",
- "canvas_geometry_nurbs",
- "canvas_geometry_panorama",
- "canvas_geometry_panorama_fisheye",
- "canvas_geometry_shapes",
- "canvas_geometry_terrain",
- "canvas_geometry_text",
- "canvas_interactive_cubes",
- "canvas_interactive_cubes_tween",
- "canvas_interactive_sprites",
- "canvas_interactive_voxelpainter",
- "canvas_lights_pointlights",
- "canvas_lines",
- "canvas_lines_colors",
- "canvas_lines_dashed",
- "canvas_lines_sphere",
- "canvas_materials",
- "canvas_materials_normal",
- "canvas_materials_reflection",
- "canvas_materials_video",
- "canvas_morphtargets_horse",
- "canvas_particles_floor",
- "canvas_particles_random",
- "canvas_particles_sprites",
- "canvas_particles_waves",
- "canvas_performance",
- "canvas_sandbox"
- ],
"raytracing": [
"raytracing_sandbox"
],
diff --git a/examples/js/renderers/CanvasRenderer.js b/examples/js/renderers/CanvasRenderer.js
deleted file mode 100644
index ceea437b2dad7a..00000000000000
--- a/examples/js/renderers/CanvasRenderer.js
+++ /dev/null
@@ -1,1153 +0,0 @@
-/**
- * @author mrdoob / http://mrdoob.com/
- */
-
-THREE.SpriteCanvasMaterial = function ( parameters ) {
-
- THREE.Material.call( this );
-
- this.type = 'SpriteCanvasMaterial';
- this.rotation = 0;
- this.color = new THREE.Color( 0xffffff );
- this.program = function () {};
-
- this.setValues( parameters );
-
-};
-
-THREE.SpriteCanvasMaterial.prototype = Object.create( THREE.Material.prototype );
-THREE.SpriteCanvasMaterial.prototype.constructor = THREE.SpriteCanvasMaterial;
-THREE.SpriteCanvasMaterial.prototype.isSpriteCanvasMaterial = true;
-
-THREE.SpriteCanvasMaterial.prototype.clone = function () {
-
- var material = new THREE.SpriteCanvasMaterial();
-
- material.copy( this );
- material.color.copy( this.color );
- material.program = this.program;
-
- return material;
-
-};
-
-//
-
-THREE.CanvasRenderer = function ( parameters ) {
-
- console.log( 'THREE.CanvasRenderer', THREE.REVISION );
-
- parameters = parameters || {};
-
- var _this = this,
- _renderData, _elements, _lights,
- _projector = new THREE.Projector(),
-
- _canvas = parameters.canvas !== undefined
- ? parameters.canvas
- : document.createElement( 'canvas' ),
-
- _canvasWidth = _canvas.width,
- _canvasHeight = _canvas.height,
- _canvasWidthHalf = Math.floor( _canvasWidth / 2 ),
- _canvasHeightHalf = Math.floor( _canvasHeight / 2 ),
-
- _viewportX = 0,
- _viewportY = 0,
- _viewportWidth = _canvasWidth,
- _viewportHeight = _canvasHeight,
-
- _pixelRatio = 1,
-
- _context = _canvas.getContext( '2d', {
- alpha: parameters.alpha === true
- } ),
-
- _clearColor = new THREE.Color( 0x000000 ),
- _clearAlpha = parameters.alpha === true ? 0 : 1,
-
- _contextGlobalAlpha = 1,
- _contextGlobalCompositeOperation = 0,
- _contextStrokeStyle = null,
- _contextFillStyle = null,
- _contextLineWidth = null,
- _contextLineCap = null,
- _contextLineJoin = null,
- _contextLineDash = [],
-
- _v1, _v2, _v3,
-
- _v1x, _v1y, _v2x, _v2y, _v3x, _v3y,
-
- _color = new THREE.Color(),
-
- _diffuseColor = new THREE.Color(),
- _emissiveColor = new THREE.Color(),
-
- _lightColor = new THREE.Color(),
-
- _patterns = {},
-
- _uvs,
- _uv1x, _uv1y, _uv2x, _uv2y, _uv3x, _uv3y,
-
- _clipBox = new THREE.Box2(),
- _clearBox = new THREE.Box2(),
- _elemBox = new THREE.Box2(),
-
- _ambientLight = new THREE.Color(),
- _directionalLights = new THREE.Color(),
- _pointLights = new THREE.Color(),
-
- _vector3 = new THREE.Vector3(), // Needed for PointLight
- _centroid = new THREE.Vector3(),
- _normal = new THREE.Vector3(),
- _normalViewMatrix = new THREE.Matrix3();
-
- /* TODO
- _canvas.mozImageSmoothingEnabled = false;
- _canvas.webkitImageSmoothingEnabled = false;
- _canvas.msImageSmoothingEnabled = false;
- _canvas.imageSmoothingEnabled = false;
- */
-
- // dash+gap fallbacks for Firefox and everything else
-
- if ( _context.setLineDash === undefined ) {
-
- _context.setLineDash = function () {};
-
- }
-
- this.domElement = _canvas;
-
- this.autoClear = true;
- this.sortObjects = true;
- this.sortElements = true;
-
- this.info = {
-
- render: {
-
- vertices: 0,
- faces: 0
-
- }
-
- };
-
- // API
-
- this.getContext = function () {
-
- return _context;
-
- };
-
- this.getContextAttributes = function () {
-
- return _context.getContextAttributes();
-
- };
-
- this.getPixelRatio = function () {
-
- return _pixelRatio;
-
- };
-
- this.setPixelRatio = function ( value ) {
-
- if ( value !== undefined ) _pixelRatio = value;
-
- };
-
- this.setSize = function ( width, height, updateStyle ) {
-
- _canvasWidth = width * _pixelRatio;
- _canvasHeight = height * _pixelRatio;
-
- _canvas.width = _canvasWidth;
- _canvas.height = _canvasHeight;
-
- _canvasWidthHalf = Math.floor( _canvasWidth / 2 );
- _canvasHeightHalf = Math.floor( _canvasHeight / 2 );
-
- if ( updateStyle !== false ) {
-
- _canvas.style.width = width + 'px';
- _canvas.style.height = height + 'px';
-
- }
-
- _clipBox.min.set( - _canvasWidthHalf, - _canvasHeightHalf );
- _clipBox.max.set( _canvasWidthHalf, _canvasHeightHalf );
-
- _clearBox.min.set( - _canvasWidthHalf, - _canvasHeightHalf );
- _clearBox.max.set( _canvasWidthHalf, _canvasHeightHalf );
-
- _contextGlobalAlpha = 1;
- _contextGlobalCompositeOperation = 0;
- _contextStrokeStyle = null;
- _contextFillStyle = null;
- _contextLineWidth = null;
- _contextLineCap = null;
- _contextLineJoin = null;
-
- this.setViewport( 0, 0, width, height );
-
- };
-
- this.setViewport = function ( x, y, width, height ) {
-
- _viewportX = x * _pixelRatio;
- _viewportY = y * _pixelRatio;
-
- _viewportWidth = width * _pixelRatio;
- _viewportHeight = height * _pixelRatio;
-
- };
-
- this.setScissor = function () {};
- this.setScissorTest = function () {};
-
- this.setClearColor = function ( color, alpha ) {
-
- _clearColor.set( color );
- _clearAlpha = alpha !== undefined ? alpha : 1;
-
- _clearBox.min.set( - _canvasWidthHalf, - _canvasHeightHalf );
- _clearBox.max.set( _canvasWidthHalf, _canvasHeightHalf );
-
- };
-
- this.setClearColorHex = function ( hex, alpha ) {
-
- console.warn( 'THREE.CanvasRenderer: .setClearColorHex() is being removed. Use .setClearColor() instead.' );
- this.setClearColor( hex, alpha );
-
- };
-
- this.getClearColor = function () {
-
- return _clearColor;
-
- };
-
- this.getClearAlpha = function () {
-
- return _clearAlpha;
-
- };
-
- this.getMaxAnisotropy = function () {
-
- return 0;
-
- };
-
- this.clear = function () {
-
- if ( _clearBox.isEmpty() === false ) {
-
- _clearBox.intersect( _clipBox );
- _clearBox.expandByScalar( 2 );
-
- _clearBox.min.x = _clearBox.min.x + _canvasWidthHalf;
- _clearBox.min.y = - _clearBox.min.y + _canvasHeightHalf; // higher y value !
- _clearBox.max.x = _clearBox.max.x + _canvasWidthHalf;
- _clearBox.max.y = - _clearBox.max.y + _canvasHeightHalf; // lower y value !
-
- if ( _clearAlpha < 1 ) {
-
- _context.clearRect(
- _clearBox.min.x | 0,
- _clearBox.max.y | 0,
- ( _clearBox.max.x - _clearBox.min.x ) | 0,
- ( _clearBox.min.y - _clearBox.max.y ) | 0
- );
-
- }
-
- if ( _clearAlpha > 0 ) {
-
- setOpacity( 1 );
- setBlending( THREE.NormalBlending );
-
- setFillStyle( 'rgba(' + Math.floor( _clearColor.r * 255 ) + ',' + Math.floor( _clearColor.g * 255 ) + ',' + Math.floor( _clearColor.b * 255 ) + ',' + _clearAlpha + ')' );
-
- _context.fillRect(
- _clearBox.min.x | 0,
- _clearBox.max.y | 0,
- ( _clearBox.max.x - _clearBox.min.x ) | 0,
- ( _clearBox.min.y - _clearBox.max.y ) | 0
- );
-
- }
-
- _clearBox.makeEmpty();
-
- }
-
- };
-
- // compatibility
-
- this.clearColor = function () {};
- this.clearDepth = function () {};
- this.clearStencil = function () {};
-
- this.render = function ( scene, camera ) {
-
- if ( camera.isCamera === undefined ) {
-
- console.error( 'THREE.CanvasRenderer.render: camera is not an instance of THREE.Camera.' );
- return;
-
- }
-
- var background = scene.background;
-
- if ( background && background.isColor ) {
-
- setOpacity( 1 );
- setBlending( THREE.NormalBlending );
-
- setFillStyle( background.getStyle() );
- _context.fillRect( 0, 0, _canvasWidth, _canvasHeight );
-
- } else if ( this.autoClear === true ) {
-
- this.clear();
-
- }
-
- _this.info.render.vertices = 0;
- _this.info.render.faces = 0;
-
- _context.setTransform( _viewportWidth / _canvasWidth, 0, 0, - _viewportHeight / _canvasHeight, _viewportX, _canvasHeight - _viewportY );
- _context.translate( _canvasWidthHalf, _canvasHeightHalf );
-
- _renderData = _projector.projectScene( scene, camera, this.sortObjects, this.sortElements );
- _elements = _renderData.elements;
- _lights = _renderData.lights;
-
- _normalViewMatrix.getNormalMatrix( camera.matrixWorldInverse );
-
- /* DEBUG
- setFillStyle( 'rgba( 0, 255, 255, 0.5 )' );
- _context.fillRect( _clipBox.min.x, _clipBox.min.y, _clipBox.max.x - _clipBox.min.x, _clipBox.max.y - _clipBox.min.y );
- */
-
- calculateLights();
-
- for ( var e = 0, el = _elements.length; e < el; e ++ ) {
-
- var element = _elements[ e ];
-
- var material = element.material;
-
- if ( material === undefined || material.opacity === 0 ) continue;
-
- _elemBox.makeEmpty();
-
- if ( element instanceof THREE.RenderableSprite ) {
-
- _v1 = element;
- _v1.x *= _canvasWidthHalf; _v1.y *= _canvasHeightHalf;
-
- renderSprite( _v1, element, material );
-
- } else if ( element instanceof THREE.RenderableLine ) {
-
- _v1 = element.v1; _v2 = element.v2;
-
- _v1.positionScreen.x *= _canvasWidthHalf; _v1.positionScreen.y *= _canvasHeightHalf;
- _v2.positionScreen.x *= _canvasWidthHalf; _v2.positionScreen.y *= _canvasHeightHalf;
-
- _elemBox.setFromPoints( [
- _v1.positionScreen,
- _v2.positionScreen
- ] );
-
- if ( _clipBox.intersectsBox( _elemBox ) === true ) {
-
- renderLine( _v1, _v2, element, material );
-
- }
-
- } else if ( element instanceof THREE.RenderableFace ) {
-
- _v1 = element.v1; _v2 = element.v2; _v3 = element.v3;
-
- if ( _v1.positionScreen.z < - 1 || _v1.positionScreen.z > 1 ) continue;
- if ( _v2.positionScreen.z < - 1 || _v2.positionScreen.z > 1 ) continue;
- if ( _v3.positionScreen.z < - 1 || _v3.positionScreen.z > 1 ) continue;
-
- _v1.positionScreen.x *= _canvasWidthHalf; _v1.positionScreen.y *= _canvasHeightHalf;
- _v2.positionScreen.x *= _canvasWidthHalf; _v2.positionScreen.y *= _canvasHeightHalf;
- _v3.positionScreen.x *= _canvasWidthHalf; _v3.positionScreen.y *= _canvasHeightHalf;
-
- if ( material.overdraw > 0 ) {
-
- expand( _v1.positionScreen, _v2.positionScreen, material.overdraw );
- expand( _v2.positionScreen, _v3.positionScreen, material.overdraw );
- expand( _v3.positionScreen, _v1.positionScreen, material.overdraw );
-
- }
-
- _elemBox.setFromPoints( [
- _v1.positionScreen,
- _v2.positionScreen,
- _v3.positionScreen
- ] );
-
- if ( _clipBox.intersectsBox( _elemBox ) === true ) {
-
- renderFace3( _v1, _v2, _v3, 0, 1, 2, element, material );
-
- }
-
- }
-
- /* DEBUG
- setLineWidth( 1 );
- setStrokeStyle( 'rgba( 0, 255, 0, 0.5 )' );
- _context.strokeRect( _elemBox.min.x, _elemBox.min.y, _elemBox.max.x - _elemBox.min.x, _elemBox.max.y - _elemBox.min.y );
- */
-
- _clearBox.union( _elemBox );
-
- }
-
- /* DEBUG
- setLineWidth( 1 );
- setStrokeStyle( 'rgba( 255, 0, 0, 0.5 )' );
- _context.strokeRect( _clearBox.min.x, _clearBox.min.y, _clearBox.max.x - _clearBox.min.x, _clearBox.max.y - _clearBox.min.y );
- */
-
- _context.setTransform( 1, 0, 0, 1, 0, 0 );
-
- };
-
- //
-
- function calculateLights() {
-
- _ambientLight.setRGB( 0, 0, 0 );
- _directionalLights.setRGB( 0, 0, 0 );
- _pointLights.setRGB( 0, 0, 0 );
-
- for ( var l = 0, ll = _lights.length; l < ll; l ++ ) {
-
- var light = _lights[ l ];
- var lightColor = light.color;
-
- if ( light.isAmbientLight ) {
-
- _ambientLight.add( lightColor );
-
- } else if ( light.isDirectionalLight ) {
-
- // for sprites
-
- _directionalLights.add( lightColor );
-
- } else if ( light.isPointLight ) {
-
- // for sprites
-
- _pointLights.add( lightColor );
-
- }
-
- }
-
- }
-
- function calculateLight( position, normal, color ) {
-
- for ( var l = 0, ll = _lights.length; l < ll; l ++ ) {
-
- var light = _lights[ l ];
-
- _lightColor.copy( light.color );
-
- if ( light.isDirectionalLight ) {
-
- var lightPosition = _vector3.setFromMatrixPosition( light.matrixWorld ).normalize();
-
- var amount = normal.dot( lightPosition );
-
- if ( amount <= 0 ) continue;
-
- amount *= light.intensity;
-
- color.add( _lightColor.multiplyScalar( amount ) );
-
- } else if ( light.isPointLight ) {
-
- var lightPosition = _vector3.setFromMatrixPosition( light.matrixWorld );
-
- var amount = normal.dot( _vector3.subVectors( lightPosition, position ).normalize() );
-
- if ( amount <= 0 ) continue;
-
- amount *= light.distance == 0 ? 1 : 1 - Math.min( position.distanceTo( lightPosition ) / light.distance, 1 );
-
- if ( amount == 0 ) continue;
-
- amount *= light.intensity;
-
- color.add( _lightColor.multiplyScalar( amount ) );
-
- }
-
- }
-
- }
-
- function renderSprite( v1, element, material ) {
-
- setOpacity( material.opacity );
- setBlending( material.blending );
-
- var scaleX = element.scale.x * _canvasWidthHalf;
- var scaleY = element.scale.y * _canvasHeightHalf;
-
- var dist = Math.sqrt( scaleX * scaleX + scaleY * scaleY ); // allow for rotated sprite
- _elemBox.min.set( v1.x - dist, v1.y - dist );
- _elemBox.max.set( v1.x + dist, v1.y + dist );
-
- if ( material.isSpriteMaterial ) {
-
- var texture = material.map;
-
- if ( texture !== null ) {
-
- var pattern = _patterns[ texture.id ];
-
- if ( pattern === undefined || pattern.version !== texture.version ) {
-
- pattern = textureToPattern( texture );
- _patterns[ texture.id ] = pattern;
-
- }
-
- if ( pattern.canvas !== undefined ) {
-
- setFillStyle( pattern.canvas );
-
- var bitmap = texture.image;
-
- var ox = bitmap.width * texture.offset.x;
- var oy = bitmap.height * texture.offset.y;
-
- var sx = bitmap.width * texture.repeat.x;
- var sy = bitmap.height * texture.repeat.y;
-
- var cx = scaleX / sx;
- var cy = scaleY / sy;
-
- _context.save();
- _context.translate( v1.x, v1.y );
- if ( material.rotation !== 0 ) _context.rotate( material.rotation );
- _context.translate( - scaleX / 2, - scaleY / 2 );
- _context.scale( cx, cy );
- _context.translate( - ox, - oy );
- _context.fillRect( ox, oy, sx, sy );
- _context.restore();
-
- }
-
- } else {
-
- // no texture
-
- setFillStyle( material.color.getStyle() );
-
- _context.save();
- _context.translate( v1.x, v1.y );
- if ( material.rotation !== 0 ) _context.rotate( material.rotation );
- _context.scale( scaleX, - scaleY );
- _context.fillRect( - 0.5, - 0.5, 1, 1 );
- _context.restore();
-
- }
-
- } else if ( material.isSpriteCanvasMaterial ) {
-
- setStrokeStyle( material.color.getStyle() );
- setFillStyle( material.color.getStyle() );
-
- _context.save();
- _context.translate( v1.x, v1.y );
- if ( material.rotation !== 0 ) _context.rotate( material.rotation );
- _context.scale( scaleX, scaleY );
-
- material.program( _context );
-
- _context.restore();
-
- } else if ( material.isPointsMaterial ) {
-
- setFillStyle( material.color.getStyle() );
-
- _context.save();
- _context.translate( v1.x, v1.y );
- if ( material.rotation !== 0 ) _context.rotate( material.rotation );
- _context.scale( scaleX * material.size, - scaleY * material.size );
- _context.fillRect( - 0.5, - 0.5, 1, 1 );
- _context.restore();
-
- }
-
- /* DEBUG
- setStrokeStyle( 'rgb(255,255,0)' );
- _context.beginPath();
- _context.moveTo( v1.x - 10, v1.y );
- _context.lineTo( v1.x + 10, v1.y );
- _context.moveTo( v1.x, v1.y - 10 );
- _context.lineTo( v1.x, v1.y + 10 );
- _context.stroke();
- */
-
- }
-
- function renderLine( v1, v2, element, material ) {
-
- setOpacity( material.opacity );
- setBlending( material.blending );
-
- _context.beginPath();
- _context.moveTo( v1.positionScreen.x, v1.positionScreen.y );
- _context.lineTo( v2.positionScreen.x, v2.positionScreen.y );
-
- if ( material.isLineBasicMaterial ) {
-
- setLineWidth( material.linewidth );
- setLineCap( material.linecap );
- setLineJoin( material.linejoin );
-
- if ( material.vertexColors !== THREE.VertexColors ) {
-
- setStrokeStyle( material.color.getStyle() );
-
- } else {
-
- var colorStyle1 = element.vertexColors[ 0 ].getStyle();
- var colorStyle2 = element.vertexColors[ 1 ].getStyle();
-
- if ( colorStyle1 === colorStyle2 ) {
-
- setStrokeStyle( colorStyle1 );
-
- } else {
-
- try {
-
- var grad = _context.createLinearGradient(
- v1.positionScreen.x,
- v1.positionScreen.y,
- v2.positionScreen.x,
- v2.positionScreen.y
- );
- grad.addColorStop( 0, colorStyle1 );
- grad.addColorStop( 1, colorStyle2 );
-
- } catch ( exception ) {
-
- grad = colorStyle1;
-
- }
-
- setStrokeStyle( grad );
-
- }
-
- }
-
- if ( material.isLineDashedMaterial ) {
-
- setLineDash( [ material.dashSize, material.gapSize ] );
-
- }
-
- _context.stroke();
- _elemBox.expandByScalar( material.linewidth * 2 );
-
- if ( material.isLineDashedMaterial ) {
-
- setLineDash( [] );
-
- }
-
- }
-
- }
-
- function renderFace3( v1, v2, v3, uv1, uv2, uv3, element, material ) {
-
- _this.info.render.vertices += 3;
- _this.info.render.faces ++;
-
- setOpacity( material.opacity );
- setBlending( material.blending );
-
- _v1x = v1.positionScreen.x; _v1y = v1.positionScreen.y;
- _v2x = v2.positionScreen.x; _v2y = v2.positionScreen.y;
- _v3x = v3.positionScreen.x; _v3y = v3.positionScreen.y;
-
- drawTriangle( _v1x, _v1y, _v2x, _v2y, _v3x, _v3y );
-
- if ( ( material.isMeshLambertMaterial || material.isMeshPhongMaterial || material.isMeshStandardMaterial ) && material.map === null ) {
-
- _diffuseColor.copy( material.color );
- _emissiveColor.copy( material.emissive );
-
- if ( material.vertexColors === THREE.FaceColors ) {
-
- _diffuseColor.multiply( element.color );
-
- }
-
- _color.copy( _ambientLight );
-
- _centroid.copy( v1.positionWorld ).add( v2.positionWorld ).add( v3.positionWorld ).divideScalar( 3 );
-
- calculateLight( _centroid, element.normalModel, _color );
-
- _color.multiply( _diffuseColor ).add( _emissiveColor );
-
- material.wireframe === true
- ? strokePath( _color, material.wireframeLinewidth, material.wireframeLinecap, material.wireframeLinejoin )
- : fillPath( _color );
-
- } else if ( material.isMeshBasicMaterial || material.isMeshLambertMaterial || material.isMeshPhongMaterial || material.isMeshStandardMaterial ) {
-
- if ( material.map !== null ) {
-
- var mapping = material.map.mapping;
-
- if ( mapping === THREE.UVMapping ) {
-
- _uvs = element.uvs;
- patternPath( _v1x, _v1y, _v2x, _v2y, _v3x, _v3y, _uvs[ uv1 ].x, _uvs[ uv1 ].y, _uvs[ uv2 ].x, _uvs[ uv2 ].y, _uvs[ uv3 ].x, _uvs[ uv3 ].y, material.map );
-
- }
-
- } else if ( material.envMap !== null ) {
-
- if ( material.envMap.mapping === THREE.SphericalReflectionMapping ) {
-
- _normal.copy( element.vertexNormalsModel[ uv1 ] ).applyMatrix3( _normalViewMatrix );
- _uv1x = 0.5 * _normal.x + 0.5;
- _uv1y = 0.5 * _normal.y + 0.5;
-
- _normal.copy( element.vertexNormalsModel[ uv2 ] ).applyMatrix3( _normalViewMatrix );
- _uv2x = 0.5 * _normal.x + 0.5;
- _uv2y = 0.5 * _normal.y + 0.5;
-
- _normal.copy( element.vertexNormalsModel[ uv3 ] ).applyMatrix3( _normalViewMatrix );
- _uv3x = 0.5 * _normal.x + 0.5;
- _uv3y = 0.5 * _normal.y + 0.5;
-
- patternPath( _v1x, _v1y, _v2x, _v2y, _v3x, _v3y, _uv1x, _uv1y, _uv2x, _uv2y, _uv3x, _uv3y, material.envMap );
-
- }
-
- } else {
-
- _color.copy( material.color );
-
- if ( material.vertexColors === THREE.FaceColors ) {
-
- _color.multiply( element.color );
-
- }
-
- material.wireframe === true
- ? strokePath( _color, material.wireframeLinewidth, material.wireframeLinecap, material.wireframeLinejoin )
- : fillPath( _color );
-
- }
-
- } else if ( material.isMeshNormalMaterial ) {
-
- _normal.copy( element.normalModel ).applyMatrix3( _normalViewMatrix );
-
- _color.setRGB( _normal.x, _normal.y, _normal.z ).multiplyScalar( 0.5 ).addScalar( 0.5 );
-
- material.wireframe === true
- ? strokePath( _color, material.wireframeLinewidth, material.wireframeLinecap, material.wireframeLinejoin )
- : fillPath( _color );
-
- } else {
-
- _color.setRGB( 1, 1, 1 );
-
- material.wireframe === true
- ? strokePath( _color, material.wireframeLinewidth, material.wireframeLinecap, material.wireframeLinejoin )
- : fillPath( _color );
-
- }
-
- }
-
- //
-
- function drawTriangle( x0, y0, x1, y1, x2, y2 ) {
-
- _context.beginPath();
- _context.moveTo( x0, y0 );
- _context.lineTo( x1, y1 );
- _context.lineTo( x2, y2 );
- _context.closePath();
-
- }
-
- function strokePath( color, linewidth, linecap, linejoin ) {
-
- setLineWidth( linewidth );
- setLineCap( linecap );
- setLineJoin( linejoin );
- setStrokeStyle( color.getStyle() );
-
- _context.stroke();
-
- _elemBox.expandByScalar( linewidth * 2 );
-
- }
-
- function fillPath( color ) {
-
- setFillStyle( color.getStyle() );
- _context.fill();
-
- }
-
- function textureToPattern( texture ) {
-
- if ( texture.version === 0 ||
- texture instanceof THREE.CompressedTexture ||
- texture instanceof THREE.DataTexture ) {
-
- return {
- canvas: undefined,
- version: texture.version
- };
-
- }
-
- var image = texture.image;
-
- if ( image.complete === false ) {
-
- return {
- canvas: undefined,
- version: 0
- };
-
- }
-
- var repeatX = texture.wrapS === THREE.RepeatWrapping || texture.wrapS === THREE.MirroredRepeatWrapping;
- var repeatY = texture.wrapT === THREE.RepeatWrapping || texture.wrapT === THREE.MirroredRepeatWrapping;
-
- var mirrorX = texture.wrapS === THREE.MirroredRepeatWrapping;
- var mirrorY = texture.wrapT === THREE.MirroredRepeatWrapping;
-
- //
-
- var canvas = document.createElement( 'canvas' );
- canvas.width = image.width * ( mirrorX ? 2 : 1 );
- canvas.height = image.height * ( mirrorY ? 2 : 1 );
-
- var context = canvas.getContext( '2d' );
- context.setTransform( 1, 0, 0, - 1, 0, image.height );
- context.drawImage( image, 0, 0 );
-
- if ( mirrorX === true ) {
-
- context.setTransform( - 1, 0, 0, - 1, image.width, image.height );
- context.drawImage( image, - image.width, 0 );
-
- }
-
- if ( mirrorY === true ) {
-
- context.setTransform( 1, 0, 0, 1, 0, 0 );
- context.drawImage( image, 0, image.height );
-
- }
-
- if ( mirrorX === true && mirrorY === true ) {
-
- context.setTransform( - 1, 0, 0, 1, image.width, 0 );
- context.drawImage( image, - image.width, image.height );
-
- }
-
- var repeat = 'no-repeat';
-
- if ( repeatX === true && repeatY === true ) {
-
- repeat = 'repeat';
-
- } else if ( repeatX === true ) {
-
- repeat = 'repeat-x';
-
- } else if ( repeatY === true ) {
-
- repeat = 'repeat-y';
-
- }
-
- var pattern = _context.createPattern( canvas, repeat );
-
- if ( texture.onUpdate ) texture.onUpdate( texture );
-
- return {
- canvas: pattern,
- version: texture.version
- };
-
- }
-
- function patternPath( x0, y0, x1, y1, x2, y2, u0, v0, u1, v1, u2, v2, texture ) {
-
- var pattern = _patterns[ texture.id ];
-
- if ( pattern === undefined || pattern.version !== texture.version ) {
-
- pattern = textureToPattern( texture );
- _patterns[ texture.id ] = pattern;
-
- }
-
- if ( pattern.canvas !== undefined ) {
-
- setFillStyle( pattern.canvas );
-
- } else {
-
- setFillStyle( 'rgba( 0, 0, 0, 1)' );
- _context.fill();
- return;
-
- }
-
- // http://extremelysatisfactorytotalitarianism.com/blog/?p=2120
-
- var a, b, c, d, e, f, det, idet,
- offsetX = texture.offset.x / texture.repeat.x,
- offsetY = texture.offset.y / texture.repeat.y,
- width = texture.image.width * texture.repeat.x,
- height = texture.image.height * texture.repeat.y;
-
- u0 = ( u0 + offsetX ) * width;
- v0 = ( v0 + offsetY ) * height;
-
- u1 = ( u1 + offsetX ) * width;
- v1 = ( v1 + offsetY ) * height;
-
- u2 = ( u2 + offsetX ) * width;
- v2 = ( v2 + offsetY ) * height;
-
- x1 -= x0; y1 -= y0;
- x2 -= x0; y2 -= y0;
-
- u1 -= u0; v1 -= v0;
- u2 -= u0; v2 -= v0;
-
- det = u1 * v2 - u2 * v1;
-
- if ( det === 0 ) return;
-
- idet = 1 / det;
-
- a = ( v2 * x1 - v1 * x2 ) * idet;
- b = ( v2 * y1 - v1 * y2 ) * idet;
- c = ( u1 * x2 - u2 * x1 ) * idet;
- d = ( u1 * y2 - u2 * y1 ) * idet;
-
- e = x0 - a * u0 - c * v0;
- f = y0 - b * u0 - d * v0;
-
- _context.save();
- _context.transform( a, b, c, d, e, f );
- _context.fill();
- _context.restore();
-
- }
-
- /*
- function clipImage( x0, y0, x1, y1, x2, y2, u0, v0, u1, v1, u2, v2, image ) {
-
- // http://extremelysatisfactorytotalitarianism.com/blog/?p=2120
-
- var a, b, c, d, e, f, det, idet,
- width = image.width - 1,
- height = image.height - 1;
-
- u0 *= width; v0 *= height;
- u1 *= width; v1 *= height;
- u2 *= width; v2 *= height;
-
- x1 -= x0; y1 -= y0;
- x2 -= x0; y2 -= y0;
-
- u1 -= u0; v1 -= v0;
- u2 -= u0; v2 -= v0;
-
- det = u1 * v2 - u2 * v1;
-
- idet = 1 / det;
-
- a = ( v2 * x1 - v1 * x2 ) * idet;
- b = ( v2 * y1 - v1 * y2 ) * idet;
- c = ( u1 * x2 - u2 * x1 ) * idet;
- d = ( u1 * y2 - u2 * y1 ) * idet;
-
- e = x0 - a * u0 - c * v0;
- f = y0 - b * u0 - d * v0;
-
- _context.save();
- _context.transform( a, b, c, d, e, f );
- _context.clip();
- _context.drawImage( image, 0, 0 );
- _context.restore();
-
- }
- */
-
- // Hide anti-alias gaps
-
- function expand( v1, v2, pixels ) {
-
- var x = v2.x - v1.x, y = v2.y - v1.y,
- det = x * x + y * y, idet;
-
- if ( det === 0 ) return;
-
- idet = pixels / Math.sqrt( det );
-
- x *= idet; y *= idet;
-
- v2.x += x; v2.y += y;
- v1.x -= x; v1.y -= y;
-
- }
-
- // Context cached methods.
-
- function setOpacity( value ) {
-
- if ( _contextGlobalAlpha !== value ) {
-
- _context.globalAlpha = value;
- _contextGlobalAlpha = value;
-
- }
-
- }
-
- function setBlending( value ) {
-
- if ( _contextGlobalCompositeOperation !== value ) {
-
- if ( value === THREE.NormalBlending ) {
-
- _context.globalCompositeOperation = 'source-over';
-
- } else if ( value === THREE.AdditiveBlending ) {
-
- _context.globalCompositeOperation = 'lighter';
-
- } else if ( value === THREE.SubtractiveBlending ) {
-
- _context.globalCompositeOperation = 'darker';
-
- } else if ( value === THREE.MultiplyBlending ) {
-
- _context.globalCompositeOperation = 'multiply';
-
- }
-
- _contextGlobalCompositeOperation = value;
-
- }
-
- }
-
- function setLineWidth( value ) {
-
- if ( _contextLineWidth !== value ) {
-
- _context.lineWidth = value;
- _contextLineWidth = value;
-
- }
-
- }
-
- function setLineCap( value ) {
-
- // "butt", "round", "square"
-
- if ( _contextLineCap !== value ) {
-
- _context.lineCap = value;
- _contextLineCap = value;
-
- }
-
- }
-
- function setLineJoin( value ) {
-
- // "round", "bevel", "miter"
-
- if ( _contextLineJoin !== value ) {
-
- _context.lineJoin = value;
- _contextLineJoin = value;
-
- }
-
- }
-
- function setStrokeStyle( value ) {
-
- if ( _contextStrokeStyle !== value ) {
-
- _context.strokeStyle = value;
- _contextStrokeStyle = value;
-
- }
-
- }
-
- function setFillStyle( value ) {
-
- if ( _contextFillStyle !== value ) {
-
- _context.fillStyle = value;
- _contextFillStyle = value;
-
- }
-
- }
-
- function setLineDash( value ) {
-
- if ( _contextLineDash.length !== value.length ) {
-
- _context.setLineDash( value );
- _contextLineDash = value;
-
- }
-
- }
-
-};
diff --git a/examples/misc_lights_test.html b/examples/misc_lights_test.html
index 66be3a8e2eb272..3fa14bb753515e 100644
--- a/examples/misc_lights_test.html
+++ b/examples/misc_lights_test.html
@@ -26,9 +26,6 @@
-
-
-
-
@@ -28,7 +27,7 @@
var stats;
var camera, scene;
- var canvasRenderer, svgRenderer, softwareRenderer, webglRenderer;
+ var svgRenderer, softwareRenderer, webglRenderer;
var mesh, group;
@@ -187,11 +186,6 @@
directional.position.set( - 1, 0.5, 0 );
scene.add( directional );
- canvasRenderer = new THREE.CanvasRenderer();
- canvasRenderer.setPixelRatio( window.devicePixelRatio );
- canvasRenderer.setSize( width, height );
- document.body.appendChild( canvasRenderer.domElement );
-
svgRenderer = new THREE.SVGRenderer();
svgRenderer.setSize( width, height );
svgRenderer.setQuality( 'low' );
@@ -223,7 +217,6 @@
camera.aspect = width / height;
camera.updateProjectionMatrix();
- canvasRenderer.setSize( width, height );
svgRenderer.setSize( width, height );
softwareRenderer.setSize( width, height );
webglRenderer.setSize( width, height );
@@ -253,7 +246,6 @@
scene.updateMatrixWorld();
- canvasRenderer.render( scene, camera );
svgRenderer.render( scene, camera );
softwareRenderer.render( scene, camera );
webglRenderer.render( scene, camera );
diff --git a/examples/misc_ubiquity_test2.html b/examples/misc_ubiquity_test2.html
index de950e01689e67..235a42cb11f448 100644
--- a/examples/misc_ubiquity_test2.html
+++ b/examples/misc_ubiquity_test2.html
@@ -17,7 +17,6 @@
-
@@ -29,7 +28,7 @@
var stats;
var camera, scene;
- var canvasRenderer, webglRenderer;
+ var webglRenderer;
var mesh;
var texture, texture1, texture2, texture3;
@@ -148,12 +147,6 @@
//
- canvasRenderer = new THREE.CanvasRenderer();
- canvasRenderer.setPixelRatio( window.devicePixelRatio );
- canvasRenderer.setSize( width, height );
- var container1 = document.getElementById( 'container1' );
- container1.appendChild( canvasRenderer.domElement );
-
webglRenderer = new THREE.WebGLRenderer( { antialias: true } );
webglRenderer.setPixelRatio( window.devicePixelRatio );
webglRenderer.setSize( width, height );
@@ -177,7 +170,6 @@
camera.aspect = width / height;
camera.updateProjectionMatrix();
- canvasRenderer.setSize( width, height );
webglRenderer.setSize( width, height );
}
@@ -222,7 +214,6 @@
//
- canvasRenderer.render( scene, camera );
webglRenderer.render( scene, camera );
}
diff --git a/src/Three.Legacy.js b/src/Three.Legacy.js
index 456d75b1254074..750d9c58a87dc0 100644
--- a/src/Three.Legacy.js
+++ b/src/Three.Legacy.js
@@ -1873,13 +1873,7 @@ export function Projector() {
export function CanvasRenderer() {
- console.error( 'THREE.CanvasRenderer has been moved to /examples/js/renderers/CanvasRenderer.js' );
-
- this.domElement = document.createElementNS( 'http://www.w3.org/1999/xhtml', 'canvas' );
- this.clear = function () {};
- this.render = function () {};
- this.setClearColor = function () {};
- this.setSize = function () {};
+ console.error( 'THREE.CanvasRenderer has been removed' );
}
From a5b45d15ed3e18587fac1253aa96113549a22e3a Mon Sep 17 00:00:00 2001
From: Lewy Blue
Date: Wed, 10 Oct 2018 13:42:45 +0530
Subject: [PATCH 021/145] fix linter errors in webgl M to W
---
examples/webgl_marchingcubes.html | 113 ++-
examples/webgl_materials_blending.html | 14 +-
examples/webgl_materials_blending_custom.html | 22 +-
examples/webgl_materials_bumpmap.html | 10 +-
examples/webgl_materials_bumpmap_skin.html | 17 +-
examples/webgl_materials_channels.html | 5 +-
examples/webgl_materials_compile.html | 68 +-
examples/webgl_materials_cubemap.html | 15 +-
...gl_materials_cubemap_balls_reflection.html | 7 +-
...gl_materials_cubemap_balls_refraction.html | 9 +-
examples/webgl_materials_cubemap_dynamic.html | 6 +-
.../webgl_materials_cubemap_refraction.html | 42 +-
examples/webgl_materials_curvature.html | 116 +--
examples/webgl_materials_displacementmap.html | 28 +-
examples/webgl_materials_envmaps.html | 11 +-
examples/webgl_materials_envmaps_hdr.html | 6 +-
examples/webgl_materials_lightmap.html | 11 +-
examples/webgl_materials_matcap.html | 24 +-
examples/webgl_materials_modified.html | 13 +-
examples/webgl_materials_nodes.html | 6 +-
examples/webgl_materials_normalmap.html | 15 +-
...ebgl_materials_normalmap_object_space.html | 6 +-
examples/webgl_materials_parallaxmap.html | 6 +-
examples/webgl_materials_reflectivity.html | 34 +-
examples/webgl_materials_shaders_fresnel.html | 11 +-
examples/webgl_materials_skin.html | 10 +-
examples/webgl_materials_standard.html | 16 +-
.../webgl_materials_texture_anisotropy.html | 10 +-
examples/webgl_materials_texture_canvas.html | 10 +-
examples/webgl_materials_texture_filters.html | 20 +-
.../webgl_materials_texture_manualmipmap.html | 24 +-
...webgl_materials_texture_partialupdate.html | 4 +-
examples/webgl_materials_translucency.html | 71 +-
.../webgl_materials_variations_basic.html | 10 +-
.../webgl_materials_variations_lambert.html | 10 +-
.../webgl_materials_variations_phong.html | 8 +-
.../webgl_materials_variations_physical.html | 14 +-
.../webgl_materials_variations_standard.html | 12 +-
examples/webgl_materials_variations_toon.html | 8 +-
examples/webgl_materials_video.html | 52 +-
examples/webgl_materials_video_webcam.html | 20 +-
examples/webgl_materials_wireframe.html | 4 +-
examples/webgl_mirror.html | 10 +-
examples/webgl_mirror_nodes.html | 8 -
examples/webgl_modifier_subdivision.html | 53 +-
examples/webgl_modifier_tessellation.html | 14 +-
examples/webgl_morphtargets.html | 56 +-
examples/webgl_morphtargets_human.html | 4 +-
examples/webgl_morphtargets_sphere.html | 4 +-
examples/webgl_multiple_canvases_complex.html | 6 +-
examples/webgl_multiple_canvases_grid.html | 2 +-
examples/webgl_multiple_elements.html | 16 +-
examples/webgl_multiple_elements_text.html | 51 +-
examples/webgl_multiple_renderers.html | 1 -
examples/webgl_multiple_views.html | 43 +-
examples/webgl_nearestneighbour.html | 9 +-
examples/webgl_octree.html | 9 +-
examples/webgl_octree_raycasting.html | 30 +-
examples/webgl_panorama_cube.html | 4 +-
examples/webgl_panorama_dualfisheye.html | 15 +-
examples/webgl_panorama_equirectangular.html | 14 +-
examples/webgl_performance.html | 2 +-
examples/webgl_performance_doublesided.html | 16 +-
examples/webgl_performance_static.html | 4 +-
examples/webgl_physics_cloth.html | 105 +--
examples/webgl_physics_rope.html | 85 ++-
examples/webgl_physics_terrain.html | 671 +++++++++---------
examples/webgl_physics_volume.html | 91 ++-
examples/webgl_points_billboards.html | 3 +-
examples/webgl_points_dynamic.html | 62 +-
examples/webgl_points_sprites.html | 21 +-
examples/webgl_postprocessing_advanced.html | 46 +-
examples/webgl_postprocessing_afterimage.html | 8 +-
.../webgl_postprocessing_backgrounds.html | 44 +-
examples/webgl_postprocessing_crossfade.html | 10 +-
examples/webgl_postprocessing_dof.html | 73 +-
examples/webgl_postprocessing_dof2.html | 62 +-
examples/webgl_postprocessing_fxaa.html | 9 +-
examples/webgl_postprocessing_glitch.html | 10 +-
examples/webgl_postprocessing_godrays.html | 30 +-
examples/webgl_postprocessing_outline.html | 4 +-
examples/webgl_postprocessing_procedural.html | 23 +-
.../webgl_postprocessing_rgb_halftone.html | 18 +-
examples/webgl_postprocessing_sao.html | 36 +-
examples/webgl_postprocessing_smaa.html | 4 +-
examples/webgl_postprocessing_sobel.html | 2 +-
examples/webgl_postprocessing_ssaa.html | 4 +-
.../webgl_postprocessing_ssaa_unbiased.html | 22 +-
examples/webgl_postprocessing_ssao.html | 30 +-
examples/webgl_postprocessing_taa.html | 27 +-
examples/webgl_raycast_texture.html | 10 +-
examples/webgl_raymarching_reflect.html | 2 +
examples/webgl_rtt.html | 18 +-
examples/webgl_sandbox.html | 16 +-
examples/webgl_shader.html | 7 +-
examples/webgl_shader2.html | 10 +-
examples/webgl_shader_lava.html | 7 +-
examples/webgl_shaders_ocean.html | 6 +-
examples/webgl_shaders_ocean2.html | 11 +-
examples/webgl_shaders_sky.html | 7 +-
examples/webgl_shaders_tonemapping.html | 126 ++--
examples/webgl_shaders_vector.html | 20 +-
examples/webgl_shading_physical.html | 56 +-
examples/webgl_shadowmap.html | 29 +-
examples/webgl_shadowmap_performance.html | 34 +-
examples/webgl_shadowmap_pointlight.html | 2 +-
examples/webgl_shadowmap_viewer.html | 7 +-
examples/webgl_shadowmesh.html | 10 +-
examples/webgl_simple_gi.html | 12 +-
examples/webgl_sprites.html | 12 +-
examples/webgl_sprites_nodes.html | 2 +-
examples/webgl_terrain_dynamic.html | 55 +-
examples/webgl_test_memory2.html | 10 -
examples/webgl_tiled_forward.html | 10 +-
examples/webgl_tonemapping.html | 28 +-
examples/webgl_trails.html | 2 +-
.../webgl_video_panorama_equirectangular.html | 27 +-
examples/webgl_water.html | 20 +-
examples/webgl_water_flowmap.html | 14 +-
examples/webgl_worker_offscreencanvas.html | 4 +-
120 files changed, 1704 insertions(+), 1659 deletions(-)
diff --git a/examples/webgl_marchingcubes.html b/examples/webgl_marchingcubes.html
index 60e0a920f1889f..ad42ea9a2fae85 100644
--- a/examples/webgl_marchingcubes.html
+++ b/examples/webgl_marchingcubes.html
@@ -94,18 +94,16 @@
var camera, scene, renderer;
- var mesh, texture, geometry, materials, material, current_material;
+ var materials, current_material;
var light, pointLight, ambientLight;
- var effect, resolution, numBlobs;
+ var effect, resolution;
var composer, effectFXAA, hblur, vblur;
var effectController;
- var controls;
-
var time = 0;
var clock = new THREE.Clock();
@@ -119,7 +117,7 @@
// CAMERA
camera = new THREE.PerspectiveCamera( 45, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
- camera.position.set( -500, 500, 1500 );
+ camera.position.set( - 500, 500, 1500 );
// SCENE
@@ -147,7 +145,6 @@
// MARCHING CUBES
resolution = 28;
- numBlobs = 10;
effect = new THREE.MarchingCubes( resolution, materials[ current_material ].m, true, true );
effect.position.set( 0, 0, 0 );
@@ -177,7 +174,7 @@
// CONTROLS
- controls = new THREE.OrbitControls( camera, renderer.domElement );
+ var controls = new THREE.OrbitControls( camera, renderer.domElement );
// STATS
@@ -231,7 +228,7 @@
//
- function onWindowResize( event ) {
+ function onWindowResize() {
SCREEN_WIDTH = window.innerWidth;
SCREEN_HEIGHT = window.innerHeight - 2 * MARGIN;
@@ -273,11 +270,11 @@
// toons
var toonMaterial1 = createShaderMaterial( "toon1", light, ambientLight ),
- toonMaterial2 = createShaderMaterial( "toon2", light, ambientLight ),
- hatchingMaterial = createShaderMaterial( "hatching", light, ambientLight ),
- hatchingMaterial2 = createShaderMaterial( "hatching", light, ambientLight ),
- dottedMaterial = createShaderMaterial( "dotted", light, ambientLight ),
- dottedMaterial2 = createShaderMaterial( "dotted", light, ambientLight );
+ toonMaterial2 = createShaderMaterial( "toon2", light, ambientLight ),
+ hatchingMaterial = createShaderMaterial( "hatching", light, ambientLight ),
+ hatchingMaterial2 = createShaderMaterial( "hatching", light, ambientLight ),
+ dottedMaterial = createShaderMaterial( "dotted", light, ambientLight ),
+ dottedMaterial2 = createShaderMaterial( "dotted", light, ambientLight );
hatchingMaterial2.uniforms.uBaseColor.value.setRGB( 0, 0, 0 );
hatchingMaterial2.uniforms.uLineColor1.value.setHSL( 0, 0.8, 0.5 );
@@ -293,85 +290,85 @@
var materials = {
- "chrome" :
+ "chrome":
{
m: new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: reflectionCube } ),
h: 0, s: 0, l: 1
},
- "liquid" :
+ "liquid":
{
m: new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: refractionCube, refractionRatio: 0.85 } ),
h: 0, s: 0, l: 1
},
- "shiny" :
+ "shiny":
{
m: new THREE.MeshStandardMaterial( { color: 0x550000, envMap: reflectionCube, roughness: 0.1, metalness: 1.0 } ),
h: 0, s: 0.8, l: 0.2
},
- "matte" :
+ "matte":
{
m: new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x111111, shininess: 1 } ),
h: 0, s: 0, l: 1
},
- "flat" :
+ "flat":
{
m: new THREE.MeshLambertMaterial( { color: 0x000000, flatShading: true } ),
h: 0, s: 0, l: 1
},
- "textured" :
+ "textured":
{
m: new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess: 1, map: texture } ),
h: 0, s: 0, l: 1
},
- "colors" :
+ "colors":
{
m: new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0xffffff, shininess: 2, vertexColors: THREE.VertexColors } ),
h: 0, s: 0, l: 1
},
- "plastic" :
+ "plastic":
{
m: new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x888888, shininess: 250 } ),
h: 0.6, s: 0.8, l: 0.1
},
- "toon1" :
+ "toon1":
{
m: toonMaterial1,
h: 0.2, s: 1, l: 0.75
},
- "toon2" :
+ "toon2":
{
m: toonMaterial2,
h: 0.4, s: 1, l: 0.75
},
- "hatching" :
+ "hatching":
{
m: hatchingMaterial,
h: 0.2, s: 1, l: 0.9
},
- "hatching2" :
+ "hatching2":
{
m: hatchingMaterial2,
h: 0.0, s: 0.8, l: 0.5
},
- "dotted" :
+ "dotted":
{
m: dottedMaterial,
h: 0.2, s: 1, l: 0.9
},
- "dotted2" :
+ "dotted2":
{
m: dottedMaterial2,
h: 0.1, s: 1, l: 0.5
@@ -407,9 +404,9 @@
function setupGui() {
- var createHandler = function( id ) {
+ var createHandler = function ( id ) {
- return function() {
+ return function () {
var mat_old = materials[ current_material ];
mat_old.h = m_h.getValue();
@@ -425,8 +422,8 @@
m_s.setValue( mat.s );
m_l.setValue( mat.l );
- effect.enableUvs = (current_material === "textured") ? true : false;
- effect.enableColors = (current_material === "colors") ? true : false;
+ effect.enableUvs = ( current_material === "textured" ) ? true : false;
+ effect.enableColors = ( current_material === "colors" ) ? true : false;
};
@@ -434,33 +431,32 @@
effectController = {
- material: "shiny",
+ material: "shiny",
- speed: 1.0,
- numBlobs: 10,
- resolution: 28,
- isolation: 80,
+ speed: 1.0,
+ numBlobs: 10,
+ resolution: 28,
+ isolation: 80,
- floor: true,
- wallx: false,
- wallz: false,
+ floor: true,
+ wallx: false,
+ wallz: false,
- hue: 0.0,
- saturation: 0.8,
- lightness: 0.1,
+ hue: 0.0,
+ saturation: 0.8,
+ lightness: 0.1,
- lhue: 0.04,
- lsaturation: 1.0,
- llightness: 0.5,
+ lhue: 0.04,
+ lsaturation: 1.0,
+ llightness: 0.5,
- lx: 0.5,
- ly: 0.5,
- lz: 1.0,
+ lx: 0.5,
+ ly: 0.5,
+ lz: 1.0,
- postprocessing: false,
+ postprocessing: false,
- dummy: function() {
- }
+ dummy: function () {}
};
@@ -491,17 +487,17 @@
h = gui.addFolder( "Point light color" );
- h.add( effectController, "lhue", 0.0, 1.0, 0.025 ).name("hue");
- h.add( effectController, "lsaturation", 0.0, 1.0, 0.025 ).name("saturation");
- h.add( effectController, "llightness", 0.0, 1.0, 0.025 ).name("lightness");
+ h.add( effectController, "lhue", 0.0, 1.0, 0.025 ).name( "hue" );
+ h.add( effectController, "lsaturation", 0.0, 1.0, 0.025 ).name( "saturation" );
+ h.add( effectController, "llightness", 0.0, 1.0, 0.025 ).name( "lightness" );
// light (directional)
h = gui.addFolder( "Directional light orientation" );
- h.add( effectController, "lx", -1.0, 1.0, 0.025 ).name("x");
- h.add( effectController, "ly", -1.0, 1.0, 0.025 ).name("y");
- h.add( effectController, "lz", -1.0, 1.0, 0.025 ).name("z");
+ h.add( effectController, "lx", - 1.0, 1.0, 0.025 ).name( "x" );
+ h.add( effectController, "ly", - 1.0, 1.0, 0.025 ).name( "y" );
+ h.add( effectController, "lz", - 1.0, 1.0, 0.025 ).name( "z" );
// simulation
@@ -542,7 +538,7 @@
bally = Math.abs( Math.cos( i + 1.12 * time * Math.cos( 1.22 + 0.1424 * i ) ) ) * 0.77; // dip into the floor
ballz = Math.cos( i + 1.32 * time * 0.1 * Math.sin( ( 0.92 + 0.53 * i ) ) ) * 0.27 + 0.5;
- object.addBall(ballx, bally, ballz, strength, subtract);
+ object.addBall( ballx, bally, ballz, strength, subtract );
}
@@ -554,7 +550,6 @@
//
-
function animate() {
requestAnimationFrame( animate );
diff --git a/examples/webgl_materials_blending.html b/examples/webgl_materials_blending.html
index 58471e820e2019..62cf1344e12554 100644
--- a/examples/webgl_materials_blending.html
+++ b/examples/webgl_materials_blending.html
@@ -26,7 +26,7 @@
}
var camera, scene, renderer;
- var mesh, mapBg;
+ var mapBg;
var textureLoader = new THREE.TextureLoader();
@@ -73,7 +73,7 @@
var materialBg = new THREE.MeshBasicMaterial( { map: mapBg } );
var meshBg = new THREE.Mesh( new THREE.PlaneBufferGeometry( 4000, 2000 ), materialBg );
- meshBg.position.set( 0, 0, -1 );
+ meshBg.position.set( 0, 0, - 1 );
scene.add( meshBg );
// OBJECTS
@@ -92,8 +92,8 @@
addImageRow( map0, 300 );
addImageRow( map1, 150 );
addImageRow( map2, 0 );
- addImageRow( map3, -150 );
- addImageRow( map4, -300 );
+ addImageRow( map3, - 150 );
+ addImageRow( map4, - 300 );
function addImageRow( map, y ) {
@@ -136,7 +136,7 @@
//
- function onWindowResize( event ) {
+ function onWindowResize() {
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
@@ -176,8 +176,8 @@
requestAnimationFrame( animate );
var time = Date.now() * 0.00025;
- var ox = ( time * -0.01 * mapBg.repeat.x ) % 1;
- var oy = ( time * -0.01 * mapBg.repeat.y ) % 1;
+ var ox = ( time * - 0.01 * mapBg.repeat.x ) % 1;
+ var oy = ( time * - 0.01 * mapBg.repeat.y ) % 1;
mapBg.offset.set( ox, oy );
diff --git a/examples/webgl_materials_blending_custom.html b/examples/webgl_materials_blending_custom.html
index 716d90f0de4f0d..5a74145041f310 100644
--- a/examples/webgl_materials_blending_custom.html
+++ b/examples/webgl_materials_blending_custom.html
@@ -183,7 +183,7 @@
materialBg = new THREE.MeshBasicMaterial( { map: mapBg1 } );
var meshBg = new THREE.Mesh( new THREE.PlaneBufferGeometry( 4000, 2000 ), materialBg );
- meshBg.position.set( 0, 0, -1 );
+ meshBg.position.set( 0, 0, - 1 );
scene.add( meshBg );
// FOREGROUND IMAGES
@@ -238,7 +238,7 @@
var y = ( i - dst.length / 2 ) * 110 + 50;
var mesh = new THREE.Mesh( geo1, material );
- mesh.position.set( x, -y, z );
+ mesh.position.set( x, - y, z );
mesh.matrixAutoUpdate = false;
mesh.updateMatrix();
scene.add( mesh );
@@ -258,7 +258,7 @@
var y = ( 0 - dst.length / 2 ) * 110 + 50;
var mesh = new THREE.Mesh( geo2, generateLabelMaterial( blendSrc.replace( 'Factor', '' ), 'rgba( 0, 150, 0, 1 )' ) );
- mesh.position.set( x, - (y - 70), z );
+ mesh.position.set( x, - ( y - 70 ), z );
mesh.matrixAutoUpdate = false;
mesh.updateMatrix();
scene.add( mesh );
@@ -274,7 +274,7 @@
var y = ( i - dst.length / 2 ) * 110 + 165;
var mesh = new THREE.Mesh( geo2, generateLabelMaterial( blendDst.replace( 'Factor', '' ), 'rgba( 150, 0, 0, 1 )' ) );
- mesh.position.set( x, - (y - 120), z );
+ mesh.position.set( x, - ( y - 120 ), z );
mesh.matrixAutoUpdate = false;
mesh.updateMatrix();
scene.add( mesh );
@@ -363,14 +363,18 @@
el.style.backgroundColor = 'darkorange';
- });
+ } );
}
function addBgHandler( id, map ) {
var el = document.getElementById( id );
- el.addEventListener( 'click', function () { materialBg.map = map; } );
+ el.addEventListener( 'click', function () {
+
+ materialBg.map = map;
+
+ } );
}
@@ -398,7 +402,7 @@
//
- function onWindowResize( event ) {
+ function onWindowResize() {
renderer.setSize( window.innerWidth, window.innerHeight );
@@ -435,8 +439,8 @@
requestAnimationFrame( animate );
var time = Date.now() * 0.00025;
- var ox = ( time * -0.01 * materialBg.map.repeat.x ) % 1;
- var oy = ( time * -0.01 * materialBg.map.repeat.y ) % 1;
+ var ox = ( time * - 0.01 * materialBg.map.repeat.x ) % 1;
+ var oy = ( time * - 0.01 * materialBg.map.repeat.y ) % 1;
materialBg.map.offset.set( ox, oy );
diff --git a/examples/webgl_materials_bumpmap.html b/examples/webgl_materials_bumpmap.html
index 694e7b57f7eca4..f023b4c73f651e 100644
--- a/examples/webgl_materials_bumpmap.html
+++ b/examples/webgl_materials_bumpmap.html
@@ -111,7 +111,7 @@
spotLight.shadow.camera.fov = 40;
- spotLight.shadow.bias = -0.005;
+ spotLight.shadow.bias = - 0.005;
//
@@ -126,7 +126,11 @@
} );
loader = new THREE.GLTFLoader();
- loader.load( "models/gltf/LeePerrySmith/LeePerrySmith.glb", function( gltf ) { createScene( gltf.scene.children[ 0 ].geometry, 100, material ) } );
+ loader.load( "models/gltf/LeePerrySmith/LeePerrySmith.glb", function ( gltf ) {
+
+ createScene( gltf.scene.children[ 0 ].geometry, 100, material );
+
+ } );
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
@@ -172,7 +176,7 @@
//
- function onWindowResize( event ) {
+ function onWindowResize() {
renderer.setSize( window.innerWidth, window.innerHeight );
diff --git a/examples/webgl_materials_bumpmap_skin.html b/examples/webgl_materials_bumpmap_skin.html
index cab5d7d0624411..bea103fd6d55fc 100644
--- a/examples/webgl_materials_bumpmap_skin.html
+++ b/examples/webgl_materials_bumpmap_skin.html
@@ -70,7 +70,7 @@
var camera, scene, renderer;
- var mesh, mesh2;
+ var mesh;
var directionalLight;
@@ -79,15 +79,12 @@
var targetX = 0, targetY = 0;
-
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
- var mapColor, mapHeight, mapSpecular;
-
var firstPass = true;
- var composer, composerBeckmann;
+ var composerBeckmann;
init();
animate();
@@ -120,12 +117,12 @@
directionalLight.shadow.camera.near = 200;
directionalLight.shadow.camera.far = 1500;
- directionalLight.shadow.camera.left = -500;
+ directionalLight.shadow.camera.left = - 500;
directionalLight.shadow.camera.right = 500;
directionalLight.shadow.camera.top = 500;
- directionalLight.shadow.camera.bottom = -500;
+ directionalLight.shadow.camera.bottom = - 500;
- directionalLight.shadow.bias = -0.005;
+ directionalLight.shadow.bias = - 0.005;
scene.add( directionalLight );
@@ -134,7 +131,7 @@
loader = new THREE.GLTFLoader();
loader.load( "models/gltf/LeePerrySmith/LeePerrySmith.glb", function ( gltf ) {
- createScene( gltf.scene.children[ 0 ].geometry, 100 )
+ createScene( gltf.scene.children[ 0 ].geometry, 100 );
} );
@@ -252,7 +249,7 @@
//
- function onWindowResize( event ) {
+ function onWindowResize() {
renderer.setSize( window.innerWidth, window.innerHeight );
diff --git a/examples/webgl_materials_channels.html b/examples/webgl_materials_channels.html
index d682e9262f715d..913a2bcd151efa 100644
--- a/examples/webgl_materials_channels.html
+++ b/examples/webgl_materials_channels.html
@@ -59,7 +59,7 @@
var stats;
- var camera, scene, renderer, controls;
+ var camera, scene, renderer;
var params = {
material: 'normal',
@@ -78,8 +78,6 @@
var mesh, materialStandard, materialDepthBasic, materialDepthRGBA, materialNormal;
- var pointLight, ambientLight;
-
var height = 500; // of camera frustum
var SCALE = 2.436143; // from original model
@@ -96,6 +94,7 @@
gui.add( params, 'material', [ 'standard', 'normal', 'depthBasic', 'depthRGBA' ] );
gui.add( params, 'camera', [ 'perspective', 'ortho' ] );
gui.add( params, 'side', [ 'front', 'back', 'double' ] );
+
}
function init() {
diff --git a/examples/webgl_materials_compile.html b/examples/webgl_materials_compile.html
index f155129843db33..66e7fe9782b134 100644
--- a/examples/webgl_materials_compile.html
+++ b/examples/webgl_materials_compile.html
@@ -22,7 +22,7 @@
text-align: center;
display:block;
}
-
+
#waitScreen {
color: #000;
position: absolute;
@@ -33,7 +33,7 @@
width: 100px;
height: 100px;
}
-
+
.hide {
display:none;
}
@@ -69,21 +69,24 @@
var frame = new THREE.NodeFrame();
var teapot;
var controls;
- var move = false;
var rtTexture, rtMaterial;
var meshes = [];
-
- document.getElementById( "preload" ).addEventListener( 'click', function() {
+
+ document.getElementById( "preload" ).addEventListener( 'click', function () {
var hash = document.location.hash.substr( 1 );
if ( hash.length === 0 ) {
- window.location.hash = "#NoPreLoad"
+
+ window.location.hash = "#NoPreLoad";
+
} else {
- window.location.hash = ""
+
+ window.location.hash = "";
+
}
-
- location.reload(true);
+
+ location.reload( true );
}, false );
@@ -122,15 +125,16 @@
var itemsonrow = 10;
- for (var i = 0 ; i< itemsonrow * itemsonrow; i ++ ){
-
+ for ( var i = 0; i < itemsonrow * itemsonrow; i ++ ) {
+
var mesh = new THREE.Mesh( teapot );
-
- mesh.position.x = 50 *(i%itemsonrow) -50*itemsonrow/2;
- mesh.position.z = 50*Math.floor(i/itemsonrow)-150;
- updateMaterial(mesh);
+
+ mesh.position.x = 50 * ( i % itemsonrow ) - 50 * itemsonrow / 2;
+ mesh.position.z = 50 * Math.floor( i / itemsonrow ) - 150;
+ updateMaterial( mesh );
scene.add( mesh );
- meshes.push(mesh);
+ meshes.push( mesh );
+
}
window.addEventListener( 'resize', onWindowResize, false );
@@ -139,24 +143,22 @@
if ( hash.length === 0 ) {
- renderer.compile(scene,camera);
-
+ renderer.compile( scene, camera );
+
}
-
- document.getElementById("waitScreen").className = "hide";
-
- setTimeout(function() {
-
+
+ document.getElementById( "waitScreen" ).className = "hide";
+
+ setTimeout( function () {
+
onWindowResize();
animate();
-
- }, 1);
- }
+ }, 1 );
- function updateMaterial(mesh) {
+ }
- move = false;
+ function updateMaterial( mesh ) {
if ( mesh.material ) mesh.material.dispose();
@@ -205,9 +207,9 @@
mtl.color = new THREE.ColorNode( 0 );
mtl.emissive = cos;
-
-
- var transformer = new THREE.ExpressionNode( "position + 0.0 * " + Math.random(), "vec3", [ ]);
+
+
+ var transformer = new THREE.ExpressionNode( "position + 0.0 * " + Math.random(), "vec3", [ ] );
mtl.transform = transformer;
// build shader ( ignore auto build )
@@ -237,9 +239,9 @@
frame.update( delta );
- for (var i = 0; i < meshes.length; i++ ){
+ for ( var i = 0; i < meshes.length; i ++ ) {
- var mesh = meshes[i];
+ var mesh = meshes[ i ];
frame.updateNode( mesh.material );
diff --git a/examples/webgl_materials_cubemap.html b/examples/webgl_materials_cubemap.html
index d9763da1181d9e..cbc527557187d2 100644
--- a/examples/webgl_materials_cubemap.html
+++ b/examples/webgl_materials_cubemap.html
@@ -55,8 +55,6 @@
var camera, scene, renderer;
- var mesh, geometry;
-
var pointLight;
init();
@@ -81,10 +79,10 @@
var path = "textures/cube/SwedishRoyalCastle/";
var format = '.jpg';
var urls = [
- path + 'px' + format, path + 'nx' + format,
- path + 'py' + format, path + 'ny' + format,
- path + 'pz' + format, path + 'nz' + format
- ];
+ path + 'px' + format, path + 'nx' + format,
+ path + 'py' + format, path + 'ny' + format,
+ path + 'pz' + format, path + 'nz' + format
+ ];
var reflectionCube = new THREE.CubeTextureLoader().load( urls );
reflectionCube.format = THREE.RGBFormat;
@@ -114,10 +112,10 @@
objLoader.setPath( 'models/obj/walt/' );
objLoader.load( 'WaltHead.obj', function ( object ) {
- var head = object.children[0];
+ var head = object.children[ 0 ];
head.scale.multiplyScalar( 15 );
- head.position.y = -500;
+ head.position.y = - 500;
head.material = cubeMaterial1;
var head2 = head.clone();
@@ -159,6 +157,7 @@
requestAnimationFrame( animate );
render();
+
}
function render() {
diff --git a/examples/webgl_materials_cubemap_balls_reflection.html b/examples/webgl_materials_cubemap_balls_reflection.html
index afc4d15128ea49..8ebc7432254876 100644
--- a/examples/webgl_materials_cubemap_balls_reflection.html
+++ b/examples/webgl_materials_cubemap_balls_reflection.html
@@ -24,9 +24,7 @@
z-index:1000;
}
- a {
- color: #ffffff;
- }
+ a { color: #ffffff; }
#webglmessage a { color:#da0 }
@@ -51,11 +49,8 @@
var camera, scene, renderer;
- var mesh, lightMesh, geometry;
var spheres = [];
- var directionalLight, pointLight;
-
var mouseX = 0;
var mouseY = 0;
diff --git a/examples/webgl_materials_cubemap_balls_refraction.html b/examples/webgl_materials_cubemap_balls_refraction.html
index 0cf45643ec815e..3c8e1849703377 100644
--- a/examples/webgl_materials_cubemap_balls_refraction.html
+++ b/examples/webgl_materials_cubemap_balls_refraction.html
@@ -24,9 +24,7 @@
z-index:1000;
}
- a {
- color: #ffffff;
- }
+ a { color: #ffffff; }
#webglmessage a { color:#da0 }
@@ -51,11 +49,8 @@
var camera, scene, renderer;
- var mesh, lightMesh, geometry;
var spheres = [];
- var directionalLight, pointLight;
-
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
@@ -125,7 +120,7 @@
}
- function onDocumentMouseMove(event) {
+ function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX ) * 10;
mouseY = ( event.clientY - windowHalfY ) * 10;
diff --git a/examples/webgl_materials_cubemap_dynamic.html b/examples/webgl_materials_cubemap_dynamic.html
index 41d1ee0e6b88b8..7620edf3496365 100644
--- a/examples/webgl_materials_cubemap_dynamic.html
+++ b/examples/webgl_materials_cubemap_dynamic.html
@@ -40,6 +40,8 @@
var count = 0, cubeCamera1, cubeCamera2;
+ var onPointerDownPointerX, onPointerDownPointerY, onPointerDownLon, onPointerDownLat;
+
var lon = 0, lat = 0;
var phi = 0, theta = 0;
@@ -102,7 +104,7 @@
}
- function onWindowResized( event ) {
+ function onWindowResized() {
renderer.setSize( window.innerWidth, window.innerHeight );
@@ -133,7 +135,7 @@
}
- function onDocumentMouseUp( event ) {
+ function onDocumentMouseUp() {
document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
diff --git a/examples/webgl_materials_cubemap_refraction.html b/examples/webgl_materials_cubemap_refraction.html
index 29dce92455461e..11197cf9e430c1 100644
--- a/examples/webgl_materials_cubemap_refraction.html
+++ b/examples/webgl_materials_cubemap_refraction.html
@@ -19,8 +19,18 @@
canvas { pointer-events:none; z-index:10; }
- #d { text-align:center; margin:1em auto -9.5em; z-index:200; position:relative; display:block;
- background:rgba(0,0,0,0.5); padding:0.5em; width:400px; border-radius:15px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.5) }
+ #d {
+ text-align:center;
+ margin:1em auto -9.5em;
+ z-index:200;
+ position:relative;
+ display:block;
+ background:rgba(0,0,0,0.5);
+ padding:0.5em; width:400px;
+ border-radius:15px;
+ -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
+ box-shadow: 0px 0px 10px rgba(0,0,0,0.5)
+ }
#webglmessage { margin-top:15em !important }
@@ -49,17 +59,11 @@
}
- var FLOOR = -250;
-
var container, stats;
var camera, scene, renderer;
- var mesh, zmesh, geometry;
-
- var loader;
-
- var directionalLight, pointLight;
+ var pointLight;
var mouseX = 0, mouseY = 0;
@@ -71,11 +75,11 @@
function init() {
- container = document.createElement('div');
- document.body.appendChild(container);
+ container = document.createElement( 'div' );
+ document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 100000 );
- camera.position.z = - 4000;
+ camera.position.z = - 4000;
//
@@ -125,10 +129,14 @@
stats = new Stats();
container.appendChild( stats.dom );
- loader = new THREE.PLYLoader();
- loader.load( 'models/ply/binary/Lucy100k.ply', function( geometry ) { createScene( geometry, cubeMaterial1, cubeMaterial2, cubeMaterial3 ) } );
+ var loader = new THREE.PLYLoader();
+ loader.load( 'models/ply/binary/Lucy100k.ply', function ( geometry ) {
+
+ createScene( geometry, cubeMaterial1, cubeMaterial2, cubeMaterial3 );
+
+ } );
- document.addEventListener('mousemove', onDocumentMouseMove, false);
+ document.addEventListener( 'mousemove', onDocumentMouseMove, false );
//
@@ -170,7 +178,7 @@
}
- function onDocumentMouseMove(event) {
+ function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX ) * 4;
mouseY = ( event.clientY - windowHalfY ) * 4;
@@ -190,7 +198,7 @@
function render() {
- var timer = -0.0002 * Date.now();
+ var timer = - 0.0002 * Date.now();
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
diff --git a/examples/webgl_materials_curvature.html b/examples/webgl_materials_curvature.html
index 169763101e4d0d..ed7a6b038db6fd 100644
--- a/examples/webgl_materials_curvature.html
+++ b/examples/webgl_materials_curvature.html
@@ -23,10 +23,7 @@
padding: 5px;
}
- a {
-
- color: #ffffff;
- }
+ a { color: #ffffff; }
#webglmessage a { color:#da0 }
@@ -79,12 +76,8 @@
}
- var container;
-
var camera, scene, renderer;
- var controls;
-
var ninjaMeshRaw, curvatureAttribute, bufferGeo;
init();
@@ -96,12 +89,12 @@
var sum = 0;
var length = 0;
- Object.keys( dict ).forEach( function( key ) {
+ Object.keys( dict ).forEach( function ( key ) {
sum += dict[ key ];
length ++;
- });
+ } );
return sum / length;
@@ -110,16 +103,16 @@
//clamp a number between min and max
function clamp( number, min, max ) {
- return Math.max( min, Math.min( number, max ) );
+ return Math.max( min, Math.min( number, max ) );
}
//filter the curvature array to only show concave values
function filterConcave( curvature ) {
- for ( var i = 0; i < curvature.length; i++ ) {
+ for ( var i = 0; i < curvature.length; i ++ ) {
- curvature[ i ] = Math.abs( clamp( curvature[ i ], -1, 0 ) );
+ curvature[ i ] = Math.abs( clamp( curvature[ i ], - 1, 0 ) );
}
@@ -128,7 +121,7 @@
//filter the curvature array to only show convex values
function filterConvex( curvature ) {
- for ( var i = 0; i < curvature.length; i++ ) {
+ for ( var i = 0; i < curvature.length; i ++ ) {
curvature[ i ] = clamp( curvature[ i ], 0, 1 );
@@ -139,7 +132,7 @@
//filter the curvature array to show both the concave and convex values
function filterBoth( curvature ) {
- for ( var i = 0; i < curvature.length; i++ ) {
+ for ( var i = 0; i < curvature.length; i ++ ) {
curvature[ i ] = Math.abs( curvature[ i ] );
@@ -154,11 +147,11 @@
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
- camera.position.x = -23;
+ camera.position.x = - 23;
camera.position.y = 2;
camera.position.z = 24;
- controls = new THREE.OrbitControls( camera );
+ var controls = new THREE.OrbitControls( camera );
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
@@ -169,25 +162,28 @@
var loader = new THREE.OBJLoader();
//load the obj
loader.load( 'models/obj/ninja/ninjaHead_Low.obj', function ( object ) {
+
object.traverse( function ( child ) {
+
if ( child.isMesh ) {
bufferGeo = child.geometry;
bufferGeo.center();
- var dict= {};
+ var dict = {};
+
+ for ( var i = 0; i < bufferGeo.attributes.position.count; i += 3 ) {
- for ( var i = 0; i < bufferGeo.attributes.position.count; i+=3 ) {
//create a dictionary of every position, and its neighboring positions
var array = bufferGeo.attributes.position.array;
var normArray = bufferGeo.attributes.normal.array;
- var posA = new THREE.Vector3(array[ 3 * i ], array[ 3 * i + 1 ], array[ 3 * i + 2 ]);
- var posB = new THREE.Vector3(array[ 3 * ( i + 1 ) ], array[ 3 * ( i + 1 ) + 1 ], array[ 3 * ( i + 1 ) + 2 ]);
- var posC = new THREE.Vector3(array[ 3 * ( i + 2 ) ], array[ 3 * ( i + 2 ) + 1 ], array[ 3 * ( i + 2 ) + 2 ]);
+ var posA = new THREE.Vector3( array[ 3 * i ], array[ 3 * i + 1 ], array[ 3 * i + 2 ] );
+ var posB = new THREE.Vector3( array[ 3 * ( i + 1 ) ], array[ 3 * ( i + 1 ) + 1 ], array[ 3 * ( i + 1 ) + 2 ] );
+ var posC = new THREE.Vector3( array[ 3 * ( i + 2 ) ], array[ 3 * ( i + 2 ) + 1 ], array[ 3 * ( i + 2 ) + 2 ] );
- var normA = new THREE.Vector3(normArray[ 3 * i ], normArray[ 3 * i + 1 ], normArray[ 3 * i + 2 ]).normalize();
- var normB = new THREE.Vector3(normArray[ 3 * ( i + 1 ) ], normArray[ 3 * ( i + 1 ) + 1 ], normArray[ 3 * ( i + 1 ) + 2 ]).normalize();
- var normC = new THREE.Vector3(normArray[ 3 * ( i + 2 ) ], normArray[ 3 * ( i + 2 ) + 1 ], normArray[ 3 * ( i + 2 ) + 2 ]).normalize();
+ var normA = new THREE.Vector3( normArray[ 3 * i ], normArray[ 3 * i + 1 ], normArray[ 3 * i + 2 ] ).normalize();
+ var normB = new THREE.Vector3( normArray[ 3 * ( i + 1 ) ], normArray[ 3 * ( i + 1 ) + 1 ], normArray[ 3 * ( i + 1 ) + 2 ] ).normalize();
+ var normC = new THREE.Vector3( normArray[ 3 * ( i + 2 ) ], normArray[ 3 * ( i + 2 ) + 1 ], normArray[ 3 * ( i + 2 ) + 2 ] ).normalize();
var strA = posA.toArray().toString();
var strB = posB.toArray().toString();
@@ -201,18 +197,24 @@
var b2c = normB.dot( posB_C.normalize() );
var c2a = normC.dot( posC_A.normalize() );
- var a2b = -normA.dot( posB_A.normalize() );
- var c2b = -normC.dot( posB_C.normalize() );
- var a2c = -normA.dot( posC_A.normalize() );
+ var a2b = - normA.dot( posB_A.normalize() );
+ var c2b = - normC.dot( posB_C.normalize() );
+ var a2c = - normA.dot( posC_A.normalize() );
+
+ if ( dict[ strA ] === undefined ) {
- if (dict[ strA ] === undefined ) {
dict[ strA ] = {};
+
}
- if (dict[ strB ] === undefined ) {
+ if ( dict[ strB ] === undefined ) {
+
dict[ strB ] = {};
+
}
- if (dict[ strC ] === undefined ) {
+ if ( dict[ strC ] === undefined ) {
+
dict[ strC ] = {};
+
}
dict[ strA ][ strB ] = a2b;
@@ -227,70 +229,75 @@
var curvatureDict = {};
var min = 10, max = 0;
- Object.keys( dict ).forEach( function( key ) {
+ Object.keys( dict ).forEach( function ( key ) {
curvatureDict[ key ] = average( dict[ key ] );
- });
+ } );
//smoothing
- var smoothCurvatureDict = Object.create(curvatureDict);
+ var smoothCurvatureDict = Object.create( curvatureDict );
- Object.keys( dict ).forEach( function( key ) {
+ Object.keys( dict ).forEach( function ( key ) {
var count = 0;
var sum = 0;
- Object.keys( dict[ key ] ).forEach( function( key2 ) {
+ Object.keys( dict[ key ] ).forEach( function ( key2 ) {
sum += smoothCurvatureDict[ key2 ];
count ++;
- });
- smoothCurvatureDict[key] = sum / count;
+ } );
+ smoothCurvatureDict[ key ] = sum / count;
- });
+ } );
curvatureDict = smoothCurvatureDict;
// fit values to 0 and 1
- Object.keys( curvatureDict ).forEach( function( key ) {
+ Object.keys( curvatureDict ).forEach( function ( key ) {
var val = Math.abs( curvatureDict[ key ] );
if ( val < min ) min = val;
if ( val > max ) max = val;
- });
+ } );
var range = ( max - min );
- Object.keys( curvatureDict ).forEach( function( key ) {
+ Object.keys( curvatureDict ).forEach( function ( key ) {
var val = Math.abs( curvatureDict[ key ] );
if ( curvatureDict[ key ] < 0 ) {
- curvatureDict[ key ] = (min - val) / range
+
+ curvatureDict[ key ] = ( min - val ) / range;
+
} else {
- curvatureDict[ key ] = (val - min) / range;
+
+ curvatureDict[ key ] = ( val - min ) / range;
+
}
- });
+ } );
curvatureAttribute = new Float32Array( bufferGeo.attributes.position.count );
- for ( var i = 0; i < bufferGeo.attributes.position.count; i++ ) {
+ for ( var i = 0; i < bufferGeo.attributes.position.count; i ++ ) {
array = bufferGeo.attributes.position.array;
var pos = new THREE.Vector3( array[ 3 * i ], array[ 3 * i + 1 ], array[ 3 * i + 2 ] );
var str = pos.toArray().toString();
- curvatureAttribute[i] = curvatureDict[ str ];
+ curvatureAttribute[ i ] = curvatureDict[ str ];
+
}
bufferGeo.addAttribute( 'curvature', new THREE.BufferAttribute( curvatureAttribute, 1 ) );
//starting filter is to show both concave and convex
var curvatureFiltered = new Float32Array( curvatureAttribute );
- filterBoth(curvatureFiltered);
+ filterBoth( curvatureFiltered );
- var materialRaw = new THREE.ShaderMaterial ({
+ var materialRaw = new THREE.ShaderMaterial( {
vertexShader: document.getElementById( 'vertexShaderRaw' ).textContent,
fragmentShader: document.getElementById( 'fragmentShaderRaw' ).textContent
@@ -300,6 +307,7 @@
ninjaMeshRaw = new THREE.Mesh( bufferGeo, materialRaw );
}
+
} );
scene.add( ninjaMeshRaw );
@@ -313,7 +321,7 @@
filterConvex: function () {
var curvatureFiltered = new Float32Array( curvatureAttribute );
- filterConvex(curvatureFiltered);
+ filterConvex( curvatureFiltered );
bufferGeo.attributes.curvature.array = curvatureFiltered;
bufferGeo.attributes.curvature.needsUpdate = true;
@@ -322,7 +330,7 @@
filterConcave: function () {
var curvatureFiltered = new Float32Array( curvatureAttribute );
- filterConcave(curvatureFiltered);
+ filterConcave( curvatureFiltered );
bufferGeo.attributes.curvature.array = curvatureFiltered;
bufferGeo.attributes.curvature.needsUpdate = true;
@@ -331,7 +339,7 @@
filterBoth: function () {
var curvatureFiltered = new Float32Array( curvatureAttribute );
- filterBoth(curvatureFiltered);
+ filterBoth( curvatureFiltered );
bufferGeo.attributes.curvature.array = curvatureFiltered;
bufferGeo.attributes.curvature.needsUpdate = true;
@@ -352,7 +360,7 @@
}
- function onWindowResize( event ) {
+ function onWindowResize() {
renderer.setSize( window.innerWidth, window.innerHeight );
camera.aspect = window.innerWidth / window.innerHeight;
@@ -370,7 +378,7 @@
function render() {
- renderer.render(scene, camera);
+ renderer.render( scene, camera );
}
diff --git a/examples/webgl_materials_displacementmap.html b/examples/webgl_materials_displacementmap.html
index b95030c23f49e4..2a3c8779074bde 100644
--- a/examples/webgl_materials_displacementmap.html
+++ b/examples/webgl_materials_displacementmap.html
@@ -74,12 +74,6 @@
var pointLight, ambientLight;
- var mouseX = 0;
- var mouseY = 0;
-
- var windowHalfX = window.innerWidth / 2;
- var windowHalfY = window.innerHeight / 2;
-
var height = 500; // of camera frustum
var r = 0.0;
@@ -93,43 +87,43 @@
var gui = new dat.GUI();
//var gui = gui.addFolder( "Material" );
- gui.add( settings, "metalness" ).min( 0 ).max( 1 ).onChange( function( value ) {
+ gui.add( settings, "metalness" ).min( 0 ).max( 1 ).onChange( function ( value ) {
material.metalness = value;
} );
- gui.add( settings, "roughness" ).min( 0 ).max( 1 ).onChange( function( value ) {
+ gui.add( settings, "roughness" ).min( 0 ).max( 1 ).onChange( function ( value ) {
material.roughness = value;
} );
- gui.add( settings, "aoMapIntensity" ).min( 0 ).max( 1 ).onChange( function( value ) {
+ gui.add( settings, "aoMapIntensity" ).min( 0 ).max( 1 ).onChange( function ( value ) {
material.aoMapIntensity = value;
} );
- gui.add( settings, "ambientIntensity" ).min( 0 ).max( 1 ).onChange( function( value ) {
+ gui.add( settings, "ambientIntensity" ).min( 0 ).max( 1 ).onChange( function ( value ) {
ambientLight.intensity = value;
} );
- gui.add( settings, "envMapIntensity" ).min( 0 ).max( 3 ).onChange( function( value ) {
+ gui.add( settings, "envMapIntensity" ).min( 0 ).max( 3 ).onChange( function ( value ) {
material.envMapIntensity = value;
} );
- gui.add( settings, "displacementScale" ).min( 0 ).max( 3.0 ).onChange( function( value ) {
+ gui.add( settings, "displacementScale" ).min( 0 ).max( 3.0 ).onChange( function ( value ) {
material.displacementScale = value;
} );
- gui.add( settings, "normalScale" ).min( - 1 ).max( 1 ).onChange( function( value ) {
+ gui.add( settings, "normalScale" ).min( - 1 ).max( 1 ).onChange( function ( value ) {
material.normalScale.set( 1, - 1 ).multiplyScalar( value );
@@ -185,10 +179,10 @@
var path = "textures/cube/SwedishRoyalCastle/";
var format = '.jpg';
var urls = [
- path + 'px' + format, path + 'nx' + format,
- path + 'py' + format, path + 'ny' + format,
- path + 'pz' + format, path + 'nz' + format
- ];
+ path + 'px' + format, path + 'nx' + format,
+ path + 'py' + format, path + 'ny' + format,
+ path + 'pz' + format, path + 'nz' + format
+ ];
var reflectionCube = new THREE.CubeTextureLoader().load( urls );
diff --git a/examples/webgl_materials_envmaps.html b/examples/webgl_materials_envmaps.html
index ecaa6f40a364b9..1972f2a32ce629 100644
--- a/examples/webgl_materials_envmaps.html
+++ b/examples/webgl_materials_envmaps.html
@@ -43,7 +43,6 @@
var textureEquirec, textureCube, textureSphere;
var cubeMesh, sphereMesh;
var sphereMaterial;
- var refract;
init();
animate();
@@ -141,21 +140,27 @@
var params = {
Cube: function () {
+
cubeMesh.material = cubeMaterial;
cubeMesh.visible = true;
sphereMaterial.envMap = textureCube;
sphereMaterial.needsUpdate = true;
+
},
Equirectangular: function () {
+
cubeMesh.material = equirectMaterial;
cubeMesh.visible = true;
sphereMaterial.envMap = textureEquirec;
sphereMaterial.needsUpdate = true;
+
},
Spherical: function () {
- cubeMesh.visible = false;
+
+ cubeMesh.visible = false;
sphereMaterial.envMap = textureSphere;
sphereMaterial.needsUpdate = true;
+
},
Refraction: false
};
@@ -164,7 +169,7 @@
gui.add( params, 'Cube' );
gui.add( params, 'Equirectangular' );
gui.add( params, 'Spherical' );
- gui.add( params, 'Refraction' ).onChange( function( value ) {
+ gui.add( params, 'Refraction' ).onChange( function ( value ) {
if ( value ) {
diff --git a/examples/webgl_materials_envmaps_hdr.html b/examples/webgl_materials_envmaps_hdr.html
index ef02f123dd6acf..a57a77c8150eb0 100644
--- a/examples/webgl_materials_envmaps_hdr.html
+++ b/examples/webgl_materials_envmaps_hdr.html
@@ -103,12 +103,14 @@
planeMesh1.rotation.x = - Math.PI * 0.5;
scene.add( planeMesh1 );
- var genCubeUrls = function( prefix, postfix ) {
+ var genCubeUrls = function ( prefix, postfix ) {
+
return [
prefix + 'px' + postfix, prefix + 'nx' + postfix,
prefix + 'py' + postfix, prefix + 'ny' + postfix,
prefix + 'pz' + postfix, prefix + 'nz' + postfix
];
+
};
var hdrUrls = genCubeUrls( './textures/cube/pisaHDR/', '.hdr' );
@@ -225,7 +227,7 @@
var newEnvMap = standardMaterial.envMap;
- switch( params.envMap ) {
+ switch ( params.envMap ) {
case 'LDR': newEnvMap = ldrCubeRenderTarget ? ldrCubeRenderTarget.texture : null; break;
case 'HDR': newEnvMap = hdrCubeRenderTarget ? hdrCubeRenderTarget.texture : null; break;
diff --git a/examples/webgl_materials_lightmap.html b/examples/webgl_materials_lightmap.html
index 293f8171edf659..f305d2395587db 100644
--- a/examples/webgl_materials_lightmap.html
+++ b/examples/webgl_materials_lightmap.html
@@ -13,7 +13,6 @@
font-family:georgia;
text-align:center;
}
- h1 { }
a { color:skyblue }
@@ -67,8 +66,6 @@
var container, stats;
var camera, scene, renderer;
- var clock = new THREE.Clock();
-
init();
animate();
@@ -97,7 +94,7 @@
var light = new THREE.DirectionalLight( 0xaabbff, 0.3 );
light.position.x = 300;
light.position.y = 250;
- light.position.z = -500;
+ light.position.z = - 500;
scene.add( light );
// SKYDOME
@@ -105,10 +102,10 @@
var vertexShader = document.getElementById( 'vertexShader' ).textContent;
var fragmentShader = document.getElementById( 'fragmentShader' ).textContent;
var uniforms = {
- topColor: { type: "c", value: new THREE.Color( 0x0077ff ) },
+ topColor: { type: "c", value: new THREE.Color( 0x0077ff ) },
bottomColor: { type: "c", value: new THREE.Color( 0xffffff ) },
- offset: { type: "f", value: 400 },
- exponent: { type: "f", value: 0.6 }
+ offset: { type: "f", value: 400 },
+ exponent: { type: "f", value: 0.6 }
};
uniforms.topColor.value.copy( light.color );
diff --git a/examples/webgl_materials_matcap.html b/examples/webgl_materials_matcap.html
index 188d573cd41479..df13ba209286dc 100644
--- a/examples/webgl_materials_matcap.html
+++ b/examples/webgl_materials_matcap.html
@@ -24,7 +24,7 @@
top: 10px;
width: 100%;
text-align: center;
- z-index: 0; // to not conflict with dat.gui
+ z-index: 0; /* to not conflict with dat.gui */
display:block;
}
@@ -58,9 +58,9 @@
var image;
var API = {
- color : 0xffffff,
- exposure : 1.0
- }
+ color: 0xffffff,
+ exposure: 1.0
+ };
init();
@@ -96,7 +96,7 @@
// matcap
var loader = new THREE.TextureLoader( manager );
- var matcap = loader.load( 'textures/matcaps/matcap-porcelain-white.jpg', function( texture ) {
+ var matcap = loader.load( 'textures/matcaps/matcap-porcelain-white.jpg', function () {
matcap.encoding = THREE.sRGBEncoding;
@@ -125,10 +125,18 @@
gui.addColor( API, 'color' )
.listen()
- .onChange( function() { mesh.material.color.set( API.color ); render(); } );
+ .onChange( function () {
+
+ mesh.material.color.set( API.color ); render();
+
+ } );
gui.add( API, 'exposure', 0, 2 )
- .onChange( function() { renderer.toneMappingExposure = API.exposure; render(); } )
+ .onChange( function () {
+
+ renderer.toneMappingExposure = API.exposure; render();
+
+ } );
gui.domElement.style.webkitUserSelect = 'none';
@@ -150,7 +158,7 @@
image.src = 'textures/matcaps/matcap-porcelain-white.jpg';
div.appendChild( image );
- window.addEventListener( 'resize', onWindowResize, false );
+ window.addEventListener( 'resize', onWindowResize, false );
}
diff --git a/examples/webgl_materials_modified.html b/examples/webgl_materials_modified.html
index 83679460f48f0f..c0cf2eeee571c6 100644
--- a/examples/webgl_materials_modified.html
+++ b/examples/webgl_materials_modified.html
@@ -14,9 +14,7 @@
overflow:hidden;
}
- a {
- color: #ffffff;
- }
+ a { color: #ffffff; }
#info {
position: absolute;
@@ -59,7 +57,6 @@
}
var camera, scene, renderer, stats;
- var controls;
var materialShader;
@@ -76,8 +73,6 @@
var material = new THREE.MeshNormalMaterial();
material.onBeforeCompile = function ( shader ) {
- // console.log( shader )
-
shader.uniforms.time = { value: 0 };
shader.vertexShader = 'uniform float time;\n' + shader.vertexShader;
@@ -98,7 +93,7 @@
};
var loader = new THREE.GLTFLoader();
- loader.load( 'models/gltf/LeePerrySmith/LeePerrySmith.glb', function( gltf ) {
+ loader.load( 'models/gltf/LeePerrySmith/LeePerrySmith.glb', function ( gltf ) {
var mesh = new THREE.Mesh( gltf.scene.children[ 0 ].geometry, material );
mesh.position.y = - 50;
@@ -112,7 +107,7 @@
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
- controls = new THREE.OrbitControls( camera, renderer.domElement );
+ var controls = new THREE.OrbitControls( camera, renderer.domElement );
//
@@ -127,7 +122,7 @@
//
- function onWindowResize( event ) {
+ function onWindowResize() {
var width = window.innerWidth;
var height = window.innerHeight;
diff --git a/examples/webgl_materials_nodes.html b/examples/webgl_materials_nodes.html
index 5ea98f0573179b..3e7303547cd9d0 100644
--- a/examples/webgl_materials_nodes.html
+++ b/examples/webgl_materials_nodes.html
@@ -1989,7 +1989,7 @@
mtl.position.keywords[ "speed" ] = speed;
// add global keyword ( variable or const )
- THREE.NodeLib.addKeyword( 'myCustomUv', function ( builder ) {
+ THREE.NodeLib.addKeyword( 'myCustomUv', function () {
return new THREE.ReflectNode();
@@ -2022,7 +2022,7 @@
keywordsexample.keywords[ "myAlpha" ] = new THREE.ConstNode( "float myAlpha .05" );
// add global keyword ( const only )
- THREE.NodeLib.addKeyword( 'myUV', function ( builder ) {
+ THREE.NodeLib.addKeyword( 'myUV', function () {
return new THREE.UVNode();
@@ -2290,7 +2290,7 @@
// GUI
- addGui( 'click to reset', false, function ( val ) {
+ addGui( 'click to reset', false, function () {
// render a single time
diff --git a/examples/webgl_materials_normalmap.html b/examples/webgl_materials_normalmap.html
index e8637d4a682e72..e2fd10dd2cf6ab 100644
--- a/examples/webgl_materials_normalmap.html
+++ b/examples/webgl_materials_normalmap.html
@@ -14,9 +14,7 @@
overflow:hidden;
}
- a {
- color: #ffffff;
- }
+ a { color: #ffffff; }
#info {
position: absolute;
@@ -36,7 +34,6 @@
#vt { display:none }
#vt, #vt a { color:orange; }
- .code { }
@@ -120,7 +117,7 @@
scene.add( pointLight );
directionalLight = new THREE.DirectionalLight( 0xffffff );
- directionalLight.position.set( 1, -0.5, -1 );
+ directionalLight.position.set( 1, - 0.5, - 1 );
scene.add( directionalLight );
var textureLoader = new THREE.TextureLoader();
@@ -136,7 +133,11 @@
} );
loader = new THREE.GLTFLoader();
- loader.load( "models/gltf/LeePerrySmith/LeePerrySmith.glb", function( gltf ) { createScene( gltf.scene.children[ 0 ].geometry, 100, material ) } );
+ loader.load( "models/gltf/LeePerrySmith/LeePerrySmith.glb", function ( gltf ) {
+
+ createScene( gltf.scene.children[ 0 ].geometry, 100, material );
+
+ } );
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
@@ -199,7 +200,7 @@
//
- function onWindowResize( event ) {
+ function onWindowResize() {
var width = window.innerWidth;
var height = window.innerHeight;
diff --git a/examples/webgl_materials_normalmap_object_space.html b/examples/webgl_materials_normalmap_object_space.html
index 8f71855d1a77ac..c9e929d3f14afc 100644
--- a/examples/webgl_materials_normalmap_object_space.html
+++ b/examples/webgl_materials_normalmap_object_space.html
@@ -53,9 +53,7 @@
}
- var mesh, renderer, scene, camera;
-
- var obj;
+ var renderer, scene, camera;
init();
@@ -127,7 +125,7 @@
} );
- window.addEventListener( 'resize', onWindowResize, false );
+ window.addEventListener( 'resize', onWindowResize, false );
}
diff --git a/examples/webgl_materials_parallaxmap.html b/examples/webgl_materials_parallaxmap.html
index c581db33524226..0e1bf8114a9be3 100644
--- a/examples/webgl_materials_parallaxmap.html
+++ b/examples/webgl_materials_parallaxmap.html
@@ -142,12 +142,12 @@
var uniforms = material.uniforms;
- uniforms[ 'parallaxScale' ].value = -1.0 * effectController.scale;
+ uniforms[ 'parallaxScale' ].value = - 1.0 * effectController.scale;
uniforms[ 'parallaxMinLayers' ].value = effectController.minLayers;
uniforms[ 'parallaxMaxLayers' ].value = effectController.maxLayers;
material.defines = {};
- material.defines[THREE.ParallaxShader.modes[effectController.mode]] = '';
+ material.defines[ THREE.ParallaxShader.modes[ effectController.mode ] ] = '';
material.needsUpdate = true;
}
@@ -188,7 +188,7 @@
renderer.render( scene, camera );
}
-
+