javascript
/
three.js
Mirror von https://github.com/tazdij/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
							<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				font-family: Monospace;
				background-color: #f0f0f0;
				margin: 0px;
				overflow: hidden;
			}

			.info {
				position: absolute;
				background-color: black;
				opacity: 0.8;
				color: white;
				text-align: center;
				top: 0px;
				width: 100%;
			}

			.info a {
				color: #00ffff;
			}
		</style>
	</head>
	<body>
		<script src="../build/three.js"></script>

		<script src="js/controls/OrbitControls.js"></script>

		<script src="js/postprocessing/EffectComposer.js"></script>
		<script src="js/postprocessing/RenderPass.js"></script>
		<script src="js/postprocessing/ShaderPass.js"></script>
		<script src="js/postprocessing/HalftonePass.js"></script>

		<script src="js/shaders/CopyShader.js"></script>
		<script src="js/shaders/HalftoneShader.js"></script>
		<script src="js/shaders/DepthLimitedBlurShader.js"></script>
		<script src="js/shaders/UnpackDepthRGBAShader.js"></script>

		<script src="js/Detector.js"></script>
		<script src='js/libs/stats.min.js'></script>
		<script src='js/libs/dat.gui.min.js'></script>

		<div class="info">
			<a href="http://threejs.org" target="_blank" rel="noopener noreferrer">three.js</a> - Halftone shader by
			<a href="https://github.com/meatbags" target="_blank">@meatbags</a>
		</div>

		<script>

		if (!Detector.webgl) {
			Detector.addGetWebGLMessage();
		}

		class Example {
			constructor() {
				this.wrapper = document.createElement('div');
				document.body.appendChild(this.wrapper);

			 	this.clock = new THREE.Clock();
			 	this.width = window.innerWidth;
			 	this.height = window.innerHeight;
			 	this.camera = new THREE.PerspectiveCamera(75, this.width / this.height, 1, 1000);
				this.camera.position.z = 10;
				this.rotationSpeed = Math.PI / 64;

				this.initScene();
				this.initRender();
				this.initGUI();
				this.loop();
			}

			initScene() {
				var geo = new THREE.BoxBufferGeometry(2, 2, 2);
				var mat = new THREE.ShaderMaterial({
					uniforms: {},
					vertexShader: `
						varying vec2 vUV;
						varying vec3 vNormal;

						void main() {
			      	vUV = uv;
							vNormal = vec3(normal);
			      	gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
			    	}`,
					fragmentShader: `
						varying vec2 vUV;
						varying vec3 vNormal;

						void main() {
							vec4 c = vec4(abs(vNormal) + vec3(vUV, 0.0), 0.0);
							gl_FragColor = c;
						}`
				});
				this.group = new THREE.Group();
				var rand = (x) => { return x * Math.random() - x * 0.5; };

				for (var i=0; i<50; ++i) {
					var mesh = new THREE.Mesh(geo.clone(), mat.clone());
					mesh.position.set(rand(15), rand(15), rand(15));
					mesh.rotation.set(rand(Math.PI), rand(Math.PI), rand(Math.PI));
					this.group.add(mesh);
				}

				var floor = new THREE.Mesh(new THREE.BoxBufferGeometry(50, 1, 50), new THREE.MeshPhongMaterial({}));
				var light = new THREE.PointLight(0xffffff, 1.0, 50, 2);
				light.position.y = 2;
				floor.position.y = -10;
				this.group.add(floor, light);

				this.scene = new THREE.Scene();
				this.scene.background = new THREE.Color(0x444444);
				this.scene.add(this.group);
			}

			initRender() {
				// 3js renderer
				this.renderer = new THREE.WebGLRenderer({antialias: true});
				this.renderer.setPixelRatio(window.devicePixelRatio);
				this.renderer.setSize(window.innerWidth, window.innerHeight);

				// effect composer
				this.composer = new THREE.EffectComposer(this.renderer);
			 	this.renderPass = new THREE.RenderPass(this.scene, this.camera);
				this.halftonePass = new THREE.HalftonePass(this.width, this.height);
				this.halftonePass.renderToScreen = true;
				this.composer.addPass(this.renderPass);
				this.composer.addPass(this.halftonePass);

				window.onresize = () => {
					this.width = window.innerWidth;
					this.height = window.innerHeight;
					this.renderer.setSize(this.width, this.height);
					this.composer.setSize(this.width, this.height);
					this.camera.aspect = this.width / this.height;
					this.camera.updateProjectionMatrix();
				}

				// add to doc
				this.wrapper.appendChild(this.renderer.domElement);
			}

			initGUI() {
				var guiTarget = this.halftonePass.uniforms;
				var controller = {
					radius: 10,
					rotateC: 45,
					rotateM: 75,
					rotateY: 60,
					shape: 1,
					greyscale: false,
					blending: 0,
					blendingMode: 1,
					disable: false
				};
				var onGUIChange = function() {
					guiTarget.radius.value = controller.radius;
					guiTarget.rC.value = controller.rotateC * (Math.PI / 180);
					guiTarget.rM.value = controller.rotateM * (Math.PI / 180);
					guiTarget.rY.value = controller.rotateY * (Math.PI / 180);
					guiTarget.shape.value = controller.shape;
					guiTarget.greyscale.value = controller.greyscale;
					guiTarget.blending.value = controller.blending;
					guiTarget.blendingMode.value = controller.blendingMode;
					guiTarget.disable.value = controller.disable;
				};
				this.gui = new dat.GUI();
				this.gui.add(controller, 'shape', {'dot': 1, 'euclidean-dot': 2, 'ellipse': 3, 'line': 4, 'square': 5}).onChange(onGUIChange);
				this.gui.add(controller, 'radius', 1, 50).onChange(onGUIChange);
				this.gui.add(controller, 'rotateC', 0, 180).onChange(onGUIChange);
				this.gui.add(controller, 'rotateM', 0, 180).onChange(onGUIChange);
				this.gui.add(controller, 'rotateY', 0, 180).onChange(onGUIChange);
				this.gui.add(controller, 'greyscale').onChange(onGUIChange);
				this.gui.add(controller, 'blending', 0, 1, 0.01).onChange(onGUIChange);
				this.gui.add(controller, 'blendingMode', {'normal': 1, 'add': 2, 'multiply': 3, 'lighter': 4, 'darker': 5}).onChange(onGUIChange);
				this.gui.add(controller, 'disable').onChange(onGUIChange);

				this.stats = new Stats();
				this.wrapper.appendChild( this.stats.dom );

				var controls = new THREE.OrbitControls( this.camera, this.renderer.domElement );
				controls.target.set( 0, 0, 0 );
				controls.update();

				// reset
				onGUIChange();
			}

			loop() {
				requestAnimationFrame(() => { this.loop(); });
				var delta = this.clock.getDelta();
				this.group.rotation.y += delta * this.rotationSpeed;
				this.composer.render(delta);
				this.stats.update();
			}
		}

		var example = new Example();

		</script>
	</body>
</html>