Newer
Older
escapegame-2022 / tsubasa / blender_three.js / meno.txt
1.gltfLoaderからのmodelを配列に入れる (?)
以前、直接gltfmodelを使ってもできなかったような気がするため

ex)
const loader = new THREE.GLTFLoader();
loader.load( 'object_path または object_url' , function ( gltf ) {
    model = gltf.scene;

    var children = []

    gltf.scene.traverse( function ( child ) {
        if ( chile.isMesh ) {
            children.push ( child )
        }
    });

    scene.add ( model );
})

model位置が重なる可能性があるので、positionで設定する必要がある。

2.イベントリスナーの登録
mousemove 
touchdown もしくは cleck

3.raycasterを使用する。rayがオブジェクトを貫通するため
rayが一番最初にあたったオブジェクトだけを反応させるようにする。

ex)
if(intersects.length > 0) {
    if (intersects[0].object.neme == "#object_name") {
        実行する処理
    }
}


参考文献

create an array meshes from object ( three.js and gltf)
https://stackoverflow.com/questions/52068620/create-an-array-of-meshes-from-object-three-js-and-gltf

MeshStandardMaterial 
https://threejs.org/docs/#api/en/materials/MeshStandardMaterial.map

【Three.js】レイキャストに挑戦
https://blog.design-nkt.com/osyare-threejs27/

Raycaster
https://threejs.org/docs/#api/en/core/Raycaster