three.js 事件交互

時間 2019-11-13

原文原文鏈接

在three.js中，展現的一切內容都是在canvas中繪製的，因此點擊事件點擊到物體上是沒法獲取點擊對象的，要獲取點擊的對象要使用RayCaster，用於在三維空間中進行鼠標拾取，原理是：相機與鼠標所在的設備座標之間的連線通過哪些物體。html

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.layerYjava

若是咱們要區別點的是哪一個物體，要爲這個物體設置一個name 屬性web

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)canvas

也能夠根據名稱不一樣展現不一樣的數據或者跳轉到另外一個頁面
window.location.href = "test111.html";數組

完整的代碼app

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

intersectObject ( object, recursive : Boolean, optionalTarget : Array ) : Arraydom

object - 檢測與射線相交的物體webgl

recursive- 若爲 true 則檢查後代對象，默認值爲falseui

optionalTarget- （可選參數）用來設置方法返回的設置結果。若不設置則返回一個實例化的數組。若是設置，必須在每次調用以前清除這個數組（例如，array.length= 0;)