WebGL 实践（一）开发环境搭建

news2025/1/6 8:33:33

WebGL 是一种基于 JavaScript 的 API，用于在浏览器中渲染 2D和3D 图形，很多场景都能用，例如游戏开发、数据可视化、在线教育和虚拟现实等应用领域。

零、基础知识

相关基础知识很重要，如果会html、JavaScript等技术掌握起来会更快。后续学习过程中陆续给大家分享。

一、环境搭建

类似Python一样，WebGL也需要开发环境，查了下：

开发工具：
- 代码编辑器：VS Code、WebStorm。
- 浏览器：支持 WebGL 的浏览器（如 Chrome、Firefox）。
依赖管理：
- 使用 npm 或 yarn 安装依赖库（如 Three.js、Webpack）。
本地服务器：
- 使用工具（如 http-server、Live Server）启动本地服务器，方便调试。

二、实践过程

1、下载VS code

到官网下载VS code软件，具体参考了：

Visual Studio Code (VS Code)安装教程（非常详细）从零基础入门到精通，看完这一篇就够了_vs code安装-CSDN博客

2、搜索WebGL案例

找了一段特别简单的代码：

<html lang="zh-cn">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>webgl</title>
    </head>
    <body style="background-color: rgb(30,30,30);height: 100%;width: 100%;margin: 0px;padding: 0px;">
        <canvas id="WebGLCanvas" style="height: 100%;width: 100%;margin: 0px; padding: 0px;">
            10 Please use a browser that supports "canvas"
        </canvas>
    </body>
</html>

3、实际效果

（1）在VS code里面新建一个项目，把上述代码copy进去，run之后会生成一个html文件。