threejs 点击物体射线检测碰撞

threejs 点击物体射线检测碰撞

 

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style>
    canvas {
        width: 100%;
        height: 100%
    }
    </style>
    <script src="/moban/js/three.js"></script>
</head>

<body>
    <script>
             document.addEventListener('mousedown', onDocumentMouseDown, false); 
            function onDocumentMouseDown(e) {
    e.preventDefault();
    var mouse={};
    //将鼠标点击位置的屏幕坐标转成threejs中的标准坐标,具体解释见代码释义
    mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
    //新建一个三维单位向量 假设z方向就是0.5
    //根据照相机，把这个向量转换到视点坐标系
      var vector = new THREE.Vector3(mouse.x, mouse.y,0.5).unproject(camera);

    //在视点坐标系中形成射线,射线的起点向量是照相机， 射线的方向向量是照相机到点击的点，这个向量应该归一标准化。
    var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());

    //射线和模型求交，选中一系列直线
    var intersects = raycaster.intersectObjects(scene.children);
    console.log('imtersrcts=' + intersects)

    if (intersects.length > 0) {
        //选中第一个射线相交的物体
        SELECTED = intersects[0].object;
        var intersected = intersects[0].object;
        console.log(intersects[0].object)
    }


}
    var camera, scene, renderer;
    var mesh;
var geometry;
    init();
    animate();

    function init() {

        renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        //
        camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
        camera.position.x = 0;
        camera.position.y = 0;
        camera.position.z = 500;
        scene = new THREE.Scene();


       geometry = new THREE.PlaneGeometry(100, 100, 1, 1);
        // A begin
        geometry.vertices[0].uv = new THREE.Vector2(0, 0);
        geometry.vertices[1].uv = new THREE.Vector2(1, 0);
        geometry.vertices[2].uv = new THREE.Vector2(1, 1);
        geometry.vertices[3].uv = new THREE.Vector2(0, 1);

        // A end
        // B begin
        // 纹理坐标怎么弄
        var texture1 = THREE.ImageUtils.loadTexture("/moban/images/tietu.png", null, function(t) {});
        var material = new THREE.MeshBasicMaterial({ map: texture1 });
        mesh = new THREE.Mesh(geometry, material);
        mesh.position.z = 0;
        mesh.position.x = 0;
        mesh.position.y = 0;
        mesh.rotation.x = 0;
        mesh.rotation.y = 0;
        mesh.rotation.z = 0;
        scene.add(mesh);
     /*   var mesh1 = new THREE.Mesh(geometry, material);
        mesh1.position.z = -200;
        mesh1.position.x = 100;
        mesh1.position.y = -60;
        scene.add(mesh1);*/
        // B end
        // window.addEventListener('resize', onWindowResize, false);
    }

    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    }

    function animate() {
      
        requestAnimationFrame(animate);
         // camera.position.z-=1;
        renderer.render(scene, camera);
    
    }
    </script>
</body>

</html>

 

posted @ 2021-05-07 10:59  newmiracle宇宙  阅读(1285)  评论(0)  编辑  收藏  举报