-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmylights.html
139 lines (108 loc) · 4.91 KB
/
mylights.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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="CS4406 Computer Graphics - Exercise #3" />
<meta charset="utf-8" />
<title>Sample Three.js</title>
<style>
body {
background: #000000;
width: 100%;
height: 100%;
}
</style>
<meta charset=utf-8 />
<title>CS4406 Computer Graphics - Exercise #3</title>
</style>
</head>
<body>
<script src="threee.js"></script>
<script>
// set the scene size
var WIDTH = 500, HEIGHT = 500;
// set some camera attributes
var VIEW_ANGLE = 45, ASPECT = WIDTH / HEIGHT, NEAR = 1, FAR = 1000;
// get the DOM element to attach to
// create a WebGL renderer, camera, and a scene
// NOTE: for the assignment in Unit 4 where you need to use a texture, or in any other assignment where a texture is required
// you should deactivate the Detector and use ONLY the CanvasRenderer. There are some issues in using waht are called Cross Domain images for
// for textures. You can get more details by looking up WebGL and CORS using Google search. I have included some code below that will
// get around this issue that you can use.
var renderer = new THREE.WebGLRenderer();
var scene = new THREE.Scene();
var clock = new THREE.Clock();
var camera = new THREE.PerspectiveCamera(VIEW_ANGLE,ASPECT,NEAR,FAR);
// the camera starts at 0,0,0 so pull it back
// the camera starts at 0,0,0 so pull it back for some assignments you may need to adjust this value
// some distance to make the scene visible properly
camera.position.z = 200;
// add the camera to the scene
scene.add(camera)
// set up the camera controls. Please keep in mind that what this does is move the entire scene around.
// because the entire scene is moving the position of the camera and lights in relation to objects within
// the scene doesn't change so the lighting on the surface of the object(s) will not change either
//var cameraControls = new THREE.OrbitControls(camera, renderer.domElement);
//cameraControls.addEventListener( 'mousemove', renderer );
// start the renderer
renderer.setSize(WIDTH, HEIGHT);
// enable shadow in renderer
renderer.shadowMap.enabled = true;
// set a soft shadow for renderer (default THREE.PCFShadowMap)
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
// attach the render-supplied DOM element
document.body.appendChild(renderer.domElement);
// ----------------------------------------------------------------------------------------
// END OF THE STANDARD CODE FOR THE ASSIGNMENT
// Following this is where you must place your own custom code to complete the assignment
// ----------------------------------------------------------------------------------------
// create the material for the ball
// starting with red color
var ballMaterial = new THREE.MeshLambertMaterial(
{
color:0xff0000, wireframe: false, side: THREE.DoubleSide
});
// 3D object selected: sphere
// create the ball geometry with diameter 15 and 32 separations
var ballGeometry = new THREE.SphereGeometry( 15, 32, 32 );
// apply the geometry and material to the ball
var ball = new THREE.Mesh( ballGeometry, ballMaterial);
// apply castshadow to the ball so it will cast shadow to the plane
ball.castShadow = true;
// set receiveShadow to false so that other objects don't cast shadow on the ball
ball.receiveShadow = false;
// add the ball to the scene
scene.add( ball );
// create a directional light that casts white light
var light = new THREE.DirectionalLight( 0xffffaa, 1, 100 ); // color, intensity
// light = new THREE.PointLight(0xffffff, 1, 100);
// define a fixed position for the light
// the light is in the top left corner and slightly to the front of the object
// the chosen position shows the color change well
light.position.set( -1, 1, 1 );
// set the castShadow for the light to true, enable the ball to cast shadow
light.castShadow = true;
// add the light to the scene
scene.add( light );
// create a plane behind the ball on which the ball will cast a shadow
var planeGeometry = new THREE.PlaneBufferGeometry( 600, 600, 32, 32 );
var planeMaterial = new THREE.MeshStandardMaterial( { color: 0xffffff } )
var plane = new THREE.Mesh( planeGeometry, planeMaterial );
// set receiveShadow on the plane
// notice that the ball now casts a shadow on the plane
plane.receiveShadow = true;
// add the plane to the scene
scene.add( plane );
function animate() {
requestAnimationFrame(animate);
// animate the ball in y direction
// ball.position.y += dirY * speed;
ball.rotation.x+=0.002;
ball.position.y+=0.004;
renderer.render( scene, camera )
//render();
}
// call the animate function to start the animation
animate();
</script>
</body>
</html>