内容简介：学习 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
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
