3D WebGL demonstration tutorial. Today we continue HTML5 canvas examples. And today we will try to begin learning WebGL. In my demonstration I will show you how to initialize WebGL and draw simple 3D object. Also we will animate this object too.
3D WebGL演示教程。 今天，我们继续HTML5 canvas示例。 今天，我们将尝试开始学习WebGL。 在我的演示中，我将向您展示如何初始化WebGL和绘制简单的3D对象。 此外，我们还将为该对象设置动画。
Here are our demo and downloadable package:
这是我们的演示和可下载的软件包：
现场演示
[sociallocker]
[社交储物柜]
打包下载
[/sociallocker]
[/ sociallocker]
Ok, download the example files and lets start coding !
好的，下载示例文件并开始编码！
步骤1. HTML (Step 1. HTML)
Here are html source code of our demo. As you can see – just empty page.
这是我们演示的html源代码。 如您所见–只是空白页。
index.html (index.html)
<!DOCTYPE html>
<html lang="en" >
<head>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/glMatrix-0.9.5.min.js"></script>
<script type="text/javascript" src="js/webgl-utils.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<title>WebGL demonstration | Script Tutorials</title>
</head>
<body onload="initWebGl();">
<div class="example">
<h3><a href="https://www.script-tutorials.com/making-3d-webgl-demonstration/">WebGL demonstration | Script Tutorials</a></h3>
<canvas id="panel" width="500" height="333"></canvas>
<div style="clear:both;"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en" >
<head>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/glMatrix-0.9.5.min.js"></script>
<script type="text/javascript" src="js/webgl-utils.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<title>WebGL demonstration | S
最低0.47元/天 解锁文章
1053
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
