【Threejs】从零开始(十一)--3D交互事件

交互事件是通过光线投射进行实现的。接下来是一个相关案例。

1.首先准备基本环境

javascript 复制代码
// 导入three
import * as THREE from 'three'  // 导入threejs
//导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'


// 创建场景
const scene = new THREE.Scene()
scene.background = new THREE.Color(0x999999)

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.z = 10

// 创建渲染器
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

//辅助坐标系
const axesHelper = new THREE.AxesHelper(5)
scene.add(axesHelper)

// 创建控制器
const controls = new OrbitControls(camera, renderer.domElement)

//自适应窗口
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth, window.innerHeight)
})

// 渲染循环
function animate() {
    requestAnimationFrame(animate)
    renderer.render(scene, camera)
}
animate()

2.创建三个球体

错开一点位置方便观察

javascript 复制代码
//创建3个球
const geometry = new THREE.SphereGeometry(1, 32, 32)//球体
const material1 = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
const material2 = new THREE.MeshBasicMaterial({ color: 0xff0000 })
const material3 = new THREE.MeshBasicMaterial({ color: 0x0000ff })
const sphere1 = new THREE.Mesh(geometry, material1)
const sphere2 = new THREE.Mesh(geometry, material2)
const sphere3 = new THREE.Mesh(geometry, material3)
sphere1.position.x = -4
sphere2.position.x = 4
scene.add(sphere1, sphere2, sphere3)

3.实现交互

1.创建一个射线和二维的向量

javascript 复制代码
// 创建射线
const raycaster = new THREE.Raycaster()
const mouse = new THREE.Vector2()//创建二维向量

2.监听鼠标的点击事件

(1)先将鼠标的位置归一化到-1和1之间

(2)通过通过鼠标和摄像机位置确定射线位置

(3)计算物体和射线的交点

(4)改变交点物体的颜色

javascript 复制代码
// 监听鼠标移动
window.addEventListener('click', (event) => {
    // 将鼠标位置归一化到-1到1之间
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1
    //通过鼠标和摄像机位置设置射线
    raycaster.setFromCamera(mouse, camera)
    // 计算物体和射线的交点
    const intersects = raycaster.intersectObjects([sphere1, sphere2, sphere3])
     console.log(intersects)
    for (let i = 0; i < intersects.length; i++) {
        
        intersects[i].object.material.color.set(0xffff00)

    }

})

大功告成!!!

相关推荐
工业3D_大熊6 小时前
3D Web轻量引擎HOOPS赋能BIM/工程施工:实现超大模型的轻量化加载与高效浏览!
3d·3d web轻量化·3d模型可视化·3d渲染引擎·工业3d开发引擎·bim模型可视化
研梦非凡6 小时前
ICCV 2025|从粗到细:用于高效3D高斯溅射的可学习离散小波变换
人工智能·深度学习·学习·3d
fanged13 小时前
Cesium4--地形(OSGB到3DTiles)
3d·gis·web
桃花键神18 小时前
从传统到智能:3D 建模流程的演进与 AI 趋势 —— 以 Blender 为例
人工智能·3d·blender
东风西巷21 小时前
全能的3D创作平台,Blender(免费开源3D建模工具)
学习·3d·开源·blender·软件需求
查里王1 天前
AI 3D 生成工具知识库:当前产品格局与测评总结
人工智能·3d
Hello123网站1 天前
Champ-基于3D的人物图像到动画视频生成框架
3d·ai工具
Magnum Lehar1 天前
3d wpf游戏引擎的导入文件功能c++的.h实现
3d·游戏引擎·wpf
博图光电1 天前
Motioncam Color S + 蓝激光:3D 视觉革新,重塑工业与科研应用新格局
3d
新启航光学频率梳1 天前
[新启航]深孔加工尺寸精度检测方法 - 激光频率梳 3D 轮廓测量
科技·3d·制造