4 Three.js一个案例详解

之前根绝官网书写了两个简单的案例，今天开始写了一个教程书里面的案例。

案例查看地址：http://www.wjceo.com/blog/threejs/2018-02-09/6.html

（1）创建了渲染器，并传值对象antialias设置为true，告诉Three.js要启用抗锯齿（antialiased）渲染。抗锯齿可以避免绘制物体边缘时产生的锯齿。

（2）创建场景。

（3）创建相机，设置相机的投影视角，并设置相机的位置。

（4）创建一个平行光光源（directional light），在这里我们设置了平行光的一个点，而光线的照射方向就是设置的这个点指向原点的方向。

（5）从48到60行，我们开始绘制立方体。首先我们使用了THREE.ImageUtils.loadTexture方法来加载纹理。然后改变了立方体的材质，MeshBasicMaterial用于定义属性简单的材质，比如固定颜色或是透明。这种材质不会对光照做出任何响应。所以我们用另一种类型的材质来代替它，这就是MeshPhongMaterial。这种类型的材质应用了一种相对简单、仿真度高而又性能优越的着色器模型，也就是著名的“Phong着色法”（Phong shading）。我们现在就可以分辨出立方体的边缘。立方体朝向光源方向的面将会更加明亮，而背对光源的面则会相对阴暗。

在51行，实例化材质的时候，我们将纹理传入进去。Phong内置的着色器结合光源的设置、材质颜色和纹理映射的像素值，使得每一个像素显示正确的颜色，并形成最后的图像效果。

然后我们又创建了一个立方体的集合体，将构造好的几何体、材质和纹理都放到了Three.js的网格中，并存储在变量cube中。

最后，把cube网格加入场景当中，立方体就可以直接显示了。

（6）在62到74行，我们生命一个rotationBool变量来代表模型是否旋转的变量。这里我们直接制作了一个动画，动画里面，每次渲染一次页面，判断是否动画旋转。

在Three.js中，每个物体都有位置（position）、旋转（rotation）和缩放（scale）属性。通过给网格cube的相关属性的赋值，即可修改物体的样式。（在为物体旋转变量赋值时，我们需要注意，大部分的3D图形系统都使用了弧度制（radians）来度量角度。弧度是只单位圆上相应角度的圆弧长度（例如，弧度制的2π就是角度值的360°）。Math.PI相当于180°，因此当我们赋值mesh.rotation.x = Math.PI/12的时候，实际上是绕着x轴旋转了15°）。

requestAnimationFrame()方法是为了重绘使用的。使用它，浏览器可以极大地优化动画的性能表现。因为它会综合考虑所有的绘制请求，把它们都放到同一个重绘步骤中。尤其是在多标签浏览器中，当动画页面处于后台时，浏览器将停止重绘以节省资源提高性能。这个函数呗装专门设置用于制作页面动画，当然也包括WebGL中的动画。

（7）最后一步是给body绑定了一个点击事件，只要点击body，动画就会暂停。

案例代码：

<!doctype html>
<html>
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="build/three.js"></script><style>body {margin: 0;}canvas {width: 100%;height: 100%;display: block;}</style>
</head>
<body>
<script>//创建渲染器，添加到dom当中, antialias（是否启用抗锯齿）var renderer = new THREE.WebGLRenderer({antialias: true});//设置渲染器的尺寸renderer.setSize(window.innerWidth, window.innerHeight);//将渲染器放置到页面当中document.body.appendChild(renderer.domElement);//创建场景var scene = new THREE.Scene();//创建相机，设置位置var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 4000);//设置相机的位置camera.position.set(0, 0, 3);//创建一个平行光光源照射到物体上var light = new THREE.DirectionalLight(0xffffff, 1.5);//设置平型光照射方向，照射方向为设置的点照射到原点light.position.set(0, 0, 1);//将灯光放到场景当中scene.add(light);//创建一个接受光照并带有纹理映射的立方体，并添加到场景中//首先，获取到纹理var map = THREE.ImageUtils.loadTexture("../three.js-master/examples/textures/disturb.jpg");//然后创建一个phong材质来处理着色，并传递给纹理映射var material = new THREE.MeshPhongMaterial({map: map});//创建一个立方体的几何体var geometry = new THREE.CubeGeometry(1, 1, 1);//将集合体和材质放到一个网格中var cube = new THREE.Mesh(geometry, material);//将立方体网格添加到场景中scene.add(cube);//声明一个判断是否旋转的变量var rotationBool = true;(function animate() {renderer.render(scene, camera);if (rotationBool) {cube.rotation.x += 0.02;cube.rotation.y += 0.02;}requestAnimationFrame(animate);})();document.body.onclick = function () {rotationBool = !rotationBool;}</script>
</body>
</html>

