THREEJS（版本85）实现鼠标点击的高亮显示（如颜色变化）

来源：互联网发布：贵州轩通大数据怎么样编辑：程序博客网时间：2024/05/22 13:25

啥也不多说，看效果图：

鼠标点击时，发生颜色变化（可以引申出去做很多其他的操作）

代码：首先初始化：

var  objects=[];var raycaster= new THREE.Raycaster();var mouse = new THREE.Vector2(),        INTERSECTED, SELECTED;

需要把你要实现的效果的geometry加载到objects中

var shape32=createMesh(lines[32]);objects.push(shape32);scene.add(shape32);

注：createMesh自己随便写的

鼠标点击事件：

function onDocumentMouseDown( event ) {    event.preventDefault();    document.addEventListener( 'mousemove', onDocumentMouseMove, false );    document.addEventListener( 'mouseup', onDocumentMouseUp, false );    document.addEventListener( 'mouseout', onDocumentMouseOut, false );    //鼠标点的拾取-当鼠标点击效果时，放在这里    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;//threejs坐标点的标准化    mouse.y = - ( event.clientY / window.innerHeight) * 2 + 1;    raycaster.setFromCamera( mouse, camera );    var intersects = raycaster.intersectObjects( objects );    //拾取物体数大于0时    if ( intersects.length > 0 ) {        //获取第一个物体        if (SELECTED != intersects[0].object) {            //鼠标的变换            document.body.style.cursor='pointer';            /*intersects[ 0 ].object.material.transparent=true;//透明度的变化             intersects[ 0 ].object.material.opacity=0.5;*/            if (SELECTED) SELECTED.material.color.setHex(SELECTED.currentHex);            SELECTED = intersects[0].object;            SELECTED.currentHex = SELECTED.material.color.getHex();//记录当前选择的颜色            //改变物体的颜色(红色)            SELECTED.material.color.set( 0x66ff00 );        }    } else {        document.body.style.cursor= 'auto';        if (SELECTED) SELECTED.material.color.set(SELECTED.currentHex);//恢复选择前的默认颜色        SELECTED = null;    }}

完美**********************************************************************华丽分割线*******************************************************************************END

阅读全文

0 0