three.js中文文档学习之创建场景
什么是Three.js？
如果你正在读这篇文章，你可能对Three.js有一定的了解，那我们来简单地介绍下Three.js是什么.
Three.js是一个库，使得WebGL的3D效果在浏览器中运用很容易。而在原始的WebGL中一个简单的立方体会变成数百Javascript和着色器代码的行，而一个Three.js只需要一点点代码.
本节目标是为 three.js 做简介。我们从使用旋转立方体来搭建场景开始。如果遇到困难需要帮助，页面底部有可参考的源码。
一个场景至少需要的三种类型组件
- 相机/决定哪些东西将在屏幕上渲染
- 光源/他们会对材质如何显示，以及生成阴影时材质如何使用产生影响
- 物体/他们是在相机透视图里主要的渲染队形：方块、球体等
开始前
在计算机中保存如下 HTML 代码，并在 js 目录下包含 three.js，然后在浏览器中打开
<html>
<head>
<meta charset=utf-8>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="js/three.js"></script>
<script>
// Our Javascript will go here.
</script>
</body>
</html>
接下来的代码都会下载 script 标签中
创建示例场景
为了利用three.js来进行展示，我们需要三种元素：场景，摄像机，渲染器，以便来渲染摄像机中的场景。
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 );
让我们花点时间来解释发生了什么。我们现在创建了场景，摄像机和渲染器。
在 three.js 中有几种摄像机。我们暂时用的是 PerspectiveCamera （透视摄像机）
它的第一个属性是视图角（FOV)，它 是能看见的视图范围，其值表示角度大小。
第二个属性是宽高比。大多数情况你想要使用被高除过之后的宽度，不然会发生像在宽屏电视上放旧电影的情况 —— 图像看起来被压扁了。
后面两个属性是近景面和远景面。只会渲染这两个面之间的区域。目前你不必关心这些，使用这些参数能提高性能。
接下来谈谈渲染器。这便是神奇之处。除了我们这里用的 WebGLRenderer 外， three.js 还提供一些渲染器用在不支持 WebGL 的老旧浏览器上。
除了创建渲染器实例，我们也需要设置应用渲染的尺寸。推荐使用填充整个应用的宽高 —— 本例中是浏览器窗口的宽高。对于性能优先的应用，你能使用 setSize 来设置更小的值，比如 window.innerHeight/2， window.innerWidth/2，会渲染一半的尺寸。
如果你想低分辨率地渲染整个尺寸，你可以设置 setSize 的第三个参数 — uodateStyle 为 <font color="#FF1493">false</font> ，如果 canvas 元素宽高都为 100%，则会以 1/2 分辨率渲染应用。
再尔，我们需要在 HTML 中添加被渲染的元素。渲染器通过 canvas 来给我们展示场景。
“都很好，但之前说的立方体呢” 让我们现在添加。
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
我们需要 BoxGeometry来创建立方体。这个对象包含立方体所有的点（顶点）和填充（面）。我们以后会讨论。
除了几何体外，我们还需要材质为其上色。three.js 提供了一些材质，但我们暂且使用 MeshBasicMaterial。所有材质接受并应用一个包含所有属性的对象。为简单起见，我们仅仅提供一个颜色属性： 绿色 —— <font color="#00ff00">0x00ff00</font> 。和 CSS 和 PS 里的一样采用十六进制的颜色。
我们需要的第三个要素是 Mesh。 mesh 是一个将材质应用到几何体上的对象，然后我们能将其放入场景中，并自由移动。
当我们调用 scene.add() ，我们添加的会默认显示在坐标（0，0,0,）处。这会导致摄像机和立方体内部重叠。为了避免这点，我们简单地把摄像机往外移一点。
渲染场景
如果你在 HTML 文件中复制了如上代码，屏幕不会显示东西。因为我们还没渲染场景。所以我们需要调用渲染器或者动画循环。
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();
这会创建一个让渲染器每秒绘制一帧的循环。如果你对网页游戏编程不了解，你可能会说“为什么不 写setInterval 函数呢？”事实上，我们可以，但是 requestAnimationFrame 好处更多。最重要的好处是当浏览器切换到另一个标签页时，requestAnimationFrame 会暂停渲染，因此不会浪费宝贵的处理能力和电池寿命。
让立方体动起来
如果你插入了我们刚刚创建的代码，你应该会看见一个绿色的立方体。让它旋转起来不至于单调。
在animate 函数中的 renderer.render 上添加如下代码：
cube.rotation.x += 0.01; cube.rotation.y += 0.01;
它会按帧运行（每秒60帧），并赋予立方体优雅的动画。基本上，应用运行时，你想移动或改变任何元素，必须通过动画循环。你当然在此处能调用其他函数，以免animate函数上百行代码结尾。
结果
恭喜！你现在创建好了第一个 three.js 应用。很简单，但总得突破。
完整代码参考如下。琢磨一下并深刻理解其工作机理
<html>
<head>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="js/three.js"></script>
<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.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
var animate = function () {
requestAnimationFrame( animate );
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
};
animate();
</script>
</body>
</html>
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。
相关推荐
-
Three.js快速入门教程
引言 本文主要是讲解Three.js的相关概念,帮助读者对Three.js以及相关知识形成比较完整的理解. 近年来web得到了快速的发展.随着HTML5的普及,网页的表现能力越来越强大.网页上已经可以做出很多复杂的动画,精美的效果. 但是,人总是贪的.那么,在此之上还能做什么呢?其中一种就是通过WebGL在网页中绘制高性能的3D图形. OpenGL,WebGL到Three.js OpenGL大概许多人都有所耳闻,它是最常用的跨平台图形库. WebGL是基于OpenGL设计的面向web的图形标准,
-
Three.js基础学习教程
一.Three.js官网及使用Three.js必备的三个条件 1.Three.js 官网 https://threejs.org/ 2.使用Three.js必备的三个条件 (To actually be able to display anything with Three.js, we need three things: A scene, a camera, and a renderer so we can render the scene with the camera.) 大致意思是使用
-
three.js快速入门【推荐】
Three.js的核心五步就是: 1.设置three.js渲染器 2.设置摄像机camera 3.设置场景scene 4.设置光源light 5.设置物体object 1.设置three.js渲染器 三维空间里的物体映射到二维平面的过程被称为三维渲染. 一般来说我们都把进行渲染操作的软件叫做渲染器. 具体来说要进行下面这些处理. var renderer; function initThree(){ width = document.getElementById("box").clie
-
Three.js基础部分学习
一.关于使用Three.js几点理论说明 1.请参考官网地址 https://threejs.org/ 2.使用three.js必备条件 <场景 A scene.相机a camera.渲染器 a renderer 三者缺一不可> To actually be able to display anything with Three.js, we need three things: A scene, a camera, and a renderer so we can render the
-
three.js中文文档学习之通过模块导入
前言 本文主要给大家介绍了关于three.js通过模块导入的相关内容,通过 script 标签导入 three.js 是很好的入门并快速运行的方式,对于长期更新的项目有些不足,比如: 你需要手动调用和引入库里的副本,作为你项目源码的一部分. 更新库的版本是手动的过程 当引入新版本库,你的版本管理差异会与源文件混乱 使用像 NPM 这样的依赖管理能避免这些版本问题的不足. 通过 NPM 安装 three.js 已作为 npm 模块发布,详见:npm.关于npm的卸载与安装大家可以参考这篇文章:ht
-
three.js中文文档学习之如何本地运行详解
前言 本文属于系列问题,需要的朋友们开始之前可以参考以下的两篇文章: 1.three.js中文文档学习之创建场景 2.three.js中文文档学习之通过模块导入 如果你只是使用程序化的几何体,不需要加载任何材质,网页应该直接从文件系统加载,只需要双击文件管理器中 HTML 文件,应该在你的浏览器能够运行(地址栏长这样子:file:///yourFile.html) 从外部文件加载内容 如果你从外部文件下载模块和材质,由于浏览器的 同源政策 的安全限制,会引发安全异常而加载失败. 有两种解决办法:
-
three.js中文文档学习之创建场景
什么是Three.js? 如果你正在读这篇文章,你可能对Three.js有一定的了解,那我们来简单地介绍下Three.js是什么. Three.js是一个库,使得WebGL的3D效果在浏览器中运用很容易.而在原始的WebGL中一个简单的立方体会变成数百Javascript和着色器代码的行,而一个Three.js只需要一点点代码. 本节目标是为 three.js 做简介.我们从使用旋转立方体来搭建场景开始.如果遇到困难需要帮助,页面底部有可参考的源码. 一个场景至少需要的三种类型组件 相机/决定哪
-
详解Chai.js断言库API中文文档
Chai.js断言库API中文文档 基于chai.js官方API文档翻译.仅列出BDD风格的expect/should API.TDD风格的Assert API由于不打算使用,暂时不放,后续可能会更新. BDD expect和should是BDD风格的,二者使用相同的链式语言来组织断言,但不同在于他们初始化断言的方式:expect使用构造函数来创建断言对象实例,而should通过为Object.prototype新增方法来实现断言(所以should不支持IE):expect直接指向chai.ex
-
使用Python3内置文档高效学习以及官方中文文档
概述 从前面的对Python基础知识方法介绍中,我们几乎是围绕Python内置方法进行探索实践,比如字符串.列表.字典等数据结构的内置方法,和大量内置的标准库,诸如functools.time.threading等等,而我们怎么快速学习掌握并学会使用这个Python的工具集呢? 我们可以利用Python的内置文档大量资源既可以掌握许多关于Python工具集的基本使用. dir函数 Python中内置的dir函数用于提取某对象内所有属性的方法,,诸如对象的方法及属性 L = [1, 2, 3, 4
-
详解vue axios中文文档
axios中文文档 在用Vue做开发的时候,官方推荐的前后端通信插件是axios,Github上axios的文档虽然详细,但是却是英文版.现在发现有个axios的中文文档,于是就转载过来了! 原文地址 : https://github.com/mzabriskie/axios 简介 版本:v0.16.1 基于http客户端的promise,面向浏览器和nodejs 特色 浏览器端发起XMLHttpRequests请求 node端发起http请求 支持Promise API 拦截请求和返回 转化请
-
基于python-pptx库中文文档及使用详解
个人使用样例及部分翻译自官方文档,并详细介绍chart的使用 一:基础应用 1.创建pptx文档类并插入一页幻灯片 from pptx import Presentation prs = Presentation() slide = prs.slides.add_slide(prs.slide_layouts[1]) # 对ppt的修改 prs.save('python-pptx.pptx') prs.slide_layouts中一共预存有1-48种,采用第六种为空白幻灯片 例slide_lay
-
Node.js中的Buffer对象及创建方式
目录 什么是Buffer? 注意 Buffer中存储的都是二进制数据,但是在显示时以16进制显示 Buffer.length表示占用内存的大小 Buffer打印数字时会以十进制方式显示 Buffer的创建方法 通过Buffer的构造函数,但不推荐使用 通过allocUnsafe方法 通过alloc方法 通过Buffer.from()方法 写入缓冲区 从缓冲区读取数据 将 Buffer 转换为 JSON 对象 拷贝缓冲区 缓冲区与迭代器 总结 什么是Buffer? js语言自身只有字符串数据类型,
-
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
IE中new Date(strDate)返回无效时间解决方式: 方法一: function getDateForStringDate(strDate){ //切割年月日与时分秒称为数组 var s = strDate.split(" "); var s1 = s[0].split("-"); var s2 = s[1].split(":"); if(s2.length==2){ s2.push("00"); } return
-
Keras官方中文文档:性能评估Metrices详解
能评估 使用方法 性能评估模块提供了一系列用于模型性能评估的函数,这些函数在模型编译时由metrics关键字设置 性能评估函数类似与目标函数, 只不过该性能的评估结果讲不会用于训练. 可以通过字符串来使用域定义的性能评估函数 model.compile(loss='mean_squared_error', optimizer='sgd', metrics=['mae', 'acc']) 也可以自定义一个Theano/TensorFlow函数并使用之 from keras import metri