Full English, no more console warning

No more French.
Power-of-two warnings checked.
Default for the circle is now RepeatWrapping.

examples/webgl_texture_raycast.html

@@ -47,14 +47,14 @@
 			<div class="control">
 				WrapS : <select onchange="setwrapS(this)">
 					<option value="ClampToEdgeWrapping">ClampToEdgeWrapping</option>
-					<option value="RepeatWrapping">RepeatWrapping</option>
+					<option value="RepeatWrapping" selected>RepeatWrapping</option>
 					<option value="MirroredRepeatWrapping">MirroredRepeatWrapping</option>
 				</select>
 			</div>
 			<div class="control">
 				WrapT : <select onchange="setwrapT(this)">
 					<option value="ClampToEdgeWrapping">ClampToEdgeWrapping</option>
-					<option value="RepeatWrapping">RepeatWrapping</option>
+					<option value="RepeatWrapping" selected>RepeatWrapping</option>
 					<option value="MirroredRepeatWrapping">MirroredRepeatWrapping</option>
 				</select>
 			</div>
@@ -70,33 +70,34 @@
 		<script src="../build/three.min.js"></script>
 		<script>
 
-			CanvasTexture = function (parentTexture) {
+			CanvasTexture = function ( parentTexture ) {
 
-				this._canvas = document.createElement("canvas");
-				this._context2D = this._canvas.getContext("2d");
+				this._canvas = document.createElement( "canvas" );
+				this._canvas.width = this._canvas.height = 1024;
+				this._context2D = this._canvas.getContext( "2d" );
 
-				if (parentTexture) {
+				if ( parentTexture ) {
 
-					this._parentTexture.push(parentTexture);
+					this._parentTexture.push( parentTexture );
 					parentTexture.image = this._canvas;
 
 				}
 
 				var that = this;
-				this._background = document.createElement("img");
-				this._background.addEventListener("load", function (event) {
+				this._background = document.createElement( "img" );
+				this._background.addEventListener( "load", function ( event ) {
 
 					that._canvas.width = that._background.naturalWidth;
 					that._canvas.height = that._background.naturalHeight;
 
-					that._rayonviseur = Math.ceil(Math.min(that._canvas.width, that._canvas.height / 30));
-					that._exterieurCroix = Math.ceil(0.70710678 * that._rayonviseur);
-					that._interieurCroix = Math.ceil(that._exterieurCroix / 10);
-					that._epaisseurViseur = Math.ceil(that._exterieurCroix / 10);
+					that._crossRadius = Math.ceil( Math.min( that._canvas.width, that._canvas.height / 30 ) );
+					that._crossMax = Math.ceil( 0.70710678 * that._crossRadius );
+					that._crossMin = Math.ceil( that._crossMax / 10 );
+					that._crossThickness = Math.ceil( that._crossMax / 10 );
 
 					that._draw();
 
-				}, false);
+				}, false );
 				this._background.crossOrigin = '';
 				this._background.src = "textures/UV_Grid_Sm.jpg";
 
@@ -114,25 +115,25 @@
 				_xCross: 0,
 				_yCross: 0,
 
-				_rayonviseur: 57,
-				_exterieurCroix: 40,
-				_interieurCroix: 4,
-				_epaisseurViseur: 4,
+				_crossRadius: 57,
+				_crossMax: 40,
+				_crossMin: 4,
+				_crossThickness: 4,
 
 				_parentTexture: [],
 
-				addParent: function (parentTexture) {
+				addParent: function ( parentTexture ) {
 
-					if (this._parentTexture.indexOf(parentTexture) === -1) {
+					if ( this._parentTexture.indexOf( parentTexture ) === - 1 ) {
 
-						this._parentTexture.push(parentTexture);
+						this._parentTexture.push( parentTexture );
 						parentTexture.image = this._canvas;
 
 					}
 
 				},
 
-				setCrossPosition: function (x, y) {
+				setCrossPosition: function ( x, y ) {
 
 					this._xCross = x * this._canvas.width;
 					this._yCross = y * this._canvas.height;
@@ -143,36 +144,35 @@
 
 				_draw: function () {
 
-					if (!this._context2D) return;
+					if ( ! this._context2D ) return;
 
-					this._context2D.clearRect(0, 0, this._canvas.width, this._canvas.height)
+					this._context2D.clearRect( 0, 0, this._canvas.width, this._canvas.height )
 
 					// Background.
-					this._context2D.drawImage(this._background, 0, 0);
+					this._context2D.drawImage( this._background, 0, 0 );
 
 					// Yellow cross.
-					this._context2D.lineWidth = this._epaisseurViseur * 3;
+					this._context2D.lineWidth = this._crossThickness * 3;
 					this._context2D.strokeStyle = "#FFFF00";
 
 					this._context2D.beginPath();
-					this._context2D.moveTo(this._xCross - this._exterieurCroix - 2, this._yCross - this._exterieurCroix - 2);
-					this._context2D.lineTo(this._xCross - this._interieurCroix, this._yCross - this._interieurCroix);
+					this._context2D.moveTo( this._xCross - this._crossMax - 2, this._yCross - this._crossMax - 2 );
+					this._context2D.lineTo( this._xCross - this._crossMin, this._yCross - this._crossMin );
 
-					this._context2D.moveTo(this._xCross + this._interieurCroix, this._yCross + this._interieurCroix);
-					this._context2D.lineTo(this._xCross + this._exterieurCroix + 2, this._yCross + this._exterieurCroix + 2);
+					this._context2D.moveTo( this._xCross + this._crossMin, this._yCross + this._crossMin );
+					this._context2D.lineTo( this._xCross + this._crossMax + 2, this._yCross + this._crossMax + 2 );
 
-					this._context2D.moveTo(this._xCross - this._exterieurCroix - 2, this._yCross + this._exterieurCroix + 2);
-					this._context2D.lineTo(this._xCross - this._interieurCroix, this._yCross + this._interieurCroix);
+					this._context2D.moveTo( this._xCross - this._crossMax - 2, this._yCross + this._crossMax + 2 );
+					this._context2D.lineTo( this._xCross - this._crossMin, this._yCross + this._crossMin );
 
-					this._context2D.moveTo(this._xCross + this._interieurCroix, this._yCross - this._interieurCroix);
-					this._context2D.lineTo(this._xCross + this._exterieurCroix + 2, this._yCross - this._exterieurCroix - 2);
+					this._context2D.moveTo( this._xCross + this._crossMin, this._yCross - this._crossMin );
+					this._context2D.lineTo( this._xCross + this._crossMax + 2, this._yCross - this._crossMax - 2 );
 
 					this._context2D.stroke();
 
-					for (var i = 0; i < this._parentTexture.length; i++) {
-					
-						//this._parentTexture[i].image = this._canvas;
-						this._parentTexture[i].needsUpdate = true;
+					for ( var i = 0; i < this._parentTexture.length; i ++ ) {
+
+						this._parentTexture[ i ].needsUpdate = true;
 
 					}
 
@@ -200,87 +200,89 @@
 
 			init();
 			render();
-			
+
 			function init() {
 
-				container = document.getElementById("container");
+				container = document.getElementById( "container" );
 
 				scene = new THREE.Scene();
 
-				camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
-				camera.position.x = -30;
+				camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );
+				camera.position.x = - 30;
 				camera.position.y = 40;
 				camera.position.z = 50;
-				camera.lookAt(scene.position);
-			
+				camera.lookAt( scene.position );
+
 				renderer = new THREE.WebGLRenderer();
-				renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
-				renderer.setSize(width, height);
-				container.appendChild(renderer.domElement);
+				renderer.setClearColor( new THREE.Color( 0xEEEEEE, 1.0 ) );
+				renderer.setSize( width, height );
+				container.appendChild( renderer.domElement );
 
 				// A cube, in the middle.
-				cubeTexture = new THREE.Texture(undefined, THREE.UVMapping, THREE.RepeatWrapping, THREE.RepeatWrapping);
-				canvas = new CanvasTexture(cubeTexture);
-				var cubeMaterial = new THREE.MeshBasicMaterial({ map: cubeTexture });
-				var cubeGeometry = new THREE.BoxGeometry(20, 20, 20);
+				cubeTexture = new THREE.Texture( undefined, THREE.UVMapping, THREE.RepeatWrapping, THREE.RepeatWrapping );
+				canvas = new CanvasTexture( cubeTexture );
+				var cubeMaterial = new THREE.MeshBasicMaterial( { map: cubeTexture } );
+				var cubeGeometry = new THREE.BoxGeometry( 20, 20, 20 );
 				// Set a specific texture mapping.
 				var uvs;
-				for (var i = 0; i < cubeGeometry.faceVertexUvs[0].length; i++) {
+				for ( var i = 0; i < cubeGeometry.faceVertexUvs[ 0 ].length; i ++ ) {
 
-					uvs = cubeGeometry.faceVertexUvs[0][i];
-					for (var j = 0; j < 3; j++) {
+					uvs = cubeGeometry.faceVertexUvs[ 0 ][ i ];
+					for ( var j = 0; j < 3; j ++ ) {
 
-						if (uvs[j].x < 0.1) uvs[j].x = -1;
-						if (uvs[j].y < 0.1) uvs[j].y = -1;
+						if ( uvs[ j ].x < 0.1 ) uvs[ j ].x = - 1;
+						if ( uvs[ j ].y < 0.1 ) uvs[ j ].y = - 1;
 
 					}
 
 				}
-				var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
+				var cube = new THREE.Mesh( cubeGeometry, cubeMaterial );
 				cube.position.x = 4;
-				cube.position.y = -5;
+				cube.position.y = - 5;
 				cube.position.z = 0;
-				objects.push(cube);
-				scene.add(cube);
+				objects.push( cube );
+				scene.add( cube );
 
 				// A plane on the left.
-				planeTexture = new THREE.Texture(undefined, THREE.UVMapping, THREE.MirroredRepeatWrapping, THREE.MirroredRepeatWrapping);
-				canvas.addParent(planeTexture);
-				var planeMaterial = new THREE.MeshBasicMaterial({ map: planeTexture });
-				var planeGeometry = new THREE.PlaneBufferGeometry(25, 25, 1, 1);
+				planeTexture = new THREE.Texture( undefined, THREE.UVMapping, THREE.MirroredRepeatWrapping, THREE.MirroredRepeatWrapping );
+				canvas.addParent( planeTexture );
+				var planeMaterial = new THREE.MeshBasicMaterial( { map: planeTexture } );
+				var planeGeometry = new THREE.PlaneBufferGeometry( 25, 25, 1, 1 );
 				var uvs = planeGeometry.attributes.uv.array;
-				for (var i = 0; i < uvs.length; i++) {
+				// Set a specific texture mapping.
+				for ( var i = 0; i < uvs.length; i ++ ) {
 
-					uvs[i] *= 2;
+					uvs[ i ] *= 2;
 
 				}
-				var plane = new THREE.Mesh(planeGeometry, planeMaterial);
-				plane.position.x = -16;
-				plane.position.y = -5;
+				var plane = new THREE.Mesh( planeGeometry, planeMaterial );
+				plane.position.x = - 16;
+				plane.position.y = - 5;
 				plane.position.z = 0;
-				objects.push(plane);
-				scene.add(plane);
+				objects.push( plane );
+				scene.add( plane );
 
 				// A circle on the right.
-				circleTexture = new THREE.Texture(undefined, THREE.UVMapping, THREE.ClampToEdgeWrapping, THREE.ClampToEdgeWrapping);
-				canvas.addParent(circleTexture);
-				var circleMaterial = new THREE.MeshBasicMaterial({ map: circleTexture });
-				var circleGeometry = new THREE.CircleBufferGeometry(25, 40, 0, Math.PI * 2);
+				circleTexture = new THREE.Texture( undefined, THREE.UVMapping, THREE.RepeatWrapping, THREE.RepeatWrapping );
+				canvas.addParent( circleTexture );
+				var circleMaterial = new THREE.MeshBasicMaterial( { map: circleTexture } );
+				var circleGeometry = new THREE.CircleBufferGeometry( 25, 40, 0, Math.PI * 2 );
 				var uvs = circleGeometry.attributes.uv.array;
-				for (var i = 0; i < uvs.length; i++) {
+				// Set a specific texture mapping.
+				for ( var i = 0; i < uvs.length; i ++ ) {
 
-					uvs[i] = (uvs[i] - 0.25) * 2;
+					uvs[ i ] = ( uvs[ i ] - 0.25 ) * 2;
 
 				}
-				var circle = new THREE.Mesh(circleGeometry, circleMaterial);
+				var circle = new THREE.Mesh( circleGeometry, circleMaterial );
 				circle.position.x = 24;
-				circle.position.y = -5;
+				circle.position.y = - 5;
 				circle.position.z = 0;
-				objects.push(circle);
-				scene.add(circle);
+				objects.push( circle );
+				scene.add( circle );
 
-				window.addEventListener('resize', onWindowResize, false);
-				container.addEventListener('click', onClick, false);
+				window.addEventListener( 'resize', onWindowResize, false );
+				container.addEventListener( 'click', onClick, false );
 
 			}
 
@@ -289,89 +291,90 @@
 				camera.aspect = window.innerWidth / window.innerHeight;
 				camera.updateProjectionMatrix();
 
-				renderer.setSize(window.innerWidth, window.innerHeight);
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
 			};
 
-			function onClick(evt) {
+			function onClick( evt ) {
 
 				evt.preventDefault();
 
-				var array = getMousePosition(container, evt.clientX, evt.clientY);
-				onClickPosition.fromArray(array);
+				var array = getMousePosition( container, evt.clientX, evt.clientY );
+				onClickPosition.fromArray( array );
 
-				var intersects = getIntersects(onClickPosition, objects);
-				if (intersects.length > 0 && intersects[0].uv) {
+				var intersects = getIntersects( onClickPosition, objects );
+				if ( intersects.length > 0 && intersects[ 0 ].uv ) {
 
-					var uv = intersects[0].uv;
-					intersects[0].object.material.map.transformUv(uv);
-					canvas.setCrossPosition(uv.x, uv.y);
+					var uv = intersects[ 0 ].uv;
+					intersects[ 0 ].object.material.map.transformUv( uv );
+					canvas.setCrossPosition( uv.x, uv.y );
 
 				}
 
 			};
 
-			var getMousePosition = function (dom, x, y) {
+			var getMousePosition = function ( dom, x, y ) {
 
 				var rect = dom.getBoundingClientRect();
-				return [(x - rect.left) / rect.width, (y - rect.top) / rect.height];
+				return [ ( x - rect.left ) / rect.width, ( y - rect.top ) / rect.height ];
 
 			};
 
-			var getIntersects = function (point, objects) {
+			var getIntersects = function ( point, objects ) {
 
-				mouse.set((point.x * 2) - 1, -(point.y * 2) + 1);
+				mouse.set( ( point.x * 2 ) - 1, - ( point.y * 2 ) + 1 );
 
-				raycaster.setFromCamera(mouse, camera);
+				raycaster.setFromCamera( mouse, camera );
 
-				return raycaster.intersectObjects(objects);
+				return raycaster.intersectObjects( objects );
 
 			};
 
 			function render() {
 
-				requestAnimationFrame(render);
-				renderer.render(scene, camera);
+				requestAnimationFrame( render );
+				renderer.render( scene, camera );
 
 			};
 
-			function setwrapS(that) {
+			function setwrapS( that ) {
 
-				circleTexture.wrapS = THREE[that.value];
+				circleTexture.wrapS = THREE[ that.value ];
 				circleTexture.needsUpdate = true;
 
 			};
 
-			function setwrapT(that) {
+			function setwrapT( that ) {
 
-				circleTexture.wrapT = THREE[that.value];
+				circleTexture.wrapT = THREE[ that.value ];
 				circleTexture.needsUpdate = true;
 
 			};
 
-			function setOffsetU(that) {
+			function setOffsetU( that ) {
 
-				circleTexture.offset.x = parseFloat(that.value);
+				circleTexture.offset.x = parseFloat( that.value );
 
 			};
 
-			function setOffsetV(that) {
+			function setOffsetV( that ) {
 
-				circleTexture.offset.y = parseFloat(that.value);
+				circleTexture.offset.y = parseFloat( that.value );
 
 			};
 
-			function setRepeatU(that) {
+			function setRepeatU( that ) {
 
-				circleTexture.repeat.x = parseFloat(that.value);
+				circleTexture.repeat.x = parseFloat( that.value );
 
 			};
 
-			function setRepeatV(that) {
+			function setRepeatV( that ) {
 
-				circleTexture.repeat.y = parseFloat(that.value);
+				circleTexture.repeat.y = parseFloat( that.value );
 
 			};
+
 		</script>
 	</body>
 </html>