58 Three.js 通过THREE.Raycaster给模型绑定点击事件

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_30100043/article/details/79054862

简介

由于浏览器是一个2d视口,而在里面显示three.js的内容是3d场景,所以,现在有一个问题就是如何将2d视口的xy坐标转换成three.js场景中的3d坐标。好在three.js已经有了解决相关问题的方案,那就是THREE.Raycaster射线,用于鼠标拾取(计算出鼠标移过的三维空间中的对象)等等。我们看一张图片:
这里写图片描述
这张图片偷自:https://segmentfault.com/a/1190000010490845
我们一般都会设置三维场景的显示区域,如果,指明当前显示的2d坐标给THREE.Raycaster的话,它将生成一条从显示的起点到终点的一条射线。也就是说,我们再屏幕上点击了一个点,在three.js里面获取的则是一条直线。

THREE.Raycaster构造函数和对象方法

实例化

new Raycaster( origin, direction, near, far );

origin — 光线投射的起点向量。
direction — 光线投射的方向向量,应该是被归一化的。
near — 投射近点,用来限定返回比near要远的结果。near不能为负数。缺省为0。
far — 投射远点,用来限定返回比far要近的结果。far不能比near要小。缺省为无穷大。

方法

setFromCamera

用一个新的原点和方向向量来更新射线(ray)。

.setFromCamera ( coords, camera )

coords — 鼠标的二维坐标,在归一化的设备坐标(NDC)中,也就是X 和 Y 分量应该介于 -1 和 1 之间。
camera — 射线起点处的相机,即把射线起点设置在该相机位置处。

intersectObject

检查射线和物体之间的所有交叉点(包含或不包含后代)。交叉点返回按距离排序,最接近的为第一个。 返回一个交叉点对象数组。

.intersectObject ( object, recursive )

object — 用来检测和射线相交的物体。
recursive — 如果为true,它还检查所有后代。否则只检查该对象本身。缺省值为false。

返回数组每一个对象的内容
[ { distance, point, face, faceIndex, indices, object }, ... ]

distance – 射线的起点到相交点的距离
point – 在世界坐标中的交叉点
face – 相交的面
faceIndex – 相交的面的索引
indices – 组成相交面的顶点索引
object – 相交的对象

当一个网孔(Mesh)对象和一个缓存几何模型(BufferGeometry)相交时,faceIndex 将是 undefined,并且 indices 将被设置; 而当一个网孔(Mesh)对象和一个几何模型(Geometry)相交时,indices 将是 undefined。

当计算这个对象是否和射线相交时,Raycaster 把传递的对象委托给 raycast 方法。 这允许 meshes 对于光线投射的响应可以不同于 lines 和 pointclouds。

注意,对于网格,面(faces)必须朝向射线原点,这样才能被检测到;通过背面的射线的交叉点将不被检测到。 为了光线投射一个对象的正反两面,你得设置 material 的 side 属性为 THREE.DoubleSide。

点击事件实现案例

//声明raycaster和mouse变量
    var raycaster = new THREE.Raycaster();
    var mouse = new THREE.Vector2();

    function onMouseClick( event ) {

        //通过鼠标点击的位置计算出raycaster所需要的点的位置,以屏幕中心为原点,值的范围为-1到1.

        mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
        mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

        // 通过鼠标点的位置和当前相机的矩阵计算出raycaster
        raycaster.setFromCamera( mouse, camera );

        // 获取raycaster直线和所有模型相交的数组集合
        var intersects = raycaster.intersectObjects( scene.children );

        console.log(intersects);

        //将所有的相交的模型的颜色设置为红色,如果只需要将第一个触发事件,那就数组的第一个模型改变颜色即可
        for ( var i = 0; i < intersects.length; i++ ) {

            intersects[ i ].object.material.color.set( 0xff0000 );

        }

    }

    window.addEventListener( 'click', onMouseClick, false );

思路:先通过当前点击位置的坐标和相机计算出raycaster线,然后计算出相交的所有模型,修改模型的纹理。

案例代码

这里写图片描述

查看案例效果:http://www.wjceo.com/blog/threejs/2018-02-13/60.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        html, body {
            margin: 0;
            height: 100%;
        }

        canvas {
            display: block;
        }

    </style>
</head>
<body onload="draw();">

