项目概述 基于 Vue 3 + TypeScript + Three.js 的 3D 天文可视化项目，从零开始构建一个功能完整的3D太阳系应用，涵盖行星运动、卫星系统、星空背景等核心功能，并深入探讨如何解决实际开发中的技术挑战。 采用模块化设计，主要包含以下几个核心组件： SolarSystem: 负责行星系统的逻辑管理 StarField: 处理星空和星云背景 Vue 3 组件: 管 …

阅读更多

🌍 项目概述 基于 Vue 3 + TypeScript + Three.js 模拟3D地球自转、公转以及相对于太阳、月球的运动轨迹，并通过合理的光照和背景构建沉浸式体验。 视图层 (Vue Template): 提供 canvas 容器和控制按钮。 逻辑层 (TypeScript): 负责场景初始化、资源加载、动画循环以及交互逻辑。 数据层: 使用了 GeoJSON 格式的地图数据（世界边界、河 …

阅读更多

项目概述 通过Three.js的强大渲染能力、Vue的响应式数据管理和Canvas的动态纹理合成构建交互式3D地球可视化项目。 使用一张 8K 高清地球纹理 作为底图。 从 GeoJSON 数据 中分别解析边界信息和河流信息。 在 Canvas 上绘制边界线和河流线，并与底图合成一张新纹理。 将合成后的纹理映射到球体几何体上。 既保留了高清地球纹理的细节，又叠加了清晰的地理边界和河流。 核心功能实 …

阅读更多

这是一篇使用 Three.js 和 GeoJSON 实现 3D 地球边界的学习笔记。结合了现代前端技术栈（Vue 3 + TypeScript + Vite）和地理数据可视化技术，旨在创建一个交互式的 3D 地球边界模型。 项目初始化 首先，使用Vite创建一个Vue项目： npm create vite@latest threejs-vue # 选择框架：Vue # 选择：TypeScript …

阅读更多

Three.js是一个基于WebGL的3D图形库，由“Ricardo Cabello”于2010年4月在GitHub首次发布。 Three.js支持CDN和npm引入，推荐npm加TypeScript代码提示。 官方文档: https://threejs.org/docs/ 官方示例: https://threejs.org/examples/ GitHub: …

阅读更多

1. Cocos Creator 图形渲染 1.1 渲染管线 渲染管线：定义了从3D场景数据（网格、材质、灯光等）转换为2D屏幕图像的一系列步骤。 Cocos管线：采用了可定制渲染管线(CRP - Customizable Render Pipeline)，内置了前向渲染（forward）和 延迟渲染（deferred）管线，并支持自定义渲染管线。 内置管线： 前向渲染管线：对每个物体，遍历所有光 …

阅读更多

1. WebGL基础 WebGL（Web Graphics Library, Web图形库）是 Web 上新的3D图形标准/规范，它是为渲染2D图形和交互式3D图形而设计的JavaScript API。源自 OpenGL（Open Graphics Library, 开放图形库）的ES2.0库。OpenGL是用于渲染2D、3D矢量图形的跨语言、跨平台的应用程序编程接口（API）。 WebGL 提供 …

阅读更多

COCOS CREATOR 版本：Cocos Creator 3.8。 基本思路 创建可切割的物体：使用2D物理组件Rigidbody2D（2D刚体）和PolygonCollider2D（多边形碰撞体）为要切割的物体设置物理属性。 射线检测：鼠标画线，并通过射线检测其画线路径上的多边形碰撞体（PolygonCollider2D）。需要正反来两次射线检测来记录射线的路径上所有的交点。 以一个多边形碰 …

阅读更多

游戏介绍 《Flappy Bird》是一款由越南开发者 Dong Nguyen 创作并在2013年发布且暴红的像素游戏。 游戏玩法：玩家控制一个小鸟，通过点击屏幕使其飞行。游戏的核心目标是穿过一系列竖直排列的绿色管道，同时避免碰撞管道以及天花板和地面，一旦碰撞即意味着游戏结束。 COCOS CREATOR 版本：Cocos Creator 3.8。 游戏效果 DEMO试 …

阅读更多

游戏介绍 《方块先生》是一款入门级别的跑酷小游戏，通过此雏形可以一步步做更多更强大的3D游戏。 此游戏完全参照Cocos引擎官方的bilibili视频教程《合集·麒麟子教你做3D跑酷游戏》。 COCOS CREATOR 版本：Cocos Creator 3.8。 游戏效果 DEMO试玩：https://www.itdn.top/demo/BoxRun/ 前置知识 生命周期回调函数(按触发先后排 …

阅读更多