three.js 事件交互

时间: 2019-04-23阅读: 929标签: 交互

在three.js中,展示的一切内容都是在canvas中绘制的,所以点击事件点击到物体上是无法获取点击对象的,要获取点击的对象要使用RayCaster,用于在三维空间中进行鼠标拾取,原理是:相机与鼠标所在的设备坐标之间的连线经过哪些物体。

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();

function onMouseMove( event ) {

	// 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)

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

}

function render() {

	// 通过摄像机和鼠标位置更新射线
	raycaster.setFromCamera( mouse, camera );

	// 计算物体和射线的焦点
	var intersects = raycaster.intersectObjects( scene.children );

	for ( var i = 0; i < intersects.length; i++ ) {

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

	}

	renderer.render( scene, camera );

}

window.addEventListener( 'mousemove', onMouseMove, false );

window.requestAnimationFrame(render);

特别注意
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
是针对全屏的情况,如果是一个div范围,窗口的宽度与高度要改成div的宽度与高度,event.clientX与ent.clientY也要改成event.layerX 与event.layerY

如果我们要区别点的是哪个物体,要为这个物体设置一个name 属性

 var sprite = new THREE.Sprite(new THREE.SpriteMaterial({ color: "#69f", name: spriteName }));
 sprite.position.set(0, 2, 5);
 sprite.scale.set(20, 2, 1);
 sprite.name = spriteName;

在点击的时候显示这个名字

alert(selectObject.name)

也可以根据名称不同展示不同的数据 或者跳转到另一个页面

window.location.href = "test111.html";


完整的代码

<!DOCTYPE html>
<html lang="en">

<head>
    <title>three.js webgl - raycast - sprite</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
    body {
        margin: 0;
    }

    .canvasWrap {
        width: 1000px;
        height: 500px;
        background: gray;
    }
    </style>
</head>

