Threes.js入门篇之2

与OpenGL一样，Three.js 符合右手坐标系，X轴向右，Y轴向上，Z轴朝外：

Three.js 的绘制流程可以描述为：

1. 生成 渲染器 - THREE.WebGLRenderer，并绑定Canvas绘图画布

2. 建立 场景管理器 - THREE.Scene，管理场景对象（场景树）

生成场景对象THREE.mesh，添加到场景管理器

3. 创建 相机 - THREE.PerspectiveCamera，该相机支持透视投影

将相机添加到场景管理器

4. 渲染器 调用 场景器管理器 和相机，执行渲染操作

参考代码如下（run 一下看看效果吧，可以调整下相机位置 - 比如z值，看看目标大小如何变化）：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title>Hello World! - linol</title><script type="text/javascript" src="three.js"></script>
</head>
<body οnlοad="init()"><canvas id="Canvas3D" width="352" height="288"/><script type="text/javascript">function init(){// render - attach canvasvar renderer = new THREE.WebGLRenderer({canvas: document.getElementById('Canvas3D')});// scenevar scene = new THREE.Scene();var sphere = new THREE.Mesh( new THREE.SphereGeometry(3,4), new THREE.MeshBasicMaterial({color: 0x00FF00}) );scene.add(sphere);// cameravar camera = new THREE.PerspectiveCamera(45, 4/3, 1, 1000); // 1.33 Fovcamera.position.set(0, 0, 10);scene.add(camera);renderer.render(scene, camera);}</script>
</body>
</html>

Threes.js入门篇之2 - Hello World相关推荐

Threes.js入门篇之6 - 场景漫游
THREE.js 支持两种形式的漫游,第一人称漫游(First Person) 和飞行(Fly),可以分别参考 example 下的 "misc_fps.html" 和 &quo ...
Threes.js入门篇之9 - 全景图
全景图是一个当下非常流行的展示方式,在 VR | AR领域有广泛应用. 在三维内的全景图通常是根据鼠标事件调整摄像机位置(在包围球内旋转),其基本思路一致,包围球可以通过球面.立方体来实现,在 ...
Threes.js入门篇之7 - 场景光照
Three.js 主要支持四种光源模式,分别是环境光.点光源.平行光和聚光灯.另外有半球光源.面光源等,本节暂不涉及. 一. 环境光 Ambient Light:所有对象的整体光照模型,控制整 ...
Threes.js入门篇之3 - 场景与相机
• Three.js 的场景 THREE.Scene 执行场景树管理,场景的创建只需要一句话: var scene = new THREE.Scene(); 场景常用操作包含: 1.scene.add ...
Threes.js入门篇之5 - 场景操纵器Trackball
Three.js 提供了很多操纵器,example下也给了一些操纵器(也叫控制器)的例子,引用 js 可以参考 examples/js/controls/TrackballControls.js . ...
Threes.js入门篇之4 - World View Projection
在三维世界,一个模型要想最终呈现到一个照片上,需要经过三次矩阵变换,这三个矩阵分别是: 模型矩阵(World) - 视图矩阵(View)- 投影矩阵(Projection) 一. 模型矩阵将局部坐 ...
Threes.js入门篇之8 - 材质与纹理
材质是指几何对应的颜色信息,想让一个对象最终呈现出你所希望的样子,其中最重要的一个因素就是材质. 来看一下例子 "canvas_material.html" [html] vie ...
js入门篇--制作简单闪烁图片
js入门篇–制作闪烁图片刚刚学习,大神勿喷,还请多多指点... <body "soccerOnload()" topmargin="0"> //o ...
（转）web前端开发分享-css,js入门篇
关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学 ...

Threes.js入门篇之2 - Hello World

Threes.js入门篇之2 - Hello World相关推荐

最新文章

热门文章