<html> <head> <title>escapegame-20222</title> <style> body { margin: 0; overflow: hidden; } </style> </head> <body> <script src="./three.min.js"></script> <script src="./GLTFLoader.js"></script> <script src="./OrbitControls.js"></script> <script> // シーンの作成 var scene = new THREE.Scene(); // カメラの作成 var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(50, 0, 60); // レンダラーの作成 var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); renderer.physicallyCorrectLight = true document.body.appendChild(renderer.domElement); // カメラコントローラー var controls = new THREE.OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.2; //回転の滑らかさ // オブジェクト var loader = new THREE.GLTFLoader(); loader.load('tohokukoeki_univ.glb', function(gltf) { model = gltf.scene; model.position.set(10,-10,10); scene.add(model); console.log(model) }); loader.load('ball.glb', function(gltf) { model = gltf.scene; scene.add(model); console.log(model) }); var animate = function () { requestAnimationFrame(animate); renderer.render(scene, camera); }; animate(); // クリックイベント document.addEventListener('click', myOnClick, false); // clickしたら呼ばれる function myOnClick(event) { var raycaster = new THREE.Raycaster(); var mouse = new THREE.Vector2(); // マウスポインタの位置座標の取得 mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1; mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1; // 光線を発射 raycaster.setFromCamera(mouse, camera); // 光線と交わるオブジェクトを収集 var intersects = raycaster.intersectObjects(scene.children, true); // 交わるオブジェクトが1個以上の場合 if (intersects.length > 0) { if (intersects[0].object.name == "球") { window.open('./index.html') } ; console.log(intersects[0]) } } </script> </body> </html>