-
Notifications
You must be signed in to change notification settings - Fork 4
/
Project1-Lighting.html
86 lines (73 loc) · 2.71 KB
/
Project1-Lighting.html
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
<html>
<head>
<title>Lighting</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="js/three.js"></script>
<script src="js/OrbitControls.js"></script>
<script>
// @author PWhiddy
// A container to place our objects into
var scene = new THREE.Scene();
/*
* PerspectiveCamera( fov, aspect, near, far )
* fov — Camera vertical field of view.
* aspect — Camera aspect ratio.
* near — Camera near plane. (Objects outside the near and far plane won't be rendered)
* far — Camera far plane.
*/
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
// Move camera back so we are looking at the origin
camera.position.z = 30;
// The threejs webgl renderer
var renderer = new THREE.WebGLRenderer({antialias: true});
// Tell renderer the dimensions of our screen
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setPixelRatio( window.devicePixelRatio );
// Attach renderer to DOM element
document.body.appendChild( renderer.domElement );
// adding orbit controls to allow camera movement
var controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.zoomSpeed = 0.5;
controls.rotateSpeed = 0.5;
// Create our objects geometry with built-in torus knot algorithim
var geometry = new THREE.TorusKnotGeometry( 10, 3, 192, 96);
// The material properties of our object
var material = new THREE.MeshStandardMaterial( { color: 0x33aaee } ); // color is in hexidecimal
// Use our geometry and material to create a mesh (What's a mesh? https://en.wikipedia.org/wiki/Polygon_mesh)
var torus = new THREE.Mesh( geometry, material );
// Add mesh to the scene
scene.add( torus );
/* Create a point light source with color 0xdddddd, intesity 0.5 */
var pointLight = new THREE.PointLight(0xdddddd, 0.5);
scene.add(pointLight);
// Adjust light position to nicely illuminate object
pointLight.position.y = 40;
pointLight.position.x = 40;
//*/
/* Ambient lighting - try disabling one of the lights to see each's contribution */
var hemisphereLight = new THREE.HemisphereLight(0x8899cc, 0x334455);
scene.add(hemisphereLight);
//*/
// Our rendering loop
var render = function () {
// Rendering function is called each time the
// browser requests a new frame
requestAnimationFrame( render );
controls.update();
// Rotate our object
torus.rotation.x += 0.005;
torus.rotation.y += 0.005;
// Render our scene
renderer.render(scene, camera);
};
render();
</script>
</body>
</html>