以上一篇入门篇为例来简单的设置下3d模型当中的交互事件，上一篇我们已经完成了在3d页面中添加了一个红色球，下面我们给这个球一个点击事件让它Y轴位置上升，再设置一个鼠标移入到球上时让其变色。
1.其实three.js当中没有事件可以直接选中物体的，我们需要监听window对象来完成与3d页面的交互，通过使用到three.js当中RayCaster对象，用于在三维空间中进行鼠标拾取，原理是：相机与鼠标所在的设备坐标之间的连线与哪些物体相交。相交的物体离屏幕越近的越靠前，所以第一个物体就是我们选中的对象。
第一步：给window对象添加点击事件监听器；
window.addEventListener('mousedown', mouseDownFuc);
第二步：在事件监听函数里拾取到点击的对象集合；
function mouseDownFuc(){
let raycaster = new THREE.Raycaster();
let mouse = new THREE.Vector2();
let intersectsObjArr = getSelsectOBj(mouse,raycaster, e);
}
function getSelsectOBj(mouse,raycaster, e) {
mouse.x = e.clientX / renderer.domElement.clientWidth*2-1;
mouse.y = -(e.clientY / renderer.domElement.clientHeight*2)+1;
raycaster.setFromCamera(mouse,camera);
let intersects = raycaster.intersectObjects(scene.children, true);
return intersects;
}
第三步：判断intersectsObjArr集合长度不为零，确认我们鼠标点击的地方有物体,如果有物体那么intersectsObjArr[0]就是我们选中的对象，通过页面console.log（intersectsObjArr[0]）发现intersectsObjArr[0]包含了相交点的许多信息，而我们只需要交点的对象，所以我们需要取到intersectsObjArr[0].object对象；然后我们还需要进行一次判断当前对象就是我们点击的对象，在这里我们还得回到创建物体时给它的name属性一个值进行区分物体。最后给它position属性值的Y轴坐标设为50；
myBall.name = 'redBall';
if(intersectsObjArr.length > 0){
if(intersectsObjArr[0].object.name == 'redBall'){
intersectsObjArr[0].object.position.y = 50;
}
}
以上就是我们完成了3d页面物体点击事件，然后就是鼠标的移入到物体变色，移出时颜色还原，这和2d页面的移入移出不太一样，因为我们是给window对象加的监听器，然后通过RayCaster对象来拾取到物体的，所以我们这里需要给window对象加鼠标移动事件来判断鼠标是否移动我们的物体上。其步骤同上点击事件一样。
window.addEventListener('mousemove', mouseMoveFuc);
function mouseMoveFuc(){
let raycaster = new THREE.Raycaster();
let mouse = new THREE.Vector2();
let intersectsObjArr = getSelsectOBj(mouse,raycaster, e);
if(intersectsObjArr.length > 0){
if(intersectsObjArr[0].object.name == 'redBall'){
intersectsObjArr[0].object.material = new THREE.MeshPhongMaterial( { color: 'orange'});
document.getElementsByTagName('body')[0].style.cursor = 'pointer';
}
}else{
myBall.material = new THREE.MeshPhongMaterial( { color: 0xff0000});
document.getElementsByTagName('body')[0].style.cursor = 'default';
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>event</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
width: 100vw;
overflow: hidden;
background: url('img/bgImg.jpg') no-repeat fixed;
background-size: 100% 100%;
}
</style>
</head>
<body>
<script src="lib/three.min.js"></script>
<script src="lib/OrbitControls.js"></script>
<script>
window.onload = function(){
let scene,camera,renderer,myBall;
initThreeScene();
window.addEventListener('mousedown', mouseDownFuc);
window.addEventListener('mousemove', mouseMoveFuc);
function mouseDownFuc (e) {
let raycaster = new THREE.Raycaster();
let mouse = new THREE.Vector2();
let intersects = getSelsectOBj(mouse,raycaster, e);
if(intersects.length > 0) {
console.log(intersects[0])
if(intersects[0].object.name == 'myBall') {
myBall.position.y = 50;
}
}
}
function mouseMoveFuc (e) {
let raycaster = new THREE.Raycaster();
let mouse = new THREE.Vector2();
let intersects = getSelsectOBj(mouse,raycaster, e);
if(intersects.length > 0) {
if(intersects[0].object.name == 'myBall') {
myBall.material = new THREE.MeshPhongMaterial( { color: 'orange'});
document.getElementsByTagName('body')[0].style.cursor = 'pointer';
}
}else {
myBall.material = new THREE.MeshPhongMaterial( { color: 0xff0000});
document.getElementsByTagName('body')[0].style.cursor = 'default';
}
}
function getSelsectOBj(mouse,raycaster, e) {
mouse.x = e.clientX / renderer.domElement.clientWidth*2-1;
mouse.y = -(e.clientY / renderer.domElement.clientHeight*2)+1;
raycaster.setFromCamera(mouse,camera);
let intersects = raycaster.intersectObjects(scene.children, true);
return intersects;
}
function initThreeScene() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 2000 );
camera.position.set( 0, 50,300 );
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild(renderer.domElement );
let ambientLight = new THREE.AmbientLight( 0xf5f5f5);
scene.add( ambientLight );
let grid = new THREE.GridHelper( 400, 30, 0xcccccc, 0xcccccc );
scene.add( grid );
let ball = new THREE.SphereGeometry( 25, 100, 100 );
let ballColor = new THREE.MeshPhongMaterial( { color: 0xff0000 } );
myBall = new THREE.Mesh( ball , ballColor );
myBall.name = 'myBall';
scene.add( myBall );
let controls =new THREE.OrbitControls(camera, renderer.domElement);
controls.enableZoom =true;
controls.minDistance = 1;
controls.maxDistance = 2000;
controls.enableRotate =true;
function render() {
requestAnimationFrame( render );
renderer.render( scene, camera );
}
render();
window.onresize = function () {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
}
}
</script>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律