refactor web page code

The web page code is organized as most of the other example web pages.

examples/webgl_texture_raycast.html

@@ -69,247 +69,309 @@
 		</fieldset>
 		<script src="../build/three.min.js"></script>
 		<script>
-		CanvasTexture = function (parentTexture) {
-			this._canvas = document.createElement("canvas");
-			this._context2D = this._canvas.getContext("2d");
 
-			if (parentTexture) {
-				this._parentTexture.push(parentTexture);
-				parentTexture.image = this._canvas;
+			CanvasTexture = function (parentTexture) {
+
+				this._canvas = document.createElement("canvas");
+				this._context2D = this._canvas.getContext("2d");
+
+				if (parentTexture) {
+
+					this._parentTexture.push(parentTexture);
+					parentTexture.image = this._canvas;
+
+				}
+
+				var that = this;
+				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._draw();
+
+				}, false);
+				this._background.crossOrigin = '';
+				this._background.src = "textures/UV_Grid_Sm.jpg";
+
+				this._draw();
+
 			}
 
-			var that = this;
-			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);
+			CanvasTexture.prototype = {
 
-				that._draw();
-			}, false);
-			this._background.crossOrigin = '';
-			this._background.src = "textures/UV_Grid_Sm.jpg";
+				constructor: CanvasTexture,
 
-			this._draw();
-		}
+				_canvas: null,
+				_context2D: null,
+				_xCross: 0,
+				_yCross: 0,
 
+				_rayonviseur: 57,
+				_exterieurCroix: 40,
+				_interieurCroix: 4,
+				_epaisseurViseur: 4,
 
-		CanvasTexture.prototype = {
+				_parentTexture: [],
 
-			constructor: CanvasTexture,
+				addParent: function (parentTexture) {
 
-			_canvas: null,
-			_context2D: null,
-			_xCross: 0,
-			_yCross: 0,
+					if (this._parentTexture.indexOf(parentTexture) === -1) {
 
-			_rayonviseur: 57,
-			_exterieurCroix: 40,
-			_interieurCroix: 4,
-			_epaisseurViseur: 4,
+						this._parentTexture.push(parentTexture);
+						parentTexture.image = this._canvas;
 
-			_parentTexture: [],
+					}
 
-			addParent: function (parentTexture) {
-				if (this._parentTexture.indexOf(parentTexture) === -1) {
-					this._parentTexture.push(parentTexture);
-					parentTexture.image = this._canvas;
-				}
-			},
+				},
 
-			setCrossPosition: function (x, y) {
-				this._xCross = x * this._canvas.width;
-				this._yCross = y * this._canvas.height;
+				setCrossPosition: function (x, y) {
 
-				this._draw();
-			},
+					this._xCross = x * this._canvas.width;
+					this._yCross = y * this._canvas.height;
+
+					this._draw();
 
-			_draw: function () {
-				if (!this._context2D) return;
+				},
 
-				this._context2D.clearRect(0, 0, this._canvas.width, this._canvas.height)
+				_draw: function () {
 
-				// Background.
-				this._context2D.drawImage(this._background, 0, 0);
+					if (!this._context2D) return;
 
-				// Yellow cross.
-				this._context2D.lineWidth = this._epaisseurViseur * 3;
-				this._context2D.strokeStyle = "#FFFF00";
+					this._context2D.clearRect(0, 0, this._canvas.width, this._canvas.height)
 
-				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);
+					// Background.
+					this._context2D.drawImage(this._background, 0, 0);
 
-				this._context2D.moveTo(this._xCross + this._interieurCroix, this._yCross + this._interieurCroix);
-				this._context2D.lineTo(this._xCross + this._exterieurCroix + 2, this._yCross + this._exterieurCroix + 2);
+					// Yellow cross.
+					this._context2D.lineWidth = this._epaisseurViseur * 3;
+					this._context2D.strokeStyle = "#FFFF00";
 
-				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.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._interieurCroix, this._yCross - this._interieurCroix);
-				this._context2D.lineTo(this._xCross + this._exterieurCroix + 2, this._yCross - this._exterieurCroix - 2);
+					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.stroke();
+					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._interieurCroix, this._yCross - this._interieurCroix);
+					this._context2D.lineTo(this._xCross + this._exterieurCroix + 2, this._yCross - this._exterieurCroix - 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].image = this._canvas;
-					this._parentTexture[i].needsUpdate = true;
 				}
 
 			}
 
-		}
-	</script>
-	<script>
+		</script>
+		<script>
+
+			var width = window.innerWidth;
+			var height = window.innerHeight;
+
+			var canvas;
+			var objects = [];
+			var planeTexture, cubeTexture, circleTexture;
+
+			var container;
+
+			var camera, scene, renderer;
+
+			var raycaster = new THREE.Raycaster();
+			var mouse = new THREE.Vector2();
+			var onClickPosition = new THREE.Vector2();
+
+			init();
+			render();
+			
+			function init() {
+
+				container = document.getElementById("container");
+
+				scene = new THREE.Scene();
+
+				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);
+			
+				renderer = new THREE.WebGLRenderer();
+				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);
+				// Set a specific texture mapping.
+				var uvs;
+				for (var i = 0; i < cubeGeometry.faceVertexUvs[0].length; i++) {
+
+					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;
+
+					}
 
