playground/computer-guy.html at master · wongbryan/playground · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html>
<head>
	<title>Mirror</title>
</head>

<style>
	body{
		margin: 0;
		overflow: hidden;
	}
</style>
<body>
	<div id="container"></div>
</body>

<script src="bower_components/three.js/build/three.js"></script>
<script src="bower_components/three.js/examples/js/controls/TrackballControls.js"></script>
<script src="bower_components/three.js/examples/js/Mirror.js"></script>
<script src="bower_components/dat.gui/dat.gui.min.js"></script>
<script src="js/classes.js"></script>
<script>
	var camera, scene, renderer, controls, gui;
	var angle = 0;
	var clock = new THREE.Clock();
	var time;

	var mirror;
	var box;

	function resize(){
		camera.aspect = window.innerWidth / window.innerHeight;
		camera.updateProjectionMatrix();
		renderer.setSize( window.innerWidth, window.innerHeight );
	}

	function init() {
		var container = document.getElementById( 'container' );
		renderer = new THREE.WebGLRenderer({antialias: true});
		renderer.shadowMap.enabled = true;
		renderer.shadowMap.type = THREE.PCSoftShadowMap;
		renderer.setPixelRatio( window.devicePixelRatio );
		renderer.setSize( window.innerWidth, window.innerHeight);
		renderer.setClearColor(0xededed);
		container.appendChild( renderer.domElement );

		camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
		camera.position.set(0, 0, 10);
		controls = new THREE.TrackballControls(camera, renderer.domElement);
		controls.rotateSpeed = 2.0;
		controls.panSpeed = 0.8;
		controls.zoomSpeed = 1.5;

		scene = new THREE.Scene();

		var directionalLight = new THREE.DirectionalLight(0xfff4f6, .7);
		directionalLight.position.set(-5, 5, 1);
		directionalLight.castShadow = true;
		var ambientLight = new THREE.AmbientLight(0xfa7cf2);
		var pointLights = [];
		pointLights[0] = new THREE.PointLight(0xffffff, 1);
		pointLights[1] = new THREE.PointLight(0xffffff, 1);
		pointLights[2] = new THREE.PointLight(0xffffff, 1);

		pointLights[0].position.set(0, 50, 50);
		pointLights[1].position.set(-50, 0, 50);
		pointLights[2].position.set(50, -50, 50);

		scene.add(ambientLight);
		scene.add(directionalLight);
		scene.add(pointLights[0]);
		scene.add(pointLights[1]);
		scene.add(pointLights[2]);

		var loader = new THREE.JSONLoader();

		loader.load(
			'assets/computer.json',

			function(geometry, materials){

				console.log(materials);

				materials[0] = new THREE.MeshBasicMaterial();

				box = new THREE.Mesh(geometry, materials);
				scene.add(box);
			}
		);

		window.addEventListener('resize', resize);
	}

	function update(){
		camera.lookAt(scene.position);
		controls.update();
	}
	function animate(){
		update();
		renderer.render(scene, camera);
		window.requestAnimationFrame(animate);
	}

	init();
	animate();
</script>
</html>