内容简介：学习 WebGL 的开源库 Three.js
孙广东 2017.3.4
http://blog.csdn.NET/u010019717
百度 第一个词条是： http://hewebgl.com/ 然后就照着学习呗 ， 后面是需要花钱的！
开发环境搭建
VS Code（编辑器） + python（自带的文件服务器） + Three.js（WebGL） 库
1、新建一个空的文件夹 “ThreeWebglProject”，然后使用VS Code打开
2、Ctrl + · 启动终端， 输入命令： git clone https://github.com/mrdoob/three.js.git 下载Three.js 项目到这个路径下。
3、新建第一个文件： Test1.html
<!DOCTYPE html>
<html>
<head>
<title></title>
< style > canvas { width : 100% ; height : 100% }</ style >
< script src = "/three.js/build/three.js" ></ script >
</head>
<body>
< script >
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75 , window.innerWidth / window.innerHeight, 0.1 , 1000 );
var renderer = new THREE.WebGLRenderer();
renderer . setSize (window.innerWidth, window.innerHeight);
document.body. appendChild ( renderer . domElement );
var geometry = new THREE.CubeGeometry( 1 , 1 , 1 );
var material = new THREE.MeshBasicMaterial({color: 0x00ff00 });
var cube = new THREE.Mesh( geometry , material ); scene . add ( cube );
camera . position .z = 5 ;
function render () {
requestAnimationFrame ( render );
cube . rotation .x += 0.1 ;
cube . rotation .y += 0.1 ;
renderer . render ( scene , camera );
}
render ();
</ script >
</body>
</html>
4、在 资源管理器 中双击这个文件，在浏览器中打开。 我这是不会正常运行的！
你可以在浏览器中 F12 看问题。
5、我解决问题是 使用 Python 自带的文件服务器
还是在 vscode 的终端内输入： （看你安装了哪个版本就执行哪个命令）
Python2.x : python -m SimpleHTTPServer 8000
Python3.x : python -m http.server 8000
在浏览器中输入网址：
浏览器打开的这个页面 不用关闭， 每次改动完 刷新就行了！
另外两个个 依赖库的下载：
git clone https://github.com/tweenjs/tween.js.git
git clone https://github.com/mrdoob/stats.js/.git
其实就是 Stats.js 和 Tween.js 两个文件有用， 但是如果你不想破环案例的正常使用，可以把他们单独拷贝出来，而不是移动！
可能会有更好的方式， 比如创建一个web 项目？ 我不知道怎么弄
可以使用 BootCDN
不下载 这三个模块， 使用在线的！ 需要什么包，搜索就行了， 没有的就没有办法了
http://www.bootcdn.cn/three.js/
<scriptsrc="http://cdn.bootcss.com/three.js/r83/three.js"></script>
http://www.bootcdn.cn/stats.js/
<scriptsrc="http://cdn.bootcss.com/stats.js/r17/Stats.js"></script>
http://www.bootcdn.cn/tween.js/
<scriptsrc="http://cdn.bootcss.com/tween.js/r14/Tween.js"></script>
还是划线的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset= "UTF-8" >
<title> ThreeF¶ </title>
<!--<script src="/three.js/build/three.js"></script>-->
< script src = "http://cdn.bootcss.com/three.js/r83/three.js" ></ script >
< style type = "text/css" >
div#canvas-frame {
border : none ;
cursor : pointer ;
width : 100% ;
height : 600px ;
background-color : #EEEEEE ;
}
</ style >
< script >
var renderer ;
function initThree () {
width = document. getElementById ( 'canvas-frame' ). clientWidth ;
height = document. getElementById ( 'canvas-frame' ). clientHeight ;
renderer = new THREE.WebGLRenderer({
antialias : true
});
renderer . setSize ( width , height );
document. getElementById ( 'canvas-frame' ). appendChild ( renderer . domElement );
renderer . setClearColor ( 0xFFFFFF , 1.0 );
}
var camera ;
function initCamera () {
camera = new THREE.PerspectiveCamera( 45 , width / height , 1 , 10000 );
camera . position .x = 0 ;
camera . position .y = 1000 ;
camera . position .z = 0 ;
camera . up .x = 0 ;
camera . up .y = 0 ;
camera . up .z = 1 ;
camera . lookAt ({
x : 0 ,
y : 0 ,
z : 0
});
}
var scene ;
function initScene () {
scene = new THREE.Scene();
}
var light ;
function initLight () {
light = new THREE.DirectionalLight( 0xFF0000 , 1.0 , 0 );
light . position . set ( 100 , 100 , 200 );
scene . add ( light );
}
var cube ;
function initObject () {
var geometry = new THREE.Geometry();
var material = new THREE.LineBasicMaterial( { vertexColors: true } );
var color1 = new THREE.Color( 0x444444 ), color2 = new THREE.Color( 0xFF0000 );
// ¿P(ïå12¹r³
var p1 = new THREE.Vector3( - 100 , 0 , 100 );
var p2 = new THREE.Vector3( 100 , 0 , - 100 );
geometry . vertices . push ( p1 );
geometry . vertices . push ( p2 );
geometry . colors . push ( color1 , color2 );
var line = new THREE.Line( geometry , material , THREE . LinePieces );
scene . add ( line );
}
function threeStart () {
initThree ();
initCamera ();
initScene ();
initLight ();
initObject ();
renderer . clear ();
renderer . render ( scene , camera );
}
</ script >
</head>
<body onload= "threeStart();" >
<div id= "canvas-frame" ></div>
</body>
</html>
当然了，涉及到复杂的话就没有 办法了， 比如本地的模型资源，声音，纹理，本地其它的脚本， 还是要使用一开始介绍的！
以上所述就是小编给大家介绍的《学习 WebGL 的开源库 Three.js》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
- 如何学习开源项目
- 如何高效地学习开源项目
- 一文盘点近期热门机器学习开源项目！（研究框架、AutoML库、深度学习...）
- JavaScript也能玩机器学习――5个开源 JavaScript 机器学习框架
- DeepMind开源强化学习库TRFL
- Google 开源新型强化学习框架 Dopamine
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Algorithms Unlocked
Thomas H. Cormen / The MIT Press / 2013-3-1 / USD 25.00
Have you ever wondered how your GPS can find the fastest way to your destination, selecting one route from seemingly countless possibilities in mere seconds? How your credit card account number is pro......一起来看看 《Algorithms Unlocked》 这本书的介绍吧!