-		var container = document.getElementById("container");
-		var width = window.innerWidth;
-		var height = window.innerHeight;
-		var objects = [];
+				}
+				var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
+				cube.position.x = 4;
+				cube.position.y = -5;
+				cube.position.z = 0;
+				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);
+				var uvs = planeGeometry.attributes.uv.array;
+				for (var i = 0; i < uvs.length; i++) {
+
+					uvs[i] *= 2;
+
+				}
+				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);
+
+				// 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);
+				var uvs = circleGeometry.attributes.uv.array;
+				for (var i = 0; i < uvs.length; i++) {
+
+					uvs[i] = (uvs[i] - 0.25) * 2;
+
+				}
+				var circle = new THREE.Mesh(circleGeometry, circleMaterial);
+				circle.position.x = 24;
+				circle.position.y = -5;
+				circle.position.z = 0;
+				objects.push(circle);
+				scene.add(circle);
 
-		var scene = new THREE.Scene();
-		var 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);
+				window.addEventListener('resize', onWindowResize, false);
+				container.addEventListener('click', onClick, false);
 
-		var raycaster = new THREE.Raycaster();
-		var mouse = new THREE.Vector2();
-		var onClickPosition = new THREE.Vector2();
+			}
 
-		var getMousePosition = function (dom, x, y) {
-			var rect = dom.getBoundingClientRect();
-			return [(x - rect.left) / rect.width, (y - rect.top) / rect.height];
-		};
+			function onWindowResize() {
 
-		var getIntersects = function (point, objects) {
-			mouse.set((point.x * 2) - 1, -(point.y * 2) + 1);
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
 
-			raycaster.setFromCamera(mouse, camera);
+				renderer.setSize(window.innerWidth, window.innerHeight);
 
-			return raycaster.intersectObjects(objects);
-		};
+			};
 
-		window.addEventListener('resize', function (evt) {
-			camera.aspect = window.innerWidth / window.innerHeight;
-			camera.updateProjectionMatrix();
+			function onClick(evt) {
 
-			renderer.setSize(window.innerWidth, window.innerHeight);
-		}, false);
+				evt.preventDefault();
 
-		container.addEventListener('click', function (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) {
-				if (intersects[0].uv) {
 					var uv = intersects[0].uv;
 					intersects[0].object.material.map.transformUv(uv);
 					canvas.setCrossPosition(uv.x, uv.y);
+
 				}
-			}
-		}, false);
-
-
-		var renderer = new THREE.WebGLRenderer();
-		renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
-		renderer.setSize(width, height);
-		container.appendChild(renderer.domElement);
-
-		// A cube, in the middle.
-		var cubeTexture = new THREE.Texture(undefined, THREE.UVMapping, THREE.RepeatWrapping, THREE.RepeatWrapping);
-		var 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++) {
-			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;
-			}
-		}
-		var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
-		cube.position.x = 4;
-		cube.position.y = -5;
-		cube.position.z = 0;
-		objects.push(cube);
-		scene.add(cube);
-
-		// A plane on the left.
-		var 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++) {
-			//if (uvs[i] < 0.1) uvs[i] = -1;
-			uvs[i] *= 2;
-		}
-		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);
-
-		// A circle on the left.
-		var 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);
-		var uvs = circleGeometry.attributes.uv.array;
-		for (var i = 0; i < uvs.length; i++) {
-			uvs[i] = (uvs[i] - 0.25) * 2;
-		}
-		var circle = new THREE.Mesh(circleGeometry, circleMaterial);
-		circle.position.x = 24;
-		circle.position.y = -5;
-		circle.position.z = 0;
-		objects.push(circle);
-		scene.add(circle);
-
-		render();
-
-		function render() {
-			requestAnimationFrame(render);
-			renderer.render(scene, camera);
-		};
-
-		function setwrapS(that) {
-			circleTexture.wrapS = THREE[that.value];
-			circleTexture.needsUpdate = true;
-		};
-
-		function setwrapT(that) {
-			circleTexture.wrapT = THREE[that.value];
-			circleTexture.needsUpdate = true;
-		};
-
-		function setOffsetU(that) {
-			circleTexture.offset.x = parseFloat(that.value);
-		};
-
-		function setOffsetV(that) {
-			circleTexture.offset.y = parseFloat(that.value);
-		};
-
-		function setRepeatU(that) {
-			circleTexture.repeat.x = parseFloat(that.value);
-		};
-
-		function setRepeatV(that) {
-			circleTexture.repeat.y = parseFloat(that.value);
-		};
+
+			};
+
+			var getMousePosition = function (dom, x, y) {
+
+				var rect = dom.getBoundingClientRect();
+				return [(x - rect.left) / rect.width, (y - rect.top) / rect.height];
+
+			};
+
+			var getIntersects = function (point, objects) {
+
+				mouse.set((point.x * 2) - 1, -(point.y * 2) + 1);
+
+				raycaster.setFromCamera(mouse, camera);
+
+				return raycaster.intersectObjects(objects);
+
+			};
+
+			function render() {
+
+				requestAnimationFrame(render);
+				renderer.render(scene, camera);
+
+			};
+
+			function setwrapS(that) {
+
+				circleTexture.wrapS = THREE[that.value];
+				circleTexture.needsUpdate = true;
+
+			};
+
+			function setwrapT(that) {
+
+				circleTexture.wrapT = THREE[that.value];
+				circleTexture.needsUpdate = true;
+
+			};
+
+			function setOffsetU(that) {
+
+				circleTexture.offset.x = parseFloat(that.value);
+
+			};
+
+			function setOffsetV(that) {
+
+				circleTexture.offset.y = parseFloat(that.value);
+
+			};
+
+			function setRepeatU(that) {
+
+				circleTexture.repeat.x = parseFloat(that.value);
+
+			};
+
+			function setRepeatV(that) {
+
+				circleTexture.repeat.y = parseFloat(that.value);
+
+			};
 		</script>
 	</body>
 </html>