three.js-Raycaster

Three.js學習筆記 本篇為Raycaster(射線)的使用。

Raycaster

Constructor

    var raycaster = new THREE.Raycaster( origin, direction, near, far );

Main Properties

• origin：射線放射的位置
• direction ：方向向量，應該是標准化的.normalize()
• near ：能投射的最近距離default：0
• far： 能投射的最遠距離 default：Infinity

拾取物體

我們可以定義一個由mouse(鼠標)發出的射線，從而來拾取物體。
獲取第一個和射線相交的物體，進一步可以進行其他操作（本篇用於改變獲取物體的顏色）。

添加一組物體

    
    //用來保存物體對象
    var array = [];
    
    var geometry = new CubeGeometry(100,100,100);
    
    var materisl = new MeshBasicMaterial({ color: Math.random() * 0xffffff, opacity: 0.5 } );
    
    //定義20個cube
    for(var i=0;i<20;i++){
       
       var mesh = new THREE.Mesh(geometry,materisl);
          
           object.position.x = Math.random() * 800 - 400;
		   object.position.y = Math.random() * 800 - 400;
		   object.position.z = Math.random() * 800 - 400;
		   
       scene.add(mesh);
       
       array.push(mesh);
       
    }

添加raycaster

    var raycaster = new THREE.Raycaster(); 
    
    //用來保存鼠標坐標信息
    var mouse = new THREE.Vector2();  
    
    //添加鼠標移動事件，檢測鼠標的移動
    document.addEventListener('mousemove', onDocumentMouseMove, false);  
    
    function onDocumentMouseMove(event) {  
        
        //獲取鼠標的x，y坐標
        mouse.x = (event.clientX / window.innerWidth) * 2 - 1;  
        mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;  
        
            }  
            
    function render(){
        
        //更新鼠標和射線位置
        raycaster.setFromCamera(mouse, camera); 
        
        renderer.render(scene, camera);  
        raycaster.setFromCamera(mouse, camera);  
    }

拾取物體改變顏色

前面兩步我們添加了object（物體）和raycaster（射線），當我們獲取到物體還需要進一步操作。改變獲取物體的顏色。

     function render() {  
     
                requestAnimationFrame(render);  
                renderer.render(scene, camera);  
                
                raycaster.setFromCamera(mouse, camera);  
                
                //獲取和射線相交的array[]中的物體
                var intersects = raycaster.intersectObjects(array);  
                
                var INTERSECTED；
                
                //這里我們操作第一個相交的物體
                if (intersects.length > 0) {  
                    if (INTERSECTED != intersects[0].object) {
                          
                        if (INTERSECTED) INTERSECTED.material.color.setHex(INTERSECTED.currentHex);  
                        INTERSECTED = intersects[0].object;  
                        
                        //設置相交的第一個物體的顏色
                        INTERSECTED.currentHex = INTERSECTED.material.color.getHex(); 
                        //將該物體設為隨機的其他顏色 
                        INTERSECTED.material.color.set( 0xff0000 );  
                    }  
                } else {  
                    //當射線離開的時候變為原來的顏色
                    if (INTERSECTED) INTERSECTED.material.color.set(INTERSECTED.currentHex);  
                    INTERSECTED = null;  
                }  
            }  

---