three.js 事件交互

点击查看交互效果

在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>

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券