简介
由于浏览器是一个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>