<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);
// 交わるオブジェクトが１個以上の場合
if (intersects.length > 0) {
if (intersects[0].object.name == "球") {
window.open('./index.html')
} ;
console.log(intersects[0])
}
}
</script>
</body>
</html>
