diff --git a/system/css/cross.css b/system/css/cross.css
index 578113c..d876888 100644
--- a/system/css/cross.css
+++ b/system/css/cross.css
@@ -14,7 +14,7 @@
.line {
position: absolute;
- background-color: black;
+ background-color: white;
}
.horizontal-line {
diff --git a/system/css/dot.css b/system/css/dot.css
index 70aed05..7e864d3 100644
--- a/system/css/dot.css
+++ b/system/css/dot.css
@@ -1,14 +1,23 @@
body {
- display: flex;
- justify-content: center;
- align-items: center;
- height: 100vh;
margin: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ background-color: #f0f0f0;
}
-.dot {
- width: 100px;
- height: 100px;
- background-color: white;
+#WebGL-output {
+ position: relative;
+}
+
+.point {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 10px;
+ height: 10px;
+ background-color: rgba(255, 255, 255, 0.65);
border-radius: 50%;
}
\ No newline at end of file
diff --git a/system/system.html b/system/system.html
index baaf5ff..201daf5 100644
--- a/system/system.html
+++ b/system/system.html
@@ -1,247 +1,239 @@
+
+
+
+
+ Document
+
+
-
-
-
-
- Document
-
-
-
+
+
+
-
-
-
+
-
+ function updateCameraPosition() {
+ const speed = 10; // 移動速度
+ const direction = new THREE.Vector3();
+ const { x, y, z } = controls.getObject().position;
+ direction.x = Number(moveRight) - Number(moveLeft);
+ direction.z = Number(moveBackward) - Number(moveForward);
+ direction.normalize();
+ const delta = speed * 0.1; // 移動距離
+ controls.getObject().translateX(direction.x * delta);
+ controls.getObject().translateZ(direction.z * delta);
+ }
-
\ No newline at end of file
+ // 再生の切り替え
+ let flag = false;
+ function clickStartStop() {
+ if (flag == false) {
+ video.pause();
+ positionalAudio.pause();
+ flag = true;
+ } else {
+ video.play();
+ positionalAudio.play();
+ flag = false;
+ }
+ }
+
+ document.addEventListener("click", OnClick);
+
+ // クリックしたら呼ばれる
+ function OnClick(event) {
+ event.preventDefault();
+ const raycaster = new THREE.Raycaster();
+ const mouse = new THREE.Vector2();
+ // マウスポインタの位置情報の取得
+ mouse.x = 0;
+ mouse.y = 0;
+ // 光線を発射
+ raycaster.setFromCamera(mouse, camera);
+ // 光線と交わるオブジェクトを収集
+ const intersects = raycaster.intersectObjects(scene.children, true);
+ // 交わるオブジェクトが1個以上の場合
+ if (intersects.length > 0) {
+ if (intersects[0].object.name == "video1") {
+ clickStartStop();
+ }
+ console.log(intersects[0]);
+ }
+ }
+
+ // 関数の実行
+ init();
+ animate();
+
+
+