W Design & NEWS

创建三维立方体:一个实用的指南,阅读Three js的现场演示

W-design2015.06.06

你曾经创造了一个三维物体使用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>
   <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>
         // 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>


W design values every chance to work with you.