THREEJS 第一章第一个DEMO

来源：互联网发布：侯宝林马季知乎编辑：程序博客网时间：2024/05/17 01:01

主要内容：

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)

0 0

THREEJS 第一章 第一个DEMO

THREEJS 第一章第一个DEMO