This repository has been archived by the owner on Sep 28, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathsometesting.html
207 lines (153 loc) · 6.68 KB
/
sometesting.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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<!--
TO-DO LIST
·Sort out perspective (Make z axis = y axis) DONE, HOW?
·Function for mapping of CSV file data to RGB
·Add shadows
·Add textures to objects
Backlog:
29/09/2021:
Modelling of basic 3D objects and set up of three js
30/09/2021:
Orbital control so the user can drag and rotate objects + lights
30/09/2021 & 1/10/2021::
Fixing coordinate system so it's a "Z-Up" system so it accomodates for the orientation of the objects
Work out a way of changing the colour of the objects, whether it be by deleting and re-rendering the same object of a different colour...
Or by tweaking the material properties of the object.
Scaling of objects
Max zoom and minimum zoom
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<script type="module">
import { Scene, PerspectiveCamera, WebGLRenderer, PointLight, Group, Mesh } from '/js/threejs/src/Three.js';
import { MTLLoader } from '/js/threejs/examples/jsm/loaders/MTLLoader.js';
import { OBJLoader } from '/js/threejs/examples/jsm/loaders/OBJLoader.js';
// Create the Three.js Scene
const scene = new Scene();
// Create a new Perspective Camera
var camera = new PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000)
camera.position.z = 25;
// Create a Full Screen WebGL Renderer
const renderer = new WebGLRenderer({antialias: true, alpha: true});
renderer.setClearColor("#DDDDDD");
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);
// Make sure the project is responsive based on window resizing
window.addEventListener('resize', () => {
renderer.setSize(window.innerWidth,window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
})
// Add a light
const light = new PointLight(0xFFFFFF, 1.4, 1000)
light.position.set(0,15,15);
scene.add(light);
// Defining a variable for our two models
var ourObj;
var ourObj2;
var ourObj3;
// Create parent, set its pos to 0, 5, 0
var parent = new Group();
scene.add(parent);
parent.position.set(0, 5, 0);
// create child, and add to parent
// var child1 = new Mesh(geom, mat);
// parent.add(child1);
// child1.position.set(1, 0, 0);
// create child, and add to parent
// var child2 = new Mesh(geom, mat);
// parent.add(child2);
// child2.position.set(0, 1, 0);
// Create a material
var mtlLoader = new MTLLoader();
mtlLoader.load('cylinder/cylinder_red.mtl', function (materials) {
materials.preload();
// Load the object
var objLoader = new OBJLoader();
objLoader.setMaterials(materials);
objLoader.load('cylinder/cylinder_red.obj', function (object) {
scene.add(object);
ourObj = object;
object.position.z -= 370;
object.rotation.x = 250;
});
});
// Create a material
var mtlLoader = new MTLLoader();
mtlLoader.load('polyhedron/polyhedron_green.mtl', function (materials) {
materials.preload();
// Load the object
var objLoader = new OBJLoader();
objLoader.setMaterials(materials);
objLoader.load('polyhedron/polyhedron_green.obj', function (object) {
scene.add(object);
ourObj2 = object;
object.position.z -= 370;
object.rotation.x = 250;
//emerge from ground up (supposedly)
/* this.tl = new TimelineMax();
this.tl.from(ourObj2.scale, 2, {y: 0, x:0, z: 0, ease: Expo.easeOut})
this.tl.from(ourObj2.position, 2, {y: 0, z: -30, ease: Expo.easeOut})
this.tl.from(ourObj.scale, 2, {x: 1.5, y: 1.5, z: 0, ease: Expo.easeOut}, '-=2')
this.tl.from(ourObj.position, 1, {y: -20, ease: Expo.easeOut}, '-=3')*/
});
});
// Create a material
var mtlLoader = new MTLLoader();
mtlLoader.load('tube/tube_blue.mtl', function (materials) {
materials.preload();
// Load the object
var objLoader = new OBJLoader();
objLoader.setMaterials(materials);
objLoader.load('tube/tube_blue.obj', function (object) {
scene.add(object);
ourObj3 = object;
object.position.z -= 370;
object.rotation.x = 250;
});
});
var render = function() {
requestAnimationFrame(render);
// Rotate the objects indefinitely (every time you render a new object, it increments the roation for the other ones...FIX)
ourObj.rotation.z += .01;
ourObj2.rotation.z += .01;
ourObj3.rotation.z += .01;
renderer.render(scene, camera);
}
// Call this to render the entire scene
render();
//------------------------------------------------------------------------//
// TEST RE-RENDER OF OBJECT IN DIFFERENT COLOUR //
//------------------------------------------------------------------------//
var delayInMilliseconds = 4000; //1 second
setTimeout(function() {
//Delete object
//var selectedObject = scene.getObjectByName();
scene.remove(ourObj);
// Create a material
var mtlLoader = new MTLLoader();
mtlLoader.load('cylinder/cylinder_green.mtl', function (materials) {
materials.preload();
// Load the object
var objLoader = new OBJLoader();
objLoader.setMaterials(materials);
objLoader.load('cylinder/cylinder_green.obj', function (object) {
scene.add(object);
ourObj = object;
object.position.z -= 370;
object.rotation.x = 250;
});
});
render();
}, delayInMilliseconds);
</script>
</body>
</html>