-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy path3D.js
More file actions
94 lines (79 loc) · 2.21 KB
/
3D.js
File metadata and controls
94 lines (79 loc) · 2.21 KB
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
var scene = new THREE.Scene();
let container = $("#scene-container");
var camera = new THREE.PerspectiveCamera(
60,
$(container).innerWidth() / $(container).innerHeight(),
1,
1000
);
camera.position.set(0, -32, 200);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize($(container).innerWidth(), $(container).innerHeight());
$(container).append(renderer.domElement);
var division = 40;
var limit = 200;
var grid = new THREE.GridHelper(limit * 2, division, "white", "white");
grid.translateY(-56);
var moveable = [];
for (let i = 0; i <= division; i++) {
moveable.push(1, 1, 0, 0); // move horizontal lines only (1 - point is moveable)
}
grid.geometry.addAttribute(
"moveable",
new THREE.BufferAttribute(new Uint8Array(moveable), 1)
);
grid.material = new THREE.ShaderMaterial({
uniforms: {
time: {
value: 0,
},
limits: {
value: new THREE.Vector2(-limit, limit),
},
speed: {
value: 5,
},
},
vertexShader: `
uniform float time;
uniform vec2 limits;
uniform float speed;
attribute float moveable;
varying vec3 vColor;
void main() {
vColor = color;
float limLen = limits.y - limits.x;
vec3 pos = position;
if (floor(moveable + 0.5) > 0.5){ // if a point has "moveable" attribute = 1
float dist = speed * time;
float currPos = mod((pos.z + dist) - limits.x, limLen) + limits.x;
pos.z = currPos;
}
gl_Position = projectionMatrix * modelViewMatrix * vec4(pos,1.0);
}
`,
fragmentShader: `
varying vec3 vColor;
void main() {
gl_FragColor = vec4(vColor, 1.);
}
`,
vertexColors: THREE.VertexColors,
});
scene.add(grid);
var clock = new THREE.Clock();
var time = 0;
render();
function render() {
requestAnimationFrame(render);
time += clock.getDelta();
grid.material.uniforms.time.value = time;
renderer.render(scene, camera);
}
window.addEventListener("resize", onWindowResize, false);
function onWindowResize() {
camera.aspect = $(container).innerWidth() / $(container).innerHeight();
camera.updateProjectionMatrix();
renderer.setSize($(container).innerWidth(), $(container).innerHeight());
}