匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。Three.js学习笔记 – “我和小伙伴都惊呆了”的特效和Three.js初探 - Velx - 博客园
随笔 - 13, 文章 - 33, 评论 - 47, 引用 - 0
什么是Three.js
three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精采的演示。不过，这款引擎目前还处在比较不成熟的开发阶段，其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度（尤其是文档的匮乏）three.js的代码托管在github上面。
上面摘自百度百科。依我来看就是一个在HTML5画布（canvas）上显示的3D引擎。如果你之前折腾过本地3D引擎，比如Steam，寒霜，那上手这个就非常简单了。
学习这个引擎难处有几点：第一，正如上面所说，没有比较系统的文档，只有一些大神写的Demo，对于一些js基础不好或者英语不好的童鞋来说简直不能历届；第二，一般人对游戏引擎里面的纹理、光源、材质等词不甚理解。第三，不晓得怎么去调试。
在开始正式介绍之前，可以先看看Demo，了解一下这个引擎能做什么。
官方网站上的例子：
GitHub上的例子：
其中几个比较有特色的列一下（提提你们的胃口~）（都不要使用IE或基于IE的浏览器打开！推荐使用Chrome）：
最基本的Hello World：
调用你的摄像头：
体感操作（你没有看错！）：
支持你的游戏手柄（XBox等）：
3D建模和方向键控制移动方向：
SkyBox和3个气泡渲染（可见Three.js的渲染真心不赖）：
3D红蓝偏光的名车展（打开前自备偏光镜）：
帅爆了的元素周期表：
跑车游戏：
有没有和小伙伴们都惊呆了？&&至少我是的。没有使用Flash，没有大量的图片拼接，绝大多数的特效靠代码实现，包括文章配图那款SS跑车，AMAZING！
Three.js环境的准备
正文现在开始。
我整个例子有不少地方参考的是。向这样的译者表示绝对的敬意！（话说原文是日文的，我这个看英语文档无压力的无论如何也受不鸟日文啊&&）
Three.js从GitHub库中获取：，下载请点击在页面右边的&Download ZIP&按钮。比较齐活的例子在：可以下载。
Three.js至少需要build目录下的three,js，three.min.js是前者的压缩版。docs下的index.html是器官方文档（我还没细致看过，质量怎么样没法说）。example目录下都是例子，值得一提的是，这些例子必须要挂到服务器里面预览，本地打开会有问题，IIS或者Tomcat或者Apache都可以（以后会说到为什么）。
运行第一个Three.js
第一个例子也用来确定一下Three.js是否能正常运行。在WebRoot下建一个js文件夹，把three,js拷贝进去（three.min.js也行）。
在WebRoot下建一个index.html，内容如下：
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&Three.js チュートリアル１&/title&
&script src="Three.js"&&/script&
&style type="text/css"&
div#canvas-frame {
width: 600
height: 600
background-color: #EEEEEE;
function initThree() {
width = document.getElementById('canvas-frame').clientW
height = document.getElementById('canvas-frame').clientH
renderer = new THREE.WebGLRenderer({
antialias : true
renderer.setSize(width, height);
document.getElementById('canvas-frame')
.appendChild(renderer.domElement);
renderer.setClearColorHex(0xFFFFFF, 1.0);
function initCamera() {
camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
camera.position.x = 100;
camera.position.y = 20;
camera.position.z = 50;
camera.up.x = 0;
camera.up.y = 0;
camera.up.z = 1;
camera.lookAt({
function initScene() {
scene = new THREE.Scene();
function initLight() {
light = new THREE.DirectionalLight(0xFF, 0);
light.position.set(100, 100, 200);
scene.add(light);
function initObject() {
cube = new THREE.Mesh(new THREE.CubeGeometry(50, 50, 50), //形状の設定
new THREE.MeshLambertMaterial({
color : 0xff0000
}) //材質の設定
scene.add(cube);
cube.position.set(0, 0, 0);
function threeStart() {
initThree();
initCamera();
initScene();
initLight();
initObject();
renderer.clear();
renderer.render(scene, camera);
&body onload="threeStart();"&
&div id="canvas-frame"&&/div&
执行的结构应该是这样，Three.js也比较大，网的质量可能不好，看不到效果的多刷几次：
自二个例子：一个可控制的长方体
最后的效果（没看到效果多刷几次）：
我没有给李兴华打广告&&只是这本书在我写Demo时就在我手边，然后就当了模特了~
贴出主要的代码，附上一些主要的注释：
&!doctype html&
&html lang="en"&
&title&Template (Three.js)&/title&
&meta charset="utf-8"&
&meta name="viewport"
content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"&
&link rel=stylesheet href="css/base.css" /& &!-- 这个样式表主要写了body的背景为#F5F5F5，就是整个网页的背景颜色 --&
&script src="../js/Three.js"&&/script& &!-- 这个是Three.js引擎的js --&
&script src="../js/Detector.js"&&/script&
&script src="../js/Stats.js"&&/script&
&script src="../js/OrbitControls.js"&&/script&
&script src="../js/THREEx.KeyboardState.js"&&/script&
&script src="../js/THREEx.FullScreen.js"&&/script&
&script src="../js/THREEx.WindowResize.js"&&/script&
&script src="../js/Texture.js"&&/script& &!-- 一些js工具类，现在不深究 --&
&div id="ThreeJS"
style="z-index: 1; position: left: 0 top: 0px"&&/div& &!--这个div就是整个画布 --&
//////////
// MAIN //
//////////
// standard global variables
var container, scene, camera, renderer, controls, &!-- 几个变量代表的含义：容器、场景、摄像机（视角）、渲染器、控制装置 --&
var keyboard = new THREEx.KeyboardState();
var clock = new THREE.Clock();
// custom global variables
// initialization
// animation loop / game loop
animate();
///////////////
// FUNCTIONS //
///////////////
function init() { &!-- 初始化 --&
///////////
// SCENE //
///////////
scene = new THREE.Scene(); &!-- 定义场景 --&
////////////
// CAMERA //
////////////
// set the view size in pixels (custom or according to window size)
// var SCREEN_WIDTH = 400, SCREEN_HEIGHT = 300;
var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerH
// camera attributes
var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
// set up camera
camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR); &!-- 定义视角 --&
// add the camera to the scene
scene.add(camera);
// the camera defaults to position (0,0,0)
// so pull it back (z = 400) and up (y = 100) and set the angle towards the scene origin
camera.position.set(-400, 150, 200); &!--视角的位置 --&
camera.lookAt(scene.position);
//////////////
// RENDERER //
//////////////
// create an choose antialias setting.
if (Detector.webgl)
renderer = new THREE.WebGLRenderer({
antialias : true
renderer = new THREE.CanvasRenderer();
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
// attach div element to variable to contain the renderer
container = document.getElementById('ThreeJS');
// alternatively: to create the div at runtime, use:
// container = document.createElement( 'div' );
// document.body.appendChild( container );
// attach renderer to the container div
container.appendChild(renderer.domElement);
////////////
// EVENTS //
////////////
// automatically resize renderer
THREEx.WindowResize(renderer, camera);
// toggle full-screen on given key press
THREEx.FullScreen.bindKey({
charCode : 'm'.charCodeAt(0)
//////////////
// CONTROLS //
//////////////
// move mouse and: left
click to rotate,
middle click to zoom,
click to pan
controls = new THREE.OrbitControls(camera, renderer.domElement); &!-- 设置控制，这里只有鼠标操作 --&
///////////
// STATS //
///////////
// displays current and past frames per second attained by scene
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.bottom = '0px';
stats.domElement.style.zIndex = 100;
container.appendChild(stats.domElement);
///////////
// LIGHT //
///////////
// create a light
var light = new THREE.PointLight(0xffffff); &!-- 设置光源 --&
light.position.set(0, 250, 0);
scene.add(light);
var cubeGeometry = new THREE.CubeGeometry(260, 35, 185, 1, 1, 1); &!-- 定义一个立方体，就是那本书的模型 --&
var cubeMaterialArray = [];
cubeMaterialArray.push(new THREE.MeshBasicMaterial({
map : new THREE.ImageUtils.loadTexture('img/side-up.png') &!-- 给每一面上贴图，下同 --&
cubeMaterialArray.push(new THREE.MeshBasicMaterial({
map : new THREE.ImageUtils.loadTexture('img/side-up.png')
cubeMaterialArray.push(new THREE.MeshBasicMaterial({
map : new THREE.ImageUtils.loadTexture('img/up.png')
cubeMaterialArray.push(new THREE.MeshBasicMaterial({
map : new THREE.ImageUtils.loadTexture('img/down.png')
cubeMaterialArray.push(new THREE.MeshBasicMaterial({
map : new THREE.ImageUtils.loadTexture('img/side-right.png')
cubeMaterialArray.push(new THREE.MeshBasicMaterial({
map : new THREE.ImageUtils.loadTexture('img/side-left.png')
var cubeMaterials = new THREE.MeshFaceMaterial(cubeMaterialArray);
cube = new THREE.Mesh(cubeGeometry, cubeMaterials);
cube.position.set(0, 0, 0); &!-- 立方体放置的位置 --&
scene.add(cube);
function animate() {
requestAnimationFrame(animate);
function update() {
// delta = change in time since last call (in seconds)
var delta = clock.getDelta();
controls.update();
stats.update();
function render() {
renderer.render(scene, camera);
其实学习Three.js大多是这样，因为缺少相应的文档，看大牛们写的注释是最快上手的办法。
这次就先到这儿，下次再说怎么一点点在画布上作画。
本文转载自tony的小站:&建站新闻 | 创建三维立方体：一个实用的指南，阅读Three js的现场演示 | 【华仕尊城】高端网站设计
W Design & NEWS
创建三维立方体：一个实用的指南，阅读Three js的现场演示
你曾经创造了一个三维物体使用JavaScript？当然，你可能会做的。但创造3D纯JavaScript需要大量的代码，这就是阅读Three js显示它的魔力。随着阅读Three js，你可以创建3D环境的复杂性，在你的浏览器的一个非常低的水平。本教程是用使你的意图暴露于阅读Three js的力量。在本教程中，我已经：1。什么是阅读Three js？2。阅读Three js的关键特征3。浏览器的兼容性4。开始阅读Three js一个阅读Three js的实用指南在“开始使用三。JS”部分，我解释了如何与生活工作代码和演示制作一个旋转的3D立方体，你可以了解如何阅读Three js实际上。希望这个教程，如果你是新来的3D世界帮助你尤其是很多。让我们开始了解阅读Three js！什么是阅读Three js？阅读Three js是一个开源的轻量级JavaScript 3D库，允许你创建和显示动画，交互式3D图形在任何兼容的Web浏览器，而不必依赖于专有的浏览器插件。而在原WebGL的一个简单的立方体变成了渲染和JavaScript代码上百行，只相当于一个阅读Three js的那一部分。阅读Three js运行在所有支持的浏览器允许你创建和WebGL GPU加速的3D动画利用JavaScript作为一个网站的一部分。随着阅读Three js，你就可以轻松地创建对象，摄像机，灯光，材料，和更多。最好的是，你可以与HTML5画布，结合阅读Three js脚本使用SVG，css3d或WebGL。阅读Three js的关键特征阅读Three js具有以下特点：渲染：&canvas&，& & WebGL，SVG，css3d，DOM，软件；效果：立体，crosseyed，浮雕，和更多。场景：在运行时添加/删除对象；线性和指数的雾。相机：正投影和透视；控制器：FPS，轨迹球，路径和更多。动画：关键帧和变形。灯：半球，定向，地区，环境，点和点光源；阴影投射和接收。材料：丰，面，深度，兰伯特和更多-所有阴影平滑，纹理，光泽和更。一个阅读Three js的实用指南材质：访问完整的GLSL能力：经过深入，镜头光晕，和综合处理库。对象：骨头，线，网格，精灵，颗粒，丝带，和更多。几何：圆柱体，立方体，平面，球面，环面，环，3D文字多；改性剂：挤出机，车床和管。装载机：图像，JSON，二进制，XHR，场景和更多。事业：全套的时间和三维的数学函数，包括四元数，锥，三角，矩阵，射线和更多。出口/进口：3D MAX，CTM，搅拌机，OBJ，FBX。例子：150 +文件编码实例加纹理，模型，声音，字体，和其他支持文件。调试：阅读Three js的检查员，检查员和WebGL，stats.js。支持：API文档，公共论坛和维基。浏览器的兼容性不幸的是，3D动画是不是所有的浏览器都支持。目前，我们限制谷歌浏览器，Mozilla Firefox，Safari和Opera，在Internet Explorer 11中有部分WebGL支持。在Chrome和Firefox的最新版本，默认是启用WebGL支持。随着时间的推移，希望全力支持Internet Explorer将在未来的挑。在我的经验中，Chrome浏览器是最好的工作，因为它的底层的JavaScript引擎是极快的，它支持WebGL，SVG和画布。Firefox是我的第二选择为JavaScript引擎比Chrome慢一点，但即使是在这一伟大的浏览器渲染技术支持。此外，它正随着每一个新版本的速度。一个阅读Three js的实用指南开始阅读Three js在你开始之前：为了使用阅读Three js，你需要在你的HTML文档的最新版本的参考。前往官方网站阅读Three js。然后，下载阅读Three js的最新版本，它包括在你的HTML会像任何其他的JS文件。&html&
&&&&&&&title&My&first&Three.js&app&/title&
&&&&&&&style&canvas&{&width:&100%;&height:&100%&}&/style&
&&&&/head&
&&&&&&&script&src=&js/three.min.js&&&/script&
&&&&&&&script&
&&&&&&&&&//&Our&Javascript&will&go&here.
&&&&&&&/script&
&&&&/body&&/html&这是所有。所有的代码，我们要创建将进入空的&&剧本&&标签。创建场景：与阅读Three js什么显示，你需要创建三个东西：一个场景，一个摄像头和一个渲染器。这样做，你就可以用相机渲染场景。让我们以一个场景开始：var&scene&=&new&THREE.Scene();在设置场景，你创建一个摄像机。把它作为用户从观。var&camera&=&new&THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,&1,10000);让我解释一下这里发生了什么。阅读Three js有几个不同的相机，但为了保持代码简单，我用自己的。在上面的代码中，有四个属性：第一是的垂直视野（自下而上）度。二是纵横比，元素的高度将宽度。其次是近裁剪平面，最后是远裁剪平面。远近控制物体的渲染属性。这意味着，太远或太接近相机不会被渲染的对象。在创建相机，现在我要建立webglrenderer。除了对webglrenderer阅读Three js，还有其他一些渲染器如canvasrenderer–可以作为用户的浏览器不支持WebGL的一些原因回退。var&renderer&=&new&THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,&window.innerHeight);document.body.appendChild(renderer.domElement);正如你可以看到，除了创建渲染器的一个实例，我们还需要设置的大小，我们想要渲染显示我们的程序。在这种情况下，我使用的浏览器窗口的宽度和高度。最后，我已经添加到HTML页面渲染元素。这是通过渲染器用于绘制场景的&canvas&元素。创建3D立方体：在建立阶段，现在我要创建一个三维立方体。创建一个立方体，我们需要使用包含所有顶点和立方体的面boxgeometry对象。var&geometry&=&new&THREE.BoxGeometry(700,&700,&700,&10,&10,&10);这种方法需要五个参数的构造函数：第一是在X轴上的立方体的边的宽度，二是立方体的边在Y轴上的高度，和第三是立方体的两侧对Z轴的深度。三个可选参数，其默认值是1，是分段面沿宽度，高度和深度，两侧分别。我建立了立方体的几何，现在我们需要的颜色，使用的材料。阅读Three js带有大量的材料，但我用meshbasicmaterial这里。var&material&=&new&THREE.MeshBasicMaterial({color:&0xfffff,&wireframe:&true});为了简单起见，我只提供了一个0xfffff是蓝颜色属性。我还设置线框为真，所以你可以看到动画立方体更清晰。我们需要做的下一件事是一个网格。var&cube&=&new&THREE.Mesh(geometry,&material);
scene.add(cube);在上面的代码中，模型对象需要两个参数：第一个是几何和第二应用于它的材料。最后，我添加了魔方的场景。默认情况下，我们调用函数时的情景。（），它增加了立方体的坐标（0,0,0）。这会导致两个立方体和相机在彼此。为了避免这种情况，我们需要设置摄像机的位置在渲染场景。camera.position.z&=&1000;正如你可以看到，我们上面写任何代码非常简单，这是因为阅读Three js让你远离一切复杂的东西。渲染场景：如果你粘贴上面的代码到HTML文件（我在本教程的第一步），并在浏览器中测试它，你会看到什么。那是因为我们还没有告诉场景渲染呢。渲染场景，我们需要一个渲染循环。function&render()&{&&&requestAnimationFrame(render);
&&&renderer.render(scene,&camera);
}render();此代码创建了一个循环，指示渲染绘制场景。在这里，你可能会困惑为什么我没有使用setInterval？这是因为使用requestanimationframe而setInterval在许多方面都是有益的。最重要的是，它的停顿，当用户移动到另一个选项卡的浏览器，从而节省宝贵的资源。一个实用的指南，阅读Three js的现场演示动画的立方体：如果你测试的浏览器中的文件，现在你会看到一个蓝色的盒子没有任何动画。让我们通过旋转使它更令人兴奋。添加下面的右下方的requestanimationframe（渲染）在渲染功能。这将运行每一帧，添加一个漂亮的旋转动画的立方体。双语对照cube.rotation.x&+=&0.01;
cube.rotation.y&+=&0.01;结果：恭喜！你已经成功的建立了你的第一个阅读Three js程序。下面是完整的代码：&html&&head&&title&My&first&Three.js&app&/title&&style&canvas&{&width:&100%;&height:&100%&}&/style&&/head&&body&&script&src=&js/three.min.js&&&/script&&script&var&scene&=&new&THREE.Scene();var&camera&=&new&THREE.PerspectiveCamera(75,&window.innerWidth/window.innerHeight,&1,&10000);var&renderer&=&new&THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,&window.innerHeight);document.body.appendChild(renderer.domElement);var&geometry&=&new&THREE.BoxGeometry(700,&700,&700,&10,&10,&10);var&material&=&new&THREE.MeshBasicMaterial({color:&0xfffff,&wireframe:&true});var&cube&=&new&THREE.Mesh(geometry,&material);
scene.add(cube);
camera.position.z&=&1000;&&&&&&&&
function&render()&{requestAnimationFrame(render);
cube.rotation.x&+=&0.01;
cube.rotation.y&+=&0.01;
renderer.render(scene,&camera);
};render();&/script&&/body&&/html&
原文链接：
Design Works
W design values every chance to work with you.}