</body>
<script src="https://johnson2heng.github.io/three.js-demo/lib/three.js"></script>
<script src="https://johnson2heng.github.io/three.js-demo/lib/js/controls/OrbitControls.js"></script>
<script src="https://johnson2heng.github.io/three.js-demo/lib/js/libs/stats.min.js"></script>
<script src="https://johnson2heng.github.io/three.js-demo/lib/js/libs/dat.gui.min.js"></script>
<script>
    var renderer;

    function initRender() {
        renderer = new THREE.WebGLRenderer({antialias: true,alpha:true});
        renderer.setSize(window.innerWidth, window.innerHeight);
        //告诉渲染器需要阴影效果
        //renderer.shadowMap.enabled = true;
        //renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 默认的是,没有设置的这个清晰 THREE.PCFShadowMap
        renderer.setClearColor(0xffffff);
        document.body.appendChild(renderer.domElement);
    }

    var camera;

    function initCamera() {
        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(0, 40, 100);
        camera.lookAt(new THREE.Vector3(0, 0, 0));
    }

    var scene;

    function initScene() {
        scene = new THREE.Scene();
    }

    function initLight() {

    }

    function initModel() {

        //辅助工具
        var helper = new THREE.AxesHelper(10);
        scene.add(helper);

        var s = 25;

        var cube = new THREE.CubeGeometry(s, s, s);

        for (var i = 0; i < 3000; i++) {

            var material = new THREE.MeshBasicMaterial({color:randomColor()});

            var mesh = new THREE.Mesh(cube, material);

            mesh.position.x = 800 * ( 2.0 * Math.random() - 1.0 );
            mesh.position.y = 800 * ( 2.0 * Math.random() - 1.0 );
            mesh.position.z = 800 * ( 2.0 * Math.random() - 1.0 );

            mesh.rotation.x = Math.random() * Math.PI;
            mesh.rotation.y = Math.random() * Math.PI;
            mesh.rotation.z = Math.random() * Math.PI;

            mesh.updateMatrix();

            scene.add(mesh);

        }

    }

    //随机生成颜色
    function randomColor() {
        var arrHex = ["0","1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d","e","f"],
            strHex = "#",
            index;
        for(var i = 0; i < 6; i++) {
            index = Math.round(Math.random() * 15);
            strHex += arrHex[index];
        }
        return strHex;
    }

    //声明raycaster和mouse变量
    var raycaster = new THREE.Raycaster();
    var mouse = new THREE.Vector2();

    function onMouseClick( event ) {

        //通过鼠标点击的位置计算出raycaster所需要的点的位置,以屏幕中心为原点,值的范围为-1到1.

        mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
        mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

        // 通过鼠标点的位置和当前相机的矩阵计算出raycaster
        raycaster.setFromCamera( mouse, camera );

        // 获取raycaster直线和所有模型相交的数组集合
        var intersects = raycaster.intersectObjects( scene.children );

        console.log(intersects);

        //将所有的相交的模型的颜色设置为红色,如果只需要将第一个触发事件,那就数组的第一个模型改变颜色即可
        for ( var i = 0; i < intersects.length; i++ ) {

            intersects[ i ].object.material.color.set( 0xff0000 );

        }

    }

    window.addEventListener( 'click', onMouseClick, false );

    //初始化dat.GUI简化试验流程
    var gui;

    function initGui() {
        //声明一个保存需求修改的相关数据的对象
        controls = {

        };

        var gui = new dat.GUI();

    }

    //初始化性能插件
    var stats;

    function initStats() {
        stats = new Stats();
        document.body.appendChild(stats.dom);
    }

    //用户交互插件 鼠标左键按住旋转,右键按住平移,滚轮缩放
    var controls;

    function initControls() {

        controls = new THREE.OrbitControls(camera, renderer.domElement);

        // 如果使用animate方法时,将此函数删除
        //controls.addEventListener( 'change', render );
        // 使动画循环使用时阻尼或自转 意思是否有惯性
        controls.enableDamping = true;
        //动态阻尼系数 就是鼠标拖拽旋转灵敏度
        //controls.dampingFactor = 0.25;
        //是否可以缩放
        controls.enableZoom = true;
        //是否自动旋转
        controls.autoRotate = false;
        //设置相机距离原点的最远距离
        controls.minDistance = 50;
        //设置相机距离原点的最远距离
        controls.maxDistance = 200;
        //是否开启右键拖拽
        controls.enablePan = true;
    }

    function render() {
        renderer.render(scene, camera);
    }

    //窗口变动触发的函数
    function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        render();
        renderer.setSize(window.innerWidth, window.innerHeight);

    }

    function animate() {
        //更新控制器
        render();

        //更新性能插件
        stats.update();

        //controls.update();

        requestAnimationFrame(animate);
    }

    function draw() {
        initRender();
        initScene();
        initCamera();
        initLight();
        initModel();
        initGui();
        initControls();
        initStats();

        animate();
        window.onresize = onWindowResize;
    }
</script>
</html>
阅读更多 登录后自动展开

扫码向博主提问

专注前端30年

非学,无以致疑;非问,无以广识
  • 擅长领域:
  • 前端开发
  • 原生js
  • Three.js
  • webgl
去开通我的Chat快问
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页