主要内容：
1.运行环境的搭建
2.第一个例子
这几天一直在想着到底怎么写接下来的东西，虽说是自己记录自己的学习流程，但是依旧想着，怎么让读者，能够好好的循序渐进的学习，目的不纯粹就会导致痛苦，果不其然，想想还是记录自己的学习流程吧
我的第一颗实际是webgl入门指南的第一课，建议大家下载一下，给大家一个地址https://github.com/tparisi/WebGLBook 《WebGL入门指南》的实例代码，同时应作者的授权协议，附上书籍信息。
其实环境搭建很简单只需要一个web服务器就够了，直接把网页部署在服务器就万事大吉了，至于开发环境吗，这个真不好给大家推荐，因为做这个项目，我就用了两款ide。 第一款就是webstorm 我对它的的感觉就是，智能提示太方便了。至于怎么配置，大家百度一下。第二款就是vs，用它开发真不合适，但是他有一点很好，适合入门，连服务器都不需要搭建。把我刚才推荐的代码下载下来，然后打开--网站--选择下载的文件，运行一下立马就可以了，所以很适合入门，特别是我这样，一开始完全没做过web开发的人。刚开始我就遇到一个坑，apache运行书上的2--2就是不现实贴图，我也找不到原因，后来换vs才解决的，至于问题到底是什么，后来我想找到问题到底出在哪里又一次运行apache，但是这次显示贴图了，至于什么原因，我也没找到。但是当时对我的自信心还是很打击的，所以说了这么多就是推荐那些刚入门的使用vs。
对了 调试环境 chrome浏览器直接F12， 或者使用火狐firebug。 至于想看看运行时的webgl底层代码定点着色器，片段着色器的话，就用谷歌浏览器WebGL Inspector 貌似这个在浏览器商店上不是装，因为谷歌被墙的原因吧。不过好消息是，它是开源的，在github上面可以下载，然后自己把它打包一下，在debug模式下使用，打包很简单，要是还是不会的话，可以自己在谷歌看文档，实在不行的话就去360看吧，他把整个谷歌浏览器的文档翻译过来了，从方便大家开发的角度来看很爽，http://open.se.360.cn/open/extension_dev/getstarted.html
以下例子来自《WebGL入门指南》1--1
<!DOCTYPE html>
<html>
<head>
<title>A Simple Three.js Page</title>
<script src="../libs/Three.js"></script>
<script>
function onLoad()
{
//抓取一个div标签作为canvas容器 ，容器干什么的尼？就是你的threejs绘图的地方
var container = document.getElementById("container");
// 创建一个渲染器 渲染器是什么？就是画图的
var renderer = new THREE.WebGLRenderer();
renderer.setSize(container.offsetWidth, container.offsetHeight);
//把渲染器添加到刚才的容器container里面
container.appendChild( renderer.domElement );
// 创建场景 你要显示的东西 包括各种建筑模型啊 任务模型啊 还有你的相机
var scene = new THREE.Scene();
// 这就是创建相机加进了场景 同时设置了位置
var camera = new THREE.PerspectiveCamera( 45, container.offsetWidth / container.offsetHeight, 1, 4000 );
camera.position.set( 0, 0, 3.3333 );
scene.add( camera );
// 这里是创建了一个平面几何 然后转化为mesh 然后添加进了场景，其实这里实现不难，但是难得是如何让大家接受这个逻辑。为什么要从几何体到模型，
// 才能显示出的图形图像的， 这里面很多背景知识后续讲，先放下以免现在没有基础，就将大家带入一个不适合初学者的高度
var geometry = new THREE.PlaneGeometry(1, 1);
var mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( ) );
scene.add( mesh );
// 在渲染器里面加上场景相机 开始渲染渲染场景，
renderer.render( scene, camera );
}
</script>
</head>
<body onLoad="onLoad();">
<div id="container" style="width:500px; height:500px; background-color:#000000"></div>
</body>
</html>
直接运行显示效果黑背景，白色正方形
对于稍有计算机图形图像的人来说可能很好理解我说的，但那时我想起自己睡觉得大学时代，要是当时我看到这个教程，并怀着憧憬来学threejs，不出三分钟肯定会骂街，“这怎么能算是入门知识”。就上在上面我规避了很多基础知识，比如现实的原理 比如画布 不如渲染器 比如场景 这些很关键的东西都没讲，就像下面这个公式一样加入我突然引入。一旦我们知道了他的含义理解起来不难，但是对于刚涉及这个领域的人来说，无异于天方夜谭，虽然我鼓励大家先不要理会其中的深意，先学会使用使用就是了。先向大家展示这个东西神奇的效果，但是毫无疑问，这与我的目的背道而驰，所以我打算后续先讲讲，计算机图形图像的历史，毕竟学习一个学科，学习它的历史是最有效的，但是受限于本人水平有限，估计也讲不到多少东西，聊胜于无吧，要是有大神看不下去了，可以顺便教教我
(《WebGL入门指南》作者： (美)Tony Parisi 译者： 郝稼力 出版社：人民邮电出版社 ISBN：9787115316684)
338
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
