-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathrgb-trial1.html
152 lines (119 loc) · 4.98 KB
/
rgb-trial1.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
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Trial 1 of RGB Color Space</title>
<!--//bring in all the scripts that I need -->
<script src="js/three.min.js"></script>
<script src="js/Detector.js"></script>
<script src="js/Stats.js"></script>
<!--<script src="js/OrbitControls.js"></script> <!-- //Orbiting around scene -->
<script src="js/TrackballControls.js"></script>
<!--<script src="js/THREEx.KeyboardState.js"></script>--> <!--Currently Not Needed. -->
<script src="js/THREEx.FullScreen.js"></script> <!--Intially out. Makes working with FS easier. -->
<script src="js/THREEx.WindowResize.js"></script> <!--Makes window resizing better. -->
</head>
<body>
<div id="ThreeJS" style="position: absolute; left:0px; top:0px"></div>
<script>
//General Global Variables
var container, scene, camera, renderer, controls;
//Custom Global variables
var cube, rotationRate;
init();
animate();
//FUNCTIONS
function init() { //These things need to be initialized prior to any movement of the webpage
rotationRate = 0.003;
window.onmousedown = function(){
console.log("mouse is down");
rotationRate = 0;
};
window.onmouseup = function () {
setInterval(function() {
rotationRate = 0.003;
}, 3000)
};
scene = new THREE.Scene(); //Creates a new scene
var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight; //declares screen height and width
var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000; //Sets view angle, aspect ratio, camera distance
camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR); //Declares camera = new three object camera using above var
scene.add(camera);
camera.position.set(0, 0, 300); //Set Camera position to 0x, 150y, 400x
camera.lookAt(scene.position); //when init, camera look at position of the scene
//RENDERER
if (Detector.webgl) {
renderer = new THREE.WebGLRenderer({antialias: true});
} else {
renderer = new THREE.CanvasRenderer();
}
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
container = document.getElementById('ThreeJS');
container.appendChild(renderer.domElement);
renderer.setClearColor(0x272727, 1);
THREEx.WindowResize(renderer, camera);
//CONTROLS
setControls();
//LIGHT
var light = new THREE.AmbientLight(0xffffff);
//light.position.set(0, 250, 0);
scene.add(light); //Add the new point light to the scene
// this material causes a mesh to use colors assigned to vertices
// different colors at face vertices create gradient effect
var cubeMaterial = new THREE.MeshBasicMaterial({color: 0xffffff, vertexColors: THREE.VertexColors});
var color, face, numberOfSides, vertexIndex;
var faceIndices = ['a', 'b', 'c', 'd'];
// RGB color cube
var size = 80;
var point;
var boxGeometry = new THREE.BoxGeometry(size, size, size, 5, 5, 5);
for (var i = 0; i < boxGeometry.faces.length; i++) {
face = boxGeometry.faces[i];
// determine if current face is a tri or a quad
numberOfSides = ( face instanceof THREE.Face3 ) ? 3 : 4;
// assign color to each vertex of current face
for (var j = 0; j < numberOfSides; j++) {
vertexIndex = face[faceIndices[j]];
// store coordinates of vertex
point = boxGeometry.vertices[vertexIndex];
// initialize color variable
color = new THREE.Color(0xffffff);
color.setRGB(0.5 + point.x / size, 0.5 + point.y / size, 0.5 + point.z / size);
face.vertexColors[j] = color;
}
}
cube = new THREE.Mesh(boxGeometry, cubeMaterial);
cube.position.set(0, 0, 0);
cube.rotateY(20); //setting persepctive
cube.rotateX(-20); //setting perspective
scene.add(cube);
}
function setControls() {
controls = new THREE.TrackballControls(camera);
controls.rotateSpeed = 3.0;
controls.staticMoving = false;
controls.noZoom = true;
controls.noPan = true;
controls.dynamicDampingFactor = 0.4;
//controls.addEventListener('click', function() {
//rotationRate = 0;
//});
//controls.addEventListener('rotate', rotateCube);
}
function rotateCube() {
cube.rotation.x -= rotationRate * 2;
cube.rotation.y -= rotationRate;
cube.rotation.z -= rotationRate * 3;
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
renderer.render(scene, camera);
controls.update();
rotateCube();
}
</script>
</body>
</html>