在低代码和大模型等编程提效工具快速发展和普及的当下，传统前端界面的开发任务需要的人会越来越少，要想保住饭碗，持续学习和实践 3D 技术是个不错的出路。

一.工具 1.chrome插件 babylon.js提供的Spector.js插件 https://chrome.google.com/webstore/detail/spectorjs/denbga

前言 现在很多可视化项目大屏都涉及到了三维， 所以近期学习了一些关于three.js的内容，发现three.js对于小白入门来说还是比较友好的，暂时还没有涉及到webgl相关的。下面的案例用到的都是一

Three.js（下面简称 Three） 作为一个 3D 库，不仅减少了我们学习 OpenGL 和 WebGL 的成本，还大大提升了前端在可视化上给用户带来更多的真实、沉浸式的体验。众所周知，Three 更多的是用 3D 模型 + 投影相机 + 用户交互的方式来构建一个「3D …

市场上还有许多其他的WebGL库，如 Babylon.js、PlayCanvas、PIXI.js 和 Cesium，它们也有各自的特点和优势。

最后将画布背景设为白色。 照相机就像人的视觉或说从什么角度去看场景，看场景的位置和视线的方向决定了渲染到页面的内容。故一般需要设置两个参数相机位置position、视线方向lookAt，，在webgl其实是需要三组参数视点，观察点，和上方向。thresjs中好像是默认Y轴为上方…

最近一位叫 @GameMCU的大佬用 Webgl、Three.js 等技术实现了一个 小米 SU7 在线体验网站：https://gamemcu.com/su7/被广大网友疯传，效果相当炸裂！

随着前端越来越卷，对前端的要求也越来越高，从视觉效果上不断的迈向3d 一直想学习threejs，迫于没有时间，正好空闲下来一周（记录一下入门threejs） ✨实现一个3d换色车以及场景动画✨

3D全景技术可以实现日常生活中的很多功能需求，比如地图的街景全景模式、数字展厅、在线看房、社交媒体的全景图预览、短视频直播平台的全景直播等。Three.js 实现全景功能也是十分方便的，本文将介绍如