Skip to content

Commit 0bd26d6

Browse files
ics-ikedaics-ikeda
committed
フォーマッターprettierの導入
1 parent 55b3a8c commit 0bd26d6

49 files changed

Lines changed: 3425 additions & 3405 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,3 +18,4 @@ html-build/typescript/main.js.map
1818
/samples/package-lock.json
1919
/samples/package.json
2020
/Icon
21+
/samples/yarn.lock

‎samples/camera_basic.html‎

Lines changed: 55 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,57 @@
1-
21
<html>
3-
<head>
4-
<meta charset="utf-8"/>
5-
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>
6-
<script>
7-
// ページの読み込みを待つ
8-
window.addEventListener('load', init);
9-
10-
function init() {
11-
// サイズを指定
12-
const width = 960;
13-
const height = 540;
14-
let rot = 0;
15-
16-
// レンダラーを作成
17-
const renderer = new THREE.WebGLRenderer({
18-
canvas: document.querySelector('#myCanvas'),
19-
});
20-
renderer.setSize(width, height);
21-
22-
// シーンを作成
23-
const scene = new THREE.Scene();
24-
25-
// カメラを作成
26-
const camera = new THREE.PerspectiveCamera(45, width / height);
27-
28-
// 直方体を作成
29-
const material = new THREE.MeshNormalMaterial({wireframe: true});
30-
const geometry = new THREE.SphereGeometry(300, 30, 30);
31-
const mesh = new THREE.Mesh(geometry, material);
32-
scene.add(mesh);
33-
34-
tick();
35-
36-
// 毎フレーム時に実行されるループイベントです
37-
function tick() {
38-
rot += 0.5; // 毎フレーム角度を0.5度ずつ足していく
39-
// ラジアンに変換する
40-
const radian = rot * Math.PI / 180;
41-
// 角度に応じてカメラの位置を設定
42-
camera.position.x = 1000 * Math.sin(radian);
43-
camera.position.z = 1000 * Math.cos(radian);
44-
// 原点方向を見つめる
45-
camera.lookAt(new THREE.Vector3(0, 0, 0));
46-
47-
// レンダリング
48-
renderer.render(scene, camera);
49-
50-
requestAnimationFrame(tick);
2+
<head>
3+
<meta charset="utf-8" />
4+
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>
5+
<script>
6+
// ページの読み込みを待つ
7+
window.addEventListener('load', init);
8+
9+
function init() {
10+
// サイズを指定
11+
const width = 960;
12+
const height = 540;
13+
let rot = 0;
14+
15+
// レンダラーを作成
16+
const renderer = new THREE.WebGLRenderer({
17+
canvas: document.querySelector('#myCanvas')
18+
});
19+
renderer.setSize(width, height);
20+
21+
// シーンを作成
22+
const scene = new THREE.Scene();
23+
24+
// カメラを作成
25+
const camera = new THREE.PerspectiveCamera(45, width / height);
26+
27+
// 直方体を作成
28+
const material = new THREE.MeshNormalMaterial({ wireframe: true });
29+
const geometry = new THREE.SphereGeometry(300, 30, 30);
30+
const mesh = new THREE.Mesh(geometry, material);
31+
scene.add(mesh);
32+
33+
tick();
34+
35+
// 毎フレーム時に実行されるループイベントです
36+
function tick() {
37+
rot += 0.5; // 毎フレーム角度を0.5度ずつ足していく
38+
// ラジアンに変換する
39+
const radian = (rot * Math.PI) / 180;
40+
// 角度に応じてカメラの位置を設定
41+
camera.position.x = 1000 * Math.sin(radian);
42+
camera.position.z = 1000 * Math.cos(radian);
43+
// 原点方向を見つめる
44+
camera.lookAt(new THREE.Vector3(0, 0, 0));
45+
46+
// レンダリング
47+
renderer.render(scene, camera);
48+
49+
requestAnimationFrame(tick);
50+
}
5151
}
52-
}
53-
</script>
54-
</head>
55-
<body>
56-
<canvas id="myCanvas"></canvas>
57-
</body>
58-
</html>
52+
</script>
53+
</head>
54+
<body>
55+
<canvas id="myCanvas"></canvas>
56+
</body>
57+
</html>

‎samples/camera_basic_earth.html‎

Lines changed: 79 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,95 @@
11
<html>
2-
<head>
3-
<meta charset="utf-8"/>
4-
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>
5-
<script>
6-
// ページの読み込みを待つ
7-
window.addEventListener('load', init);
2+
<head>
3+
<meta charset="utf-8" />
4+
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>
5+
<script>
6+
// ページの読み込みを待つ
7+
window.addEventListener('load', init);
88

9-
function init() {
10-
// サイズを指定
11-
const width = 960;
12-
const height = 540;
13-
let rot = 0;
9+
function init() {
10+
// サイズを指定
11+
const width = 960;
12+
const height = 540;
13+
let rot = 0;
1414

15-
// レンダラーを作成
16-
const renderer = new THREE.WebGLRenderer({
17-
canvas: document.querySelector('#myCanvas'),
18-
});
19-
renderer.setSize(width, height);
15+
// レンダラーを作成
16+
const renderer = new THREE.WebGLRenderer({
17+
canvas: document.querySelector('#myCanvas')
18+
});
19+
renderer.setSize(width, height);
2020

21-
// シーンを作成
22-
const scene = new THREE.Scene();
21+
// シーンを作成
22+
const scene = new THREE.Scene();
2323

24-
// カメラを作成
25-
const camera = new THREE.PerspectiveCamera(45, width / height);
24+
// カメラを作成
25+
const camera = new THREE.PerspectiveCamera(45, width / height);
2626

27-
// 平行光源を作成
28-
const directionalLight = new THREE.DirectionalLight(0xFFFFFF);
29-
directionalLight.position.set(1, 1, 1);
30-
scene.add(directionalLight);
27+
// 平行光源を作成
28+
const directionalLight = new THREE.DirectionalLight(0xffffff);
29+
directionalLight.position.set(1, 1, 1);
30+
scene.add(directionalLight);
3131

32-
// マテリアルを作成
33-
const material = new THREE.MeshStandardMaterial({
34-
map: new THREE.TextureLoader().load('imgs/earthmap1k.jpg'),
35-
side: THREE.DoubleSide,
36-
});
32+
// マテリアルを作成
33+
const material = new THREE.MeshStandardMaterial({
34+
map: new THREE.TextureLoader().load('imgs/earthmap1k.jpg'),
35+
side: THREE.DoubleSide
36+
});
3737

38-
// 球体の形状を作成します
39-
const geometry = new THREE.SphereGeometry(300, 30, 30);
40-
// 形状とマテリアルからメッシュを作成します
41-
const earthMesh = new THREE.Mesh(geometry, material);
42-
// シーンにメッシュを追加します
43-
scene.add(earthMesh);
38+
// 球体の形状を作成します
39+
const geometry = new THREE.SphereGeometry(300, 30, 30);
40+
// 形状とマテリアルからメッシュを作成します
41+
const earthMesh = new THREE.Mesh(geometry, material);
42+
// シーンにメッシュを追加します
43+
scene.add(earthMesh);
4444

45-
// 星屑を作成します (カメラの動きをわかりやすくするため)
46-
createStarField();
45+
// 星屑を作成します (カメラの動きをわかりやすくするため)
46+
createStarField();
4747

48-
function createStarField() {
49-
// 形状データを作成
50-
const geometry = new THREE.Geometry();
51-
for (let i = 0; i < 1000; i++) {
52-
geometry.vertices.push(new THREE.Vector3(
53-
3000 * (Math.random() - 0.5),
54-
3000 * (Math.random() - 0.5),
55-
3000 * (Math.random() - 0.5),
56-
));
57-
}
58-
// マテリアルを作成
59-
const material = new THREE.PointsMaterial({
60-
size: 10,
61-
color: 0xFFFFFF,
62-
});
48+
function createStarField() {
49+
// 形状データを作成
50+
const geometry = new THREE.Geometry();
51+
for (let i = 0; i < 1000; i++) {
52+
geometry.vertices.push(
53+
new THREE.Vector3(
54+
3000 * (Math.random() - 0.5),
55+
3000 * (Math.random() - 0.5),
56+
3000 * (Math.random() - 0.5)
57+
)
58+
);
59+
}
60+
// マテリアルを作成
61+
const material = new THREE.PointsMaterial({
62+
size: 10,
63+
color: 0xffffff
64+
});
6365

64-
// 物体を作成
65-
const mesh = new THREE.Points(geometry, material);
66-
scene.add(mesh);
67-
}
66+
// 物体を作成
67+
const mesh = new THREE.Points(geometry, material);
68+
scene.add(mesh);
69+
}
6870

69-
tick();
71+
tick();
7072

71-
// 毎フレーム時に実行されるループイベントです
72-
function tick() {
73-
rot += 0.5; // 毎フレーム角度を0.5度ずつ足していく
74-
// ラジアンに変換する
75-
const radian = rot * Math.PI / 180;
76-
// 角度に応じてカメラの位置を設定
77-
camera.position.x = 1000 * Math.sin(radian);
78-
camera.position.z = 1000 * Math.cos(radian);
79-
// 原点方向を見つめる
80-
camera.lookAt(new THREE.Vector3(0, 0, 0));
73+
// 毎フレーム時に実行されるループイベントです
74+
function tick() {
75+
rot += 0.5; // 毎フレーム角度を0.5度ずつ足していく
76+
// ラジアンに変換する
77+
const radian = (rot * Math.PI) / 180;
78+
// 角度に応じてカメラの位置を設定
79+
camera.position.x = 1000 * Math.sin(radian);
80+
camera.position.z = 1000 * Math.cos(radian);
81+
// 原点方向を見つめる
82+
camera.lookAt(new THREE.Vector3(0, 0, 0));
8183

82-
// レンダリング
83-
renderer.render(scene, camera);
84+
// レンダリング
85+
renderer.render(scene, camera);
8486

85-
requestAnimationFrame(tick);
87+
requestAnimationFrame(tick);
88+
}
8689
}
87-
}
88-
</script>
89-
</head>
90-
<body>
91-
<canvas id="myCanvas"></canvas>
92-
</body>
93-
</html>
90+
</script>
91+
</head>
92+
<body>
93+
<canvas id="myCanvas"></canvas>
94+
</body>
95+
</html>

0 commit comments

Comments
 (0)