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

阅读更多

项目概述 通过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. 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/ 前置知识 生命周期回调函数(按触发先后排 …

阅读更多

Cocos Creator 的物理系统提供了强大的物理模拟功能，如重力、碰撞、摩擦等。Cocos Creator 提供了丰富的组件和 API 实现碰撞检测、刚体运动、关节等。 2D 物理：适用于 2D 游戏，使用 Box2D 引擎。 3D 物理：适用于 3D 游戏，使用 Bullet Physics 引擎。 1. 2D物理系统 在 Cocos Creator 中，2D …

阅读更多

Cocos Creator 是一款功能强大的游戏开发引擎，支持 2D 和 3D 游戏的跨平台开发，TypeScript 作为主要脚本语言、拥有强大的编辑器工具链、活跃的社区。 Cocos Dashboard 做为各引擎统一的下载器和启动入口，集成了统一的项目管理及创建面板，方便同时使用不同版本的引擎开发项目。

1. 项目结构 初次创建并打开一个项目后，文件夹的结构如下： assets： …

阅读更多