Skip to content

Commit 407bfb9

Browse files
cx20cx20
authored
Merge pull request #457 from cx20/add_threejs_lissajous_sample
Added three.js samples
2 parents efa9f8f + 57d6e48 commit 407bfb9

File tree

4 files changed

+550
-0
lines changed

4 files changed

+550
-0
lines changed

‎html5/threejs/3-1.lissajous.html

+125
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Lissajous curve Using Three.js</title>
5+
<link rel="stylesheet" type="text/css" href="style.css">
6+
</head>
7+
<body>
8+
9+
<script type="importmap">
10+
{
11+
"imports": {
12+
"three": "https://cx20.github.io/gltf-test/libs/three.js/r174/build/three.module.js",
13+
"three/examples/jsm/": "https://cx20.github.io/gltf-test/libs/three.js/r174/examples/jsm/"
14+
}
15+
}
16+
</script>
17+
18+
<script id="vs" type="x-shader/x-vertex">
19+
attribute vec3 position;
20+
attribute vec4 color;
21+
varying vec4 vColor;
22+
uniform mat4 modelViewMatrix;
23+
uniform mat4 projectionMatrix;
24+
25+
void main() {
26+
vColor = color;
27+
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
28+
}
29+
</script>
30+
31+
<script id="fs" type="x-shader/x-fragment">
32+
precision mediump float;
33+
varying vec4 vColor;
34+
35+
void main() {
36+
gl_FragColor = vColor;
37+
}
38+
</script>
39+
40+
<div id="container"></div>
41+
42+
<script type="module">
43+
import * as THREE from 'three';
44+
45+
let container;
46+
let camera, scene, renderer;
47+
let mesh;
48+
49+
init();
50+
animate();
51+
52+
function init() {
53+
container = document.getElementById('container');
54+
55+
// シーンの作成
56+
scene = new THREE.Scene();
57+
scene.background = new THREE.Color(0x000000);
58+
59+
// カメラの作成
60+
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);
61+
camera.position.z = 3;
62+
63+
// リサージュ曲線の頂点データを生成
64+
const MAX = 72;
65+
const A = 2.0;
66+
const B = 3.0;
67+
68+
let positions = [];
69+
let colors = [];
70+
let indices = [];
71+
72+
for (let i = 0; i <= MAX; i++) {
73+
let x = 0.5 * Math.cos(2 * Math.PI * i / MAX * A);
74+
let y = 0.5 * Math.sin(2 * Math.PI * i / MAX * B);
75+
let z = 0.5 * Math.sin(2 * Math.PI * i / MAX * A);
76+
77+
let r = x + 0.5;
78+
let g = y + 0.5;
79+
let b = z + 0.5;
80+
81+
positions.push(x, y, z);
82+
colors.push(r, g, b, 1.0);
83+
indices.push(i);
84+
}
85+
86+
let geometry = new THREE.BufferGeometry();
87+
geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
88+
geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 4));
89+
geometry.setIndex(indices);
90+
91+
let material = new THREE.RawShaderMaterial({
92+
vertexShader: document.getElementById('vs').textContent,
93+
fragmentShader: document.getElementById('fs').textContent,
94+
vertexColors: true
95+
});
96+
97+
mesh = new THREE.Line(geometry, material);
98+
scene.add(mesh);
99+
100+
renderer = new THREE.WebGLRenderer({ antialias: true });
101+
renderer.setSize(window.innerWidth, window.innerHeight);
102+
container.appendChild(renderer.domElement);
103+
104+
window.addEventListener('resize', onWindowResize);
105+
}
106+
107+
function onWindowResize() {
108+
camera.aspect = window.innerWidth / window.innerHeight;
109+
camera.updateProjectionMatrix();
110+
renderer.setSize(window.innerWidth, window.innerHeight);
111+
}
112+
113+
function animate() {
114+
requestAnimationFrame(animate);
115+
116+
mesh.rotation.y -= Math.PI * 1.0 / 180.0;
117+
118+
renderer.render(scene, camera);
119+
}
120+
</script>
121+
122+
<a href="https://github.com/cx20/hello/blob/master/html5/threejs/3-1.lissajous.html" target="_blank">View Source</a>
123+
124+
</body>
125+
</html>

