diff --git a/tsubasa/blender_three.js/game.html b/tsubasa/blender_three.js/game.html
index 17ddba6..3ab03f8 100644
--- a/tsubasa/blender_three.js/game.html
+++ b/tsubasa/blender_three.js/game.html
@@ -19,7 +19,7 @@
var scene = new THREE.Scene();
// カメラの作成
- var camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000);
+ var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(50, 0, 60);
// レンダラーの作成
diff --git a/tsubasa/blender_three.js/index.html b/tsubasa/blender_three.js/index.html
index 51bf240..3edf0f1 100644
--- a/tsubasa/blender_three.js/index.html
+++ b/tsubasa/blender_three.js/index.html
@@ -45,10 +45,10 @@
controls.enableDamping = true;
controls.dampingFactor = 0.2; //回転の滑らかさ
- //光源
- const dirLight = new THREE.SpotLight(0xffffff,1.2);//color,強度
- dirLight.position.set(10, 10, 20); // 光源の位置
- scene.add(dirLight);
+ // //光源
+ // const dirLight = new THREE.SpotLight(0xffffff,1.2);//color,強度
+ // dirLight.position.set(10, 10, 20); // 光源の位置
+ // scene.add(dirLight);
//レンダラー
renderer = new THREE.WebGLRenderer({
@@ -56,6 +56,7 @@
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
+ renderer.physicallyCorrectLight = true
//glbファイルの読み込み
const loader = new GLTFLoader();
@@ -68,13 +69,15 @@
object.material.opacity = 0.8;//透過
}})
scene.add(model);
- }, undefined, function(e) {
- console.error(e);
+ });
+ loader.load('ball.glb', function(gltf) {
+ model = gltf.scene;
+ scene.add(model);
+ model.position.set(0, -10, 0);
});
document.getElementById("WebGL-output").appendChild(renderer.domElement);
-
}
const mouse = new THREE.Vector2();
@@ -82,11 +85,32 @@
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
- window.addEventListener('mousemove', function(e) {
- mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
- mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
- console.log(mouse);
- });
+ };
+
+ // クリックイベント
+ document.addEventListener('click', OnClick, false);
+
+ // クリックしたら呼ばれる
+ function OnClick(event) {
+ const raycaster = new THREE.Raycaster();
+ const mouse = new THREE.Vector2();
+
+ // マウスポインタの位置情報の取得
+ mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+ mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
+
+ // 光線を発射
+ raycaster.setFromCamera(mouse, camera);
+ // 光線と交わるオブジェクトを収集
+ const intersects = raycaster.intersectObjects(scene.children, true);
+
+ // 交わるオブジェクトが1個以上の場合
+ if (intersects.length > 0) {
+ if (intersects[0].object.name == "球") {
+ window.open('./game.html')
+ };
+ console.log(intersects[0])
+ }
}