Threejs教程——交互

Threejs是一个非常棒的图形库,可是对于一些交互逻辑,实现起来就没有那么容易了,这篇我们来讲解下如何实现一些常见的交互操作,比如点击、mouseover等效果。

首先来看看Threejs是如何实现交互的。在3d的世界中,我们选取一个物体不像2d平面立面那么简单,因为我们所对应的是一个3维的世界,而鼠标所在的屏幕是一个2d的世界。这个时候Threejs会为我们提供一个叫做Raycaster的类,为我们提供的是一个射线,然后我们可以根据不同的方向去发射射线,根据射线是否被阻挡,来判断我们是否碰到了物体。

我们来看看如何使用Raycaster类来实现鼠标滑过物体的显示效果,首先我们实例化raycaseer的对象,以及一个记录鼠标位置的坐标mouse,选中的3d模型selectedObject ,选中的3d模型材质selectedMaterial,高亮的材质hightLightMaterial。

      var raycaster = new THREE.Raycaster();
        var mouse = new THREE.Vector2();
        var selectedObject = null;
        var selectedMaterial = null;
        var hightLightMaterial = new THREE.MeshBasicMaterial({ color: 'green' });

然后我们在主循环中实现raycaster的射线测试工作

function render() {
            requestAnimationFrame(render); 
          //设置射线从摄像机视角开始,沿着坐标射出
            raycaster.setFromCamera(mouse, camera);
         //获取射线击中的Objects
            var intersects = raycaster.intersectObjects(cubes, true);
            if (intersects.length > 0) {
                var obj = intersects[0].object;
                if (selectedObject != obj) {
               //设置选中效果
                    setSelectedStatus(obj);
                } 
            }
            else {
                //no object intersected 恢复原先的显示
                restoreObjectStatus();
            }


            renderer.render(scene, camera);
        };

<span class="redactor-invisible-space">    function setSelectedStatus(obj) {
            if (selectedObject)
                restoreObjectStatus();
            selectedObject = obj;
            selectedMaterial = obj.material;
            selectedObject.material = hightLightMaterial;            
        }

    function restoreObjectStatus() {
            if (selectedObject)
                selectedObject.material = selectedMaterial;
            selectedObject = null;
            selectedMaterial = null;
        }
<span class="redactor-invisible-space">
</span></span>

实现了mouseover以后,点击事件就显得比较简单了,我们只需要在注册mousedown事件,然后判断是否有选中object

document.addEventListener('mousedown', onDocumentMouseDown, false);
<span class="redactor-invisible-space">function onDocumentMouseDown(event) { 
    boxHelper.update(selectedObject);
    boxHelper.visible = true;   
}</span>

boxhelper是一个显示object外框的辅助类,我们用来显示选中效果,初始化代码如下

var boxHelper = new THREE.BoxHelper(camera, 0xff0000);
boxHelper.visible = false;
scene.add(boxHelper);

最终效果如下:

在线demo

本文由 Leo's Blog 创作,采用 署名-非商业性使用 2.5 中国大陆 进行许可。
如需转载、引用请署名作者且注明文章出处。
2016年12月30日 2832 浏览 评论 Threejs webgl Raycaster
上一篇:Threejs教程——加载模型 | 下一篇:Threejs教程——HUD做标注跟随效果