div(id='webGL-container')
View Compiled
html, body {
  margin: 0; }
$(function(){

	var scene = new THREE.Scene();

	var aspect = window.innerWidth / window.innerHeight;
	var d = 2;
	camera = new THREE.OrthographicCamera( - d * aspect, d * aspect, d, - d, 1, 1000 );
	//var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 500);

	camera.position.set( 4, 3, 3); // all components equal
	camera.lookAt( scene.position ); // or the origin

	// var axis = new THREE.AxisHelper(10);
	// scene.add(axis);

	var renderer = new THREE.WebGLRenderer({antialias: false});
	renderer.setPixelRatio(window.devicePixelRatio);
	renderer.setClearColor(0x141A35);
	renderer.setSize(window.innerWidth, window.innerHeight);
	renderer.shadowMapEnabled = true;
	renderer.shadowMapType = THREE.PCFSoftShadowMap;

	var loader = new THREE.JSONLoader();
	loader.load('https://aperesso.github.io/low_poly_room/room.json', handle_load);
	function handle_load(geometry,materials) {
		var obj = new THREE.Mesh(
			geometry,
			materials
		);
		obj.receiveShadow = true;
		obj.castShadow = true;
		scene.add(obj);
	}

	var screen = new THREE.Mesh(
		new THREE.PlaneGeometry(.31,.25,.85),
		new THREE.MeshStandardMaterial({emissive: 0x141A35})
	);
	screen.position.set(1.8,.84,1.32);
	scene.add(screen);

	var snow = [];
	var nb = 35;

	for (var i = 0; i < nb ; i++) {
		var particle = new Snow();
		particle.init();
		particle.modelize();
		snow.push(particle);
	}



	light();

	function light() {

		var spotlight = new THREE.SpotLight(0xF5FC5A);
		spotlight.position.set(1.75, 4, -3);
		spotlight.castShadow = true;
		spotlight.intensity = .2;
		scene.add(spotlight);

		var dirlight = new THREE.DirectionalLight(0xfdd8ff);
		dirlight.position.set(-.96,3,-.75);
		//dirlight.castShadow = true;
		dirlight.intensity = .2;
		scene.add(dirlight);

		var ambi = new THREE.AmbientLight(0x0e1642);
		scene.add(ambi);

		var pointlight = new THREE.PointLight();
		pointlight.position.set(.63,.72,.71);
		//pointlight.castShadow = true;
		pointlight.intensity = .2;
		scene.add(pointlight);
	}

	function update() {
		for (var i = 0; i < nb; i++) {
			snow[i].update();
		}

		renderer.render(scene,camera);
		requestAnimationFrame(update);
	}


	function Snow() {
		this.position = new THREE.Vector3();
		this.vel = new THREE.Vector3(-1 * (0.0005 + Math.random() * 0.001),-1 * (0.005 + Math.random() * 0.01), -.1 * (0.005 + Math.random() * 0.01));

		this.init = function() {
			this.position.x = Math.random() * 2.85;
			this.position.y = 2.6;
			this.position.z = -2.47 + Math.random() * 2;
		}

		this.modelize = function() {
			this.mesh = new THREE.Mesh(
				new THREE.DodecahedronGeometry(1),
				new THREE.MeshPhongMaterial({
					color: 0xfafafa
				})
			);
			this.mesh.position.copy(this.position);
			this.mesh.scale.set(0.02,0.02,0.02);
			this.mesh.castShadow = true;
			this.mesh.receiveShadow = true;
			scene.add(this.mesh);
		}

		this.update = function() {
			if (this.position.y < 0)
				this.position.y = 2.6;
			if (this.position.x < 0 || this.position.x > 2.85)
					this.vel.x *= -1;
			if (this.position.z < -2.47 || this.position.z > -.47)
					this.vel.z *= -1;
			this.position.add(this.vel);
			this.mesh.position.copy(this.position);
		}
	}

	$('#webGL-container').append(renderer.domElement);
	renderer.render(scene, camera);

	update();
})

// particles :
// y = 2.60
// x > 0 , x < 2.85
// z < 0.42 z > -2.47

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js
  2. https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.js