如何使用 HTML5 Canvas 制作 3D 射击游戏？
我想使用 HTML5 Canvas 制作一个 3D 射击游戏（只是射击，没有动作或任何东西）。
我怎样才能做到这一点？我搜索了一些教程，但找不到任何好的教程。
I want to make a 3D shooter (just shooting, no movements or anything) using HTML5 Canvas.
How can I do that? I searched for some tutorials but I couldn't find any good ones.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
首先我认为这个问题更适合gamedev stackexchange网站（http://gamedev.stackexchange.com/）
正如其他人所说，你需要学习WebGL，这是用于大多数浏览器的 ECMAScript 实现的 OpenGL ES 2.0 API。您需要支持 WebGL 的浏览器（最新版本的 Firefox、Chrome 或 Safari）以及与 OpenGL ES 2.0 兼容的显卡驱动程序。
在我看来，开始游戏开发时首先要学习的是一些矩阵和向量运算的数学知识。在网上搜索一些关于如何进行矩阵乘法、转置、如何获取 4x4 矩阵的行列式（这与获取 3x3 或 2x2 矩阵行列式不同）以及如何反转矩阵的教程就足够了。然后学习一些（非常简单的）向量运算、点积、叉积、加法、乘法、归一化和缩放。
然后了解变换矩阵、旋转、平移和缩放矩阵。还有视图和投影矩阵。
一些GLSL着色语言以及什么是3D模型（顶点位置、法线、纹理坐标和材质）。
好吧，这些是关键词，现在谷歌一下。这里有一系列关于向量运算的精彩教程：http://www.dickbaldwin.com/ KjellTutorial/KjellVectorTutorialIndex.htm
First of all I think this question is more suitable for the gamedev stackexchange website (http://gamedev.stackexchange.com/)
As said by the others, you gonna need to learn WebGL, which is the OpenGL ES 2.0 API for the ECMAScript implementation of most browsers. You need a WebGL enabled browser (The latest version of Firefox, Chrome or Safari) and a graphics card driver compatible with OpenGL ES 2.0.
The first thing to learn when beginning with game development imo are the maths about some matrix and vector operations. Search the web for some nice and fast tutorials on how to do matrix multiplication, transposition, how to get the determinant of a 4x4 matrix (which is different from getting a 3x3 or 2x2 matrix determinant) and how to invert a matrix should be enough. Then learn some (pretty easy) vector operations, Dot product, Cross product, adition, multiplication, normalization and scaling.
Then learn about the transformation matrices, the rotation, translation and scale matrices. And the view and projection matrices as well.
A little of the GLSL shading language and what are 3D models (Vertex positions, normals, texture coordinates and materials).
Ok, those are the keywords, now google it all. Here is a nice series of tutorials about vector operations for ya: http://www.dickbaldwin.com/KjellTutorial/KjellVectorTutorialIndex.htm
这是一个不错的网站，包含 16 个入门教程
http://learningwebgl.com/blog/?page_id=1217< /a>
Here is a nice website with 16 starter tutorials
http://learningwebgl.com/blog/?page_id=1217
您正在寻找的具有 3D 内容的画布，现已成为 WebGL。
我找到了一个教程：学习 WebGL
What you are looking for Canvas with 3D content, has now become WebGL.
I found a tutorial: Learning WebGL
您可能想要类似 Three.js 的东西。它主要是一个 WebGL 框架，但您也可以在 (2D) 画布上使用/后备。
以下是一些 3D 画布演示。
You probably want something like three.js. It's primarily a WebGL framework, but you can also use/fallback on (2D) canvas.
Here are some of the 3D canvas demos.
你知道WebGL吗？
http://en.wikipedia.org/wiki/WebGL
Do you know WebGL?
http://en.wikipedia.org/wiki/WebGL