58 Three.js 通过THREE.Raycaster给模型绑定点击事件
2018-01-14 02:59
776 查看
简介
由于浏览器是一个2d视口，而在里面显示
three.js的内容是
3d场景，所以，现在有一个问题就是如何将
2d视口的
x和
y坐标转换成
three.js场景中的
3d坐标。好在
three.js已经有了解决相关问题的方案，那就是
THREE.Raycaster射线，用于鼠标拾取（计算出鼠标移过的三维空间中的对象）等等。我们看一张图片：
这张图片偷自：https://segmentfault.com/a/1190000010490845
我们一般都会设置三维场景的显示区域，如果，指明当前显示的
2d坐标给
THREE.Raycaster的话，它将生成一条从显示的起点到终点的一条射线。也就是说，我们再屏幕上点击了一个点，在
three.js里面获取的则是一条直线。
THREE.Raycaster构造函数和对象方法
实例化
new Raycaster( origin, direction, near, far );
origin— 光线投射的起点向量。
direction— 光线投射的方向向量，应该是被归一化的。
near— 投射近点，用来限定返回比near要远的结果。near不能为负数。缺省为0。
far— 投射远点，用来限定返回比far要近的结果。far不能比near要小。缺省为无穷大。
方法
setFromCamera
用一个新的原点和方向向量来更新射线（ray）。.setFromCamera ( coords, camera )
coords— 鼠标的二维坐标，在归一化的设备坐标(NDC)中，也就是X 和 Y 分量应该介于 -1 和 1 之间。
camera— 射线起点处的相机，即把射线起点设置在该相机位置处。
intersectObject
检查射线和物体之间的所有交叉点（包含或不包含后代）。交叉点返回按距离排序，最接近的为第一个。 返回一个交叉点对象数组。.intersectObject ( object, recursive )
object— 用来检测和射线相交的物体。
recursive— 如果为true，它还检查所有后代。否则只检查该对象本身。缺省值为false。
返回数组每一个对象的内容
[ { distance, point, face, faceIndex, indices, object }, ... ]distance– 射线的起点到相交点的距离
point– 在世界坐标中的交叉点
face– 相交的面
faceIndex– 相交的面的索引
indices– 组成相交面的顶点索引
object– 相交的对象
当一个网孔(Mesh)对象和一个缓存几何模型(BufferGeometry)相交时，faceIndex 将是 undefined，并且 indices 将被设置； 而当一个网孔(Mesh)对象和一个几何模型(Geometry)相交时，indices 将是 undefined。
当计算这个对象是否和射线相交时，Raycaster 把传递的对象委托给 raycast 方法。 这允许 meshes 对于光线投射的响应可以不同于 lines 和 pointclouds。
注意，对于网格，面（faces）必须朝向射线原点，这样才能被检测到；通过背面的射线的交叉点将不被检测到。 为了光线投射一个对象的正反两面，你得设置 material 的 side 属性为 THREE.DoubleSide。
点击事件实现案例
//声明raycaster和mouse变量
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
function onMouseClick( event ) {
//通过鼠标点击的位置计算出raycaster所需要的点的位置，以屏幕中心为原点，值的范围为-1到1.
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
// 通过鼠标点的位置和当前相机的矩阵计算出raycaster
raycaster.setFromCamera( mouse, camera );
// 获取raycaster直线和所有模型相交的数组集合
var intersects = raycaster.intersectObjects( scene.children );
console.log(intersects);
//将所有的相交的模型的颜色设置为红色，如果只需要将第一个触发事件，那就数组的第一个模型改变颜色即可
for ( var i = 0; i < intersects.length; i++ ) {
intersects[ i ].object.material.color.set( 0xff0000 );
}
}
window.addEventListener( 'click', onMouseClick, false );思路：先通过当前点击位置的坐标和相机计算出
raycaster线，然后计算出相交的所有模型，修改模型的纹理。
案例代码
查看案例效果：http://www.wjceo.com/blog/threejs/2018-02-13/60.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
html, body {
margin: 0;
height: 100%;
}
canvas {
display: block;
}
</style>
</head>
<body onload="draw();">
</body>
<script src="https://johnson2heng.github.io/three.js-demo/lib/three.js"></script>
<script src="https://johnson2heng.github.io/three.js-demo/lib/js/controls/OrbitControls.js"></script>
<script src="https://johnson2heng.github.io/three.js-demo/lib/js/libs/stats.min.js"></script>
<script src="https://johnson2heng.github.io/three.js-demo/lib/js/libs/dat.gui.min.js"></script>
<script>
var renderer;
function initRender() {
renderer = new THREE.WebGLRenderer({antialias: true,alpha:true});
renderer.setSize(window.innerWidth, window.innerHeight);
//告诉渲染器需要阴影效果
//renderer.shadowMap.enabled = true;
//renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 默认的是，没有设置的这个清晰 THREE.PCFShadowMap
renderer.setClearColor(0xffffff);
document.body.appendChild(renderer.domElement);
}
var camera;
function initCamera() {
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 40, 100);
camera.lookAt(new THREE.Vector3(0, 0, 0));
}
var scene;
function initScene() {
scene = new THREE.Scene();
}
function initLight() {
}
function initModel() {
//辅助工具
var helper = new THREE.AxesHelper(10);
scene.add(helper);
var s = 25;
var cube = new THREE.CubeGeometry(s, s, s);
for (var i = 0; i < 3000; i++) {
var material = new THREE.MeshBasicMaterial({color:randomColor()});
var mesh = new THREE.Mesh(cube, material);
mesh.position.x = 800 * ( 2.0 * Math.random() - 1.0 );
mesh.position.y = 800 * ( 2.0 * Math.random() - 1.0 );
mesh.position.z = 800 * ( 2.0 * Math.random() - 1.0 );
mesh.rotation.x = Math.random() * Math.PI;
mesh.rotation.y = Math.random() * Math.PI;
mesh.rotation.z = Math.random() * Math.PI;
mesh.updateMatrix();
scene.add(mesh);
}
}
//随机生成颜色
function randomColor() {
var arrHex = ["0","1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d","e","f"],
strHex = "#",
index;
for(var i = 0; i < 6; i++) {
index = Math.round(Math.random() * 15);
strHex += arrHex[index];
}
return strHex;
}
//声明raycaster和mouse变量 var raycaster = new THREE.Raycaster(); var mouse = new THREE.Vector2(); function onMouseClick( event ) { //通过鼠标点击的位置计算出raycaster所需要的点的位置，以屏幕中心为原点，值的范围为-1到1. mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1; mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1; // 通过鼠标点的位置和当前相机的矩阵计算出raycaster raycaster.setFromCamera( mouse, camera ); // 获取raycaster直线和所有模型相交的数组集合 var intersects = raycaster.intersectObjects( scene.children ); console.log(intersects); //将所有的相交的模型的颜色设置为红色，如果只需要将第一个触发事件，那就数组的第一个模型改变颜色即可 for ( var i = 0; i < intersects.length; i++ ) { intersects[ i ].object.material.color.set( 0xff0000 ); } } window.addEventListener( 'click', onMouseClick, false );
//初始化dat.GUI简化试验流程
var gui;
function initGui() {
//声明一个保存需求修改的相关数据的对象
controls = {
};
var gui = new dat.GUI();
}
//初始化性能插件
var stats;
function initStats() {
stats = new Stats();
document.body.appendChild(stats.dom);
}
//用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放
var controls;
function initControls() {
controls = new THREE.OrbitControls(camera, renderer.domElement);
// 如果使用animate方法时，将此函数删除
//controls.addEventListener( 'change', render );
// 使动画循环使用时阻尼或自转 意思是否有惯性
controls.enableDamping = true;
//动态阻尼系数 就是鼠标拖拽旋转灵敏度
//controls.dampingFactor = 0.25;
//是否可以缩放
controls.enableZoom = true;
//是否自动旋转
controls.autoRotate = false;
//设置相机距离原点的最远距离
controls.minDistance = 50;
//设置相机距离原点的最远距离
controls.maxDistance = 200;
//是否开启右键拖拽
controls.enablePan = true;
}
function render() {
renderer.render(scene, camera);
}
//窗口变动触发的函数
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
render();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
//更新控制器
render();
//更新性能插件
stats.update();
//controls.update();
requestAnimationFrame(animate);
}
function draw() {
initRender();
initScene();
initCamera();
initLight();
initModel();
initGui();
initControls();
initStats();
animate();
window.onresize = onWindowResize;
}
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 深入理解JS的事件绑定、事件流模型
- js点击事件绑定一次，但是点击却执行了多次
- js循环给li绑定事件实现 点击li弹出其索引值 和内容
- js图片预加载---for与onload事件，图片数据模型到界面的单项绑定，使用interval模拟循环操作
- css的hover事件，如果点击之后通过js操作样式，hover事件就会失效的处理方法，外部css样式与js的DOM样式谁的权重高？
- Three.js raycaster 填坑
- 用js给div绑定事件，实现点击切换效果的几种方式总结
- js通过contentWindow控制iframe子页面元素点击事件,并把值传给父页面
- js为链接绑定点击事件并且附带return false;来阻止跳转
- 进击的KFC：iOS WebView 如何通过js获取网页中所有图片并加入点击事件，实现浏览图片的功能
- js 索引下标之li集合绑定点击事件
- jquery on() bind()绑定的点击事件在js动态新添加的元素生效
- js(jquery)绑定点击事件
- JS 循环绑定多个元素的点击事件时出现的闭包问题与解决方案
- 在SHTML中通过JS调用APSX完成超联接的点击事件
- js实现快捷键绑定按钮点击事件
- 利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
- (转载)js(jquery)的on绑定点击事件执行两次的解决办法
- laydate.js绑定点击事件和日期格式化
- js html元素内绑定点击事件 出现 js Uncaught ReferenceError ：xxx is not defined