<body>
    <div id="title" style="display:none;">this is the title</div>
    <div class="canvasWrap" id="canvasWrap"></div>
    <script src="../../build/three.js"></script>
    <script src="../js/controls/OrbitControls.js"></script>
    <script>
    var renderer, scene, camera;
    var controls, group;
    var spriteName = "quanju naem"
    init()
    animate()

    var widht, height;

    function init() {
        width = document.getElementById('canvasWrap').clientWidth;
        height = document.getElementById('canvasWrap').clientHeight;
        //init renderer
        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(width, height);
        document.getElementById('canvasWrap').appendChild(renderer.domElement);

        //init scene
        scene = new THREE.Scene();
        scene.background = new THREE.Color(0x000000);
        console.log(scene.position) // Vector3 {x: 0, y: 0, z: 0}

        group = new THREE.Group();
        scene.add(group);

        //int camera
        camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
        camera.position.set(15, 15, 15);
        camera.lookAt(scene.position);

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

        //add sprites
        var sprite = new THREE.Sprite(new THREE.SpriteMaterial({ color: "#69f" }))
        sprite.position.set(6, 5, 5);
        sprite.scale.set(2, 5, 1);
        sprite.name = spriteName + " 1";
        group.add(sprite);

        var sprite = new THREE.Sprite(new THREE.SpriteMaterial({ color: "green" }));
        //sprite.material.rotation = Math.PI/3*4; //等同于(Math.PI/3)*4逆时针旋转240度
        sprite.position.set(8, -2, 2); //感觉position的位置是精灵的中心在三维坐标中的位置
        sprite.center.set(0.5, 0.5); //精灵的center设定是基于精灵的大小的,精灵的的左下角为(0,0),x轴的右边与y轴的上方为正
        sprite.scale.set(1, -5, 1);
        sprite.name = spriteName + " 2";

        group.add(sprite);

        var group2 = new THREE.Object3D();
        //group2.scale.set(1,2,1);
        group2.position.set(-5, 0, 0);
        //group2.rotation.set(Math.PI/2,0,0);
        group.add(group2);

        //var sprite = new THREE.Sprite(new THREE.SpriteMaterial({color:"#69f",name:"hihi"}));
        var sprite = new THREE.Sprite(new THREE.SpriteMaterial({ color: "#69f", name: spriteName }));
        sprite.position.set(0, 2, 5);
        sprite.scale.set(20, 2, 1);
        sprite.name = spriteName;

        //sprite.center.set(-0.1,0);
        //sprite.material.rotation = Math.PI/3;
        group2.add(sprite);

        window.addEventListener("resize", onWindowResize, false);
        window.addEventListener("click", onDocumentMouseMove, false)

    }

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

    function onWindowResize() {
        width = document.getElementById('canvasWrap').clientWidth;
        height = document.getElementById('canvasWrap').clientHeight;
        camera.aspect = width / height;
        camera.updateProjectionMatrix();
        renderer.setSize(width, height);
    }

    var selectObject = null;

    function onDocumentMouseMove(event) {
        event.preventDefault();
        if (selectObject) {
            console.log(selectObject);
            selectObject.material.color.set("#69f");
            selectObject = null;
        }

        var intersects = getIntersects(event.layerX, event.layerY);
        if (intersects.length > 0) {
            var res = intersects.filter(function(res) {
                return res && res.object
            })[0];
            if (res && res.object) {
                //console.log(res)
                selectObject = res.object;
                alert(selectObject.name)


                selectObject.material.color.set("#ffc466")
                var title = document.getElementById("title");
                title.style.display = "block";

                //window.location.href = "test111.html";

            }
        }
    }
    var raycaster = new THREE.Raycaster();
    var mouseVector = new THREE.Vector2();

    function getIntersects(x, y) {
        //将鼠标位置转换成设备坐标。x和y方向的取值范围是(-1 to 1)
        x = (x / width) * 2 - 1;
        y = -(y / height) * 2 + 1;
        mouseVector.set(x, y);

        //通过摄像机和鼠标位置更新射线
        raycaster.setFromCamera(mouseVector, camera);

        // 返回物体和射线的焦点
        return raycaster.intersectObject(group, true)
    }
    </script>
</body>

</html>
站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/3023

设计师们做UI设计和交互设计、界面设计等一般会去什么网站呢?

明明可靠颜值吃饭,却偏偏要靠才华立身,UI设计师就是这样一群神奇的物种。面对“大的同时小一点”、“五彩斑斓黑”、“下班之前给我”……这些甲方大大刁钻的需求,设计师每天都在咬牙微笑讨生活。

RN混合开发,React Native与原生android和ios的交互通信

React-Native新版本(从原生发送消息到JS),Android/iOS原生模块给ReactNative发送事件,通知监听,通过DeviceEventEmitter,NativeEventEmitter通过原生应用通讯。

H5必知必会之与App交互

本文将就此主题深入探讨H5与App交互的几种常见模式。首先声明,本文涉及的H5与App交互协议和模式没有什么特别独到之处,相反,它们恰恰是在业界既有经验基础上结合项目实际归纳提炼出来的。

网站交互、开发方式和前端框架介绍

这个世界唯一不变的可能就是变化,历史的车轮滚滚向前,它不会因任何人的消极缓慢而停止。时代抛弃你时,连一声再见都不会说。从最开始的Javascrpit、到后来的Jquery、(ExtJs、EasyUI、MiniUI)、Bootstrap、Layui

前后端交互技术有哪些

我们都知道,一个完整的IT项目是由多个不同岗位的成员共同完成,包含UI规划、前端开发、后端开发、测验等。为了完成项目的完整性,前后端需求运用技能完成联通。不过,前后端交互技能有哪些呢?

H5页面基于接口实现数据交互

对于现在APP开发来说,目前流行的两个方式是原生和H5。就如同之前业界程序猿争论的BS和CS之争一样,业界对于H5和原生也有不小的争论。对于前者的争论在于PC端,后者在于移动端上体现。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广