three.jsでVRツアーを作成する

の続きです

Aframe や　panolens.js の方がレスポンシブルで使いやすいが
ビデオやcanvasと組み合わせ場合、複雑になるのでthree.jsから作った方が
デバッグしやすいと考えて、作成

参考

https://threejs.org/examples/webgl_panorama_equirectangular.html
https://threejs.org/examples/webgl_geometry_terrain_raycast.html　 の　function onPointerMove( event )

raycastで座標を取得

webgl_panorama_equirectangular.html を基に
変更

webgl_panorama_equirectangular.html

let mesh;
let group;
const raycaster = new THREE.Raycaster();
const pointer = new THREE.Vector2();
mesh = new THREE.Mesh( geometry, material );

webgl_geometry_terrain_raycast.html　 の　function onPointerMove( event ) を
onMouseDownへ変更して
追加

webgl_panorama_equirectangular.html

window.addEventListener( 'mousedown', onMouseDown );

            function onMouseDown( event ) {

                pointer.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
                pointer.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
                raycaster.setFromCamera( pointer, camera );

                // See if the ray from the camera into the world hits one of our meshes
                const intersects = raycaster.intersectObject( mesh,true );
                //const intersects = raycaster.intersectObject( group,true );

                // Toggle rotation bool for meshes that we clicked
                if ( intersects.length > 0 ) {
                    console.log( intersects[0].point.x + ", " + intersects[0].point.y + ", " + intersects[0].point.z );
                    console.log(intersects[0].object.name);
                }

            }

背景球を設置　少し小さくする

webgl_panorama_equirectangular.html

const geometry = new THREE.SphereGeometry( 500-50, 60, 40 );

console.logで配置したい座標を記録

記録した座標へspriteを配置

webgl_panorama_equirectangular.html

group = new THREE.Group();
const map = new THREE.TextureLoader().load( "info.png"  ); 
const material = new THREE.SpriteMaterial( { map: map, color: 0xffffff, depthWrite: false} );
const sprite = new THREE.Sprite( material );
sprite.name = "point1";
group.add( sprite );
sprite.position.set( 214.48695923481648, -50.46751981995689, -447.88923840211703);  
sprite.scale.set(100, 100, 1);
scene.add( group );

重なっているので背景球の大きさを戻す

webgl_panorama_equirectangular.html

const geometry = new THREE.SphereGeometry( 500, 60, 40 );

onMouseDownへクリック判定と別画像をロード 追加

webgl_panorama_equirectangular.html

//const intersects = raycaster.intersectObject( mesh,true );
const intersects = raycaster.intersectObject( group,true );

if (intersects[0].object.name=="point1"){
var material = mesh.material;
material.map = new THREE.TextureLoader().load( './r2.jpg' );
material.map.needsUpdate = true;
}

ブラウザで確認