‎html5/threejs/3-2.3d_lissajous.html

+128
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>3D Lissajous curve Using Three.js</title>
5+
<link rel="stylesheet" type="text/css" href="style.css">
6+
</head>
7+
<body>
8+
9+
<script type="importmap">
10+
{
11+
"imports": {
12+
"three": "https://cx20.github.io/gltf-test/libs/three.js/r174/build/three.module.js",
13+
"three/examples/jsm/": "https://cx20.github.io/gltf-test/libs/three.js/r174/examples/jsm/"
14+
}
15+
}
16+
</script>
17+
18+
<script id="vs" type="x-shader/x-vertex">
19+
attribute vec3 position;
20+
attribute vec4 color;
21+
varying vec4 vColor;
22+
uniform mat4 modelViewMatrix;
23+
uniform mat4 projectionMatrix;
24+
25+
void main() {
26+
vColor = color;
27+
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
28+
}
29+
</script>
30+
31+
<script id="fs" type="x-shader/x-fragment">
32+
precision mediump float;
33+
varying vec4 vColor;
34+
35+
void main() {
36+
gl_FragColor = vColor;
37+
}
38+
</script>
39+
40+
<div id="container"></div>
41+
42+
<script type="module">
43+
import * as THREE from 'three';
44+
45+
let container;
46+
let camera, scene, renderer;
47+
let mesh;
48+
49+
init();
50+
animate();
51+
52+
function init() {
53+
container = document.getElementById('container');
54+
55+
scene = new THREE.Scene();
56+
scene.background = new THREE.Color(0x000000);
57+
58+
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);
59+
camera.position.z = 3;
60+
61+
const MAX = 360;
62+
const A = 100.0;
63+
const B = 99.0;
64+
const C = 1.0;
65+
const alpha = Math.PI/4;
66+
const beta = Math.PI/3;
67+
const gamma = 0; // Math.PI/2;
68+
69+
let positions = [];
70+
let colors = [];
71+
let indices = [];
72+
73+
let index = 0;
74+
for (let i = 0; i <= MAX; i += 0.1) {
75+
let x = 0.5 * Math.sin(2 * Math.PI * i / MAX * A + alpha);
76+
let y = 0.5 * Math.sin(2 * Math.PI * i / MAX * B + beta);
77+
let z = 0.5 * Math.sin(2 * Math.PI * i / MAX * C + gamma);
78+
79+
let r = x + 0.5;
80+
let g = y + 0.5;
81+
let b = z + 0.5;
82+
83+
positions.push(x, y, z);
84+
colors.push(r, g, b, 1.0);
85+
indices.push(index);
86+
index++;
87+
}
88+
89+
let geometry = new THREE.BufferGeometry();
90+
geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
91+
geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 4));
92+
geometry.setIndex(indices);
93+
94+
let material = new THREE.RawShaderMaterial({
95+
vertexShader: document.getElementById('vs').textContent,
96+
fragmentShader: document.getElementById('fs').textContent,
97+
vertexColors: true
98+
});
99+
100+
mesh = new THREE.Line(geometry, material);
101+
scene.add(mesh);
102+
103+
renderer = new THREE.WebGLRenderer({ antialias: true });
104+
renderer.setSize(window.innerWidth, window.innerHeight);
105+
container.appendChild(renderer.domElement);
106+
107+
window.addEventListener('resize', onWindowResize);
108+
}
109+
110+
function onWindowResize() {
111+
camera.aspect = window.innerWidth / window.innerHeight;
112+
camera.updateProjectionMatrix();
113+
renderer.setSize(window.innerWidth, window.innerHeight);
114+
}
115+
116+
function animate() {
117+
requestAnimationFrame(animate);
118+
119+
mesh.rotation.y -= Math.PI * 1.0 / 180.0;
120+
121+
renderer.render(scene, camera);
122+
}
123+
</script>
124+
125+
<a href="https://github.com/cx20/hello/blob/master/html5/threejs/3-2.3d_lissajous.html" target="_blank">View Source</a>
126+
127+
</body>
128+
</html>

0 commit comments

Comments
 (0)