4 Three.js一个案例详解相关推荐

js_long.php,protobuf.js 与 Long.js的使用详解
这次给大家带来protobuf.js 与 Long.js的使用详解,是急用protobuf.js 与 Long.js的注意事项有哪些,下面就是实战案例,一起来看一下. protobuf.js的结构和w ...
微信支付 php详解,PHP实现微信支付实战案例详解
这次给大家带来PHP实现微信支付实战案例详解,PHP实现微信支付的注意事项有哪些,下面就是实战案例,一起来看一下. 前期准备: 1.微信认证服务号,并且开通了微信支付 2.微信支付SDK,下载地址:h ...
html css主题,HTML+CSS＝无限可能——案例详解：我的POI主题作品
原标题:HTML+CSS＝无限可能--案例详解:我的POI主题作品在微博发了这个作业,收到很多好评,实在太开心! 斌叔让我来投稿,那今天就以这个网页为案例,把制作过程中我的方法和经验分享给大家. 作 ...
JS window对象详解
JS window对象详解 1.window对象 2.窗口操作打开窗口关闭窗口 3.对话框 confirm prompt 4.定时器 setTimeout和clearTimeout setInte ...
php和js调试,JS调试使用详解
这次给大家带来JS调试使用详解,JS调试的注意事项有哪些,下面就是实战案例,一起来看一下. 试想一下:出现了某个bug,有人用几分钟就搞定了,有人用了半天或者一天都找不到原因所在.你愿意当前者还是后者 ...
python代码案例详解-我用Python抓取了7000 多本电子书案例详解
安装安装很简单,只要执行: pip install requests-html 就可以了. 分析页面结构通过浏览器审查元素可以发现这个电子书网站是用 WordPress 搭建的,首页列表元素很简单 ...
python代码案例详解-第7.20节案例详解：Python抽象类之真实子类
第7.20节案例详解:Python抽象类之真实子类上节介绍了Python抽象基类相关概念,并介绍了抽象基类实现真实子类的步骤和语法,本节结合一个案例进一步详细介绍. 一. 案例说明本节定义了图形 ...
代码检查规则：Python语言案例详解
在之前的文章中代码检查规则:Java语言案例详解学习了Java的检查规则.我们今天将学习<代码检查规则:Python语言案例详解>,内容主要分为两个部分:Python的代码检查规则和Pyt ...
代码检查规则：Java语言案例详解
本节课程为<代码检查规则:Java语言案例详解>, 通常情况下Java的代码检查规则可以分为以下十类: 接下来,让我们具体来看看每个分类的内容. 一.源文件规范该类规范主要从文件名.文件 ...
python装饰器setter_第7.27节 Python案例详解： @property装饰器定义属性访问方法getter、setter、deleter...
上节详细介绍了利用@property装饰器定义属性的语法,本节通过具体案例来进一步说明. 一. 案例说明本节的案例是定义Rectangle(长方形)类,为了说明问题,除构造函数外,其他方法都只 ...

4 Three.js一个案例详解

4 Three.js一个案例详解相关推荐

最新文章

热门文章