最近看到有小伙伴发了一个小米 SU7 的展示网页，那是相当的酷炫。花了几天功夫，我将上面的特效给还原了出来。

3D数字孪生，生成3D可视化仓库地图，实时监控仓库库位坐标、调度任务状态、车辆位置等信息。 根据调度信息，动态展现小车任务状态

对场景内的模型添加事件监听，实现鼠标交互，需要用到Raycaster（光线投射）类。 webGL中获取鼠标交互物体的原理：通过三维空间中相机视点与鼠标在屏幕上的位置的连线，形成一条直线，捕获与此直线相交的空间中的物体，即为交互对象物体。 在three中，Raycaster为我们…

我在前端干工地，最后成果如下图。 从图中可以看到，整个画面由以下构成 地面 房子 天空 下面就能一步步的构建这个场景。 一、 准备工作 我这里的环境是vue3 + vite，基本环境准备好后就要安装t

官方文档 的鼠标点位是:但是考虑到canvas 并不是全屏的 所以要计算 鼠标的点位 否则会造成点击不准等问题点位计算转自(侵删):https://juejin.cn/post/68551290076

「这是我参与2022首次更文挑战的第19天，活动详情查看：2022首次更文挑战」 射线追踪法 射线追踪法是最常见的方法，因为three.js提供了Raycaster对象来实现它。 原理：从鼠标处发射一

本文不会对Three.js几何体、材质、相机、模型、光源等概念详细讲解，会首先分成几个模块给大家快速演示一盒小案例。大家可以根据这几个模块快速了解Three.js的无限魅力。 我们会使用Three.js简单做一个立方体，为了大家更能宏观的了解Three.js。我将会分解成代码段…

元宇宙概念的势头正旺，我在思考今后前端的交互不在只止步于平面，会考虑更多3D的方向。所以时候不早不晚现在开始和我一起学习ThreeJS知识吧！

Three.js是基于WebGL的Javascript开源框架，简言之，就是能够实现3D效果的JS库。它的出现让web3D应用开发更简单。