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

2018-02-13 11:51:59 人阅读

案例查看有问题?
全屏试试!

案例解析

 

简介

由于浏览器是一个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 );
  • 1

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

方法

setFromCamera

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

.setFromCamera ( coords, camera )
  • 1

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

intersectObject

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

.intersectObject ( object, recursive )
  • 1

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

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

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 );
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

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

案例源代码


                        

 

<!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="/lib/three.js"></script>

<script src="/lib/js/controls/OrbitControls.js"></script>

<script src="/lib/js/libs/stats.min.js"></script>

<script src="/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>

展开内容

联系我们

一个人的力量不如两个人的,两个人的力量不如一群人的。欢迎加入大家庭一起共同学习,共同进步。

查看更多