javascript编写 Javascript编写注册页面 收藏 0

初识three.js，搭建three.js+vue.js项目

作者：前端藏经阁

转发链接：https://www.yuque.com/xwifrr/uxqg5v/ggxx2b

简介：WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0（OpenGL for Embedded Systems，OpenGL嵌入式版本，针对手机、游戏机等设备相对较轻量级的版本）结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。

简介：Three.js是WebGL的JavaScript 3D库，其对WebGL提供的接口进行了非常好的封装，简化了很多细节，大大降低了学习成本，成为前端开发者完成3D绘图的得力工具。

three.js官方文档 ：threejs.org/

three.js中文文档 ： https://techbrood.com/threejs/docs/

Three.js整体认知（附：Three.js功能概览）

一、threejs三大组件（场景-scene，相机-camera，渲染器-renderer）

场景（Scenes）

场景是所有物体的容器，场景只有一种。

场景的构造函数是：

Fog（线性雾）：

照相机（Cameras）

定义了三维空间到二维屏幕的投影方式，投影方式主要分为正交投影和透视投影。

1.正交投影：正交投影照相机获得的结果对于在三维空间内平行的线，投影到二维空间中也一定是平行的。

2.透视投影：透视投影照相机获得的结果是类似人眼在真实世界中看到的有“近大远小”的效果。

一般说来，对于制图、建模软件通常使用正交投影，这样不会因为投影而改变物体比例；而对于其他大多数应用，通常使用透视投影，因为这更接近人眼的观察效果，以下详细介绍透视投影。

透视投影照相机（Perspective Camera）的构造函数是：

让我们通过一张透视照相机投影的图来了解这些参数。

透视图中，灰色的部分是视景体，是可能被渲染的物体所在的区域，在该视景体以外的物体将不会被渲染。

fov是视景体竖直方向上的张角（是角度制而非弧度制），如侧视图所示。

aspect等于width / height，是照相机水平方向和竖直方向长度的比值，通常设为Canvas的横纵比例。

near照相机到视景体最近的距离，为正值。

far照相机到视景体最远的距离，为正值。

渲染器（Renderers）

渲染器的作用就是将相机拍摄出的画面在浏览器中呈现出来。渲染器决定了渲染的结果应该画在页面的什么元素上面，并且以怎样的方式来绘制。three.js中有很多种类的渲染器，例如webGLRenderer、canvasRenderer、SVGRenderer，通常使用的是webGLRenderer渲染器。 webGLRenderer渲染器的构造函数是：

创建完渲染器之后，需要调用render方法将之前创建好的场景和相机相结合从而渲染出来，即调用渲染器的render方法：

了解了three.js完成3D绘图的三大要素之后，便可以在页面中创建场景，并利用相机将场景渲染到网页上。

首先需要下载three.js库，并引用到自己的代码中，以下为三种引入方式，选择合适的方式在自己的项目中。

完成上述各个步骤之后，我们在网页上看到的只有一块静态的白色场景，看不到任何东西，接下来通过一些基础图像的学习和了解，以呈现一些图形效果。

二、图像的表示

绘制的前期准备工作已经做完，接下来要做的就是把想要绘制的物体添加到场景中。在计算机世界中，3D世界是由点组成，两个点能够组成一条直线，三个不在一条直线上的点就能够组成一个三角面片，无数个三角面片就能够组成各种各样形状的物体，通常把这种网格模型叫做Mesh模型。Mesh模型是三维开发中使用的最为广泛的型。

Geometries（几何图形）

three.js给出了很多方法去生成固定的网格形状，比如长方体（BoxGeometry）、球体（SphereGeometry）、圆形（CircleGeometry）等等。还有根据具体坐标生成具体形状的方法，可以借助第三方建模软件（SketchUp）建模之后导入，目前支持的模型格式有.obj（最常用）,.dae，.ctm，.ply，.stl，.wrl，.vtk等。Three.js有一系列支持外部导入文件的函数，是在three.js库之外的，使用前需要单独下载。（例如：OrbitControls-控制器、OBJLoader-加载.obj 文件、MTLLoader-加载.mtl文件）。

Materials（材质）

three.js给出了很多种直接生成材质的方法，其中比较常用的有MeshBasicMaterial（对光照无感，给几何体一种简单的颜色或显示线框），MeshLambertMaterial（对光照有反应，无光源则不会显示，用于创建暗淡的不发光的物体）、MeshPhongMaterial（对光照有反应，无光源不会显示，用于创建金属类米昂凉的物体）等等。物体之所以能被人眼看见，一种是它自身的材料就能发光，不需要借助外界光源；另一种是自身材料不发光，需要反射环境中的光。对于自身不发光的物体，需要个场景添加光源从而达到可视的效果。

Lights（灯光）

three.js中可以创建出很多不同类型的光源，比如环境光AmbientLight（它的颜色会添加到整个场景和所有对象的当前颜色上），点光源PointLight（这种光源放出的光线来自同一点，且辐射方向四面八方，如蜡烛发出的光），方向光DirectionalLight（也称作无限光，从这种光源发出的光线可以看做是平行的，如太阳光），聚光灯SpotLight（这种光源的光线从一个椎体中射出，在被照射的物体上产生聚光的效果，如手电筒发出的光。）有光源就缺少不了阴影，在Three.js中，能形成阴影的光源只有DirectionalLight和SpotLight；而相对地，能表现阴影效果的材质只有LambertMaterial和PhongMaterial。three.js中渲染阴影的开销比较大，所以默认物体是没有阴影的，需要单独开启。开启阴影的方法：

• 将渲染器的shadowMapEnabled属性设置为true（告诉渲染器可以渲染隐形)
• 将物体及光源的castShadow属性设置为true（告诉物体及光源可以透射阴影)
• 将接收该阴影的物体的receiveShadow属性设置为true（告诉物体可以接收其他物体的阴影）

在了解了关于图形的基本知识之后，在上面的代码的基础上添加简单图像。

在render（）函数中添加以下代码使上面在场景中添加的正方体运动起来。

Controls（控制器）

轨道控制插件OrbitControls.js可以实现场景用鼠标交互，让场景动起来，控制场景的旋转、平移和缩放。由于OrbitControls.js是一个插件，所以在three.js 中使用时，需要单独引入该文件。

配置该插件之后实现的效果：

操控效果按住鼠标左键并移动摄像机围绕场景中心旋转转动鼠标滑轮或按住中键并移动放大或缩小按住鼠标右键并移动在场景中平移上、下、左、右方向键在场景中平移

Loaders（加载器）

用来加载不同格式的文件，主要介绍以下三种：

OBJLoader加载器（需要单独引入js文件）：用来加载.obj文件（分为有材质和没有材质两种）。

MTLLoader加载器（需要单独引入js文件）：用来加载.mtl文件（即加载有材质物体的obj文件之前先加载mtl文件）。

CSS2DRenderer加载器（需要单独引入js文件）：如果要将基于HTML的标签与3D对象组合，则CSS2DRenderer渲染器非常有用。这里，各个DOM元素也被包装到CSS2DObject的一个实例中并添加到场景图中。

Textures(纹理)

纹理是一个2D图片（甚至也有1D和3D的纹理），它可以用来添加物体的细节；可以想象纹理是一张绘有砖块的纸，无缝折叠贴合到你的3D的房子上，这样你的房子看起来就像有砖墙外表了。

1.用npm 安装three npm install three     

three.js 安装地址 ：https://www.npmjs.com/package/three

安装成功后，在项目中 import three from \’three\’;，之后运行程序。

发现控制台报错 default export is not declared in imported module 说明three.js没有默认的导出对象，应该写成 import * as three from \’three\’; 或者可以这样： import { Scene, WebGLRenderer, PerspectiveCamera, BoxGeometry, MeshBasicMaterial, Mesh} from \’three\’;

或者使用CommonJS的形式引入var three = require (\’three\’);

2.用npm安装轨道控制插件 npm install three-orbit-controls  

three-orbit-controls安装地址：https://www.npmjs.com/package/three-orbit-controls

该插件引入之前确认three.js 库已经引入， OrbitControls = require(\’three-orbit-controls\’)(THREE)

使用方法： controls = new OrbitControls(camera);

3.用npm安装加载.obj和.mtl文件的插件 npm i –save three-obj-mtl-loader

three-obj-mtl-loader安装地址 ：https://www.npmjs.com/package/three-obj-mtl-loader

该插件引入之前必须确认three.js库已经引入，该插件包括加载.obj和.mtl 文件的加载器

import {MTLLoader,OBJLoader} from \’three-obj-mtl-loader\’;

使用方法：mtlLoader = new MTLLoader(); objLoader = new OBJLoader();

注：单独使用three-mtl-loader 和 three-obj-loader两个插件时，会发生错误：

4.用npm安装three-css2drender插件， npm i –save three-css2drender

three-css2drender安装地址： www.npmjs.com/package/three-css2drende

插件引入之前必须确认htree.js库已经引入

import {CSS2DRenderer,CSS2DObject} from \’three-css2drenderer\’;

使用方法：

labelRenderer = new CSS2DRenderer();

label = new CSS2DObject( text );

作者：前端藏经阁

转发链接：https://www.yuque.com/xwifrr/uxqg5v/ggxx2b

3个编写JavaScript高质量代码的技巧，让你不再996

本文首发自「慕课网」，想了解更多IT干货内容，程序员圈内热闻，欢迎关注！

前段时间有一个叫做“人类高质量男性”的视频火了，相信很多同学都刷到过。所以今天给大家分享下，什么叫做“人类高质量代码”，哈哈，开个玩笑。

其实分享的都是一些自己平时总结的小技巧，算是抛砖引玉吧，希望能给大家带来一些启发和帮助。

如何编写出高质量的 JavaScript 代码？我个人认为，如果要编写出高质量的 JavaScript 代码，可以从以下三个方面去考虑。

分别是：易阅读的代码、高性能的代码、健壮性的代码。下面我将分别对这三个方面进行阐述。

易阅读的代码

首先说一下，代码是写给自己或团队成员看的，良好的阅读方式是编写高质量代码的前提条件。这里总结了四点具体操作方式分享给大家。

第一点：统一代码格式

不要一会这样写，一会那样写，尽量统一写法，下面举例。

人为去约定代码格式，是很不方便的，所以可以借助一些工具进行自动格式转换。

魔术数字（magic number）是程式设计中所谓的直接写在程式码里的具体数值（如“10”“123”等以数字直接写出的值）。虽然程式作者写的时候自己能了解数值的意义，但对其他程式员而言，甚至作者本人经过一段时间后，都会很难理解这个数值的用途。

当然还有魔术字符串也是像上面一样去处理，上面代码中的常量命名推荐采用下划线命名的方式，其他如变量、函数等推荐用驼峰进行命名。

其实减少this的使用频率也是一样的道理，当代码中充斥着大量this的时候，我们往往很难知道它是谁，需要花费很多时间进行阅读。

无论是编写模块、类、还是函数都应该让他们各自都只有单一的功能，不要让他们做过多的事情，这样阅读起来会非常简单，扩展起来也会非常灵活。

多层级的嵌套，如：条件嵌套、循环嵌套、回调嵌套等，对于代码阅读是非常不利的，所以应尽量减少嵌套的层级。

像解决条件嵌套的问题，一般可采用卫语句（guard clause）的方式提前返回，从而减少嵌套。

除了卫语句外，通过还可以采用短路运算、条件运算符等进行条件语句的改写。

像解决回调嵌套的问题，一般可采用“async/await”方式进行改写。

除了以上介绍的四点建议外，还有很多可以改善阅读体验的点，如：有效的注释、避免不同类型的比较、避免生涩的语法等等。

在软件开发中，代码的性能高低会直接影响到产品的用户体验，所以高质量的代码必然是高性能的。这里总结了四点具体操作方式分享给大家。

提示：测试JavaScript平均耗时，可使用console.time()方法、JSBench.Me工具、performance工具等。

递归是一种常见的算法，下面是用递归实现的“求阶乘”的操作。

“尾调用”是一种可以重用栈帧的内存管理优化机制，即外部函数的返回值是一个内部函数的返回值。

很多功能都可以采用JavaScript内置方法来解决，往往内置方法的底层实现是最优的，并且内置方法可在解释器中提前执行，所以执行效率非常高。

下面举例为：获取对象属性和值的复合数组形式。

作用域链是作用域规则的实现，通过作用域链的实现，变量在它的作用域内可被访问，函数在它的作用域内可被调用。作用域链是一个只能单向访问的链表，这个链表上的每个节点就是执行上下文的变量对象（代码执行时就是活动对象），单向链表的头部（可被第一个访问的节点）始终都是当前正在被调用执行的函数的变量对象（活动对象），尾部始终是全局活动对象。

概念太复杂的话， 看下面这样一张图。

作用域链这个链表就是 3(头部：bar) -> 2(foo) -> 1(尾部：全局)，所以查找变量的时候，应尽量在头部完成获取，这样就可以节省性能，具体对比如下。

除了减少作用域链查找外，减少对象属性的查找也是一样的道理。

有时候编写程序时，会出现很多重复执行的代码，最好要避免做重复操作。先举一个简单的例子，通过循环找到第一个满足条件元素的索引位置。

再来看一个计算“斐波那契数列”的案例。

这里把递归执行过的结果缓存到数组中，这样接下来重复的代码就可以直接读取缓存中的数据了，从而大幅度提升性能。

画叉号的部分就会走缓存，而不会重复执行计算。

除了以上介绍的四点建议外，还有很多可以改善代码性能的点，如：减少DOM操作、节流处理、事件委托等等。

所谓健壮性的代码，就是编写出来的代码，是可扩展、可维护、可测试的代码。这里总结了四点具体操作方式分享给大家。

很多新语法可弥补之前语法的BUG，让代码更加健壮，应对未来。

由于产品需求总是会有新的变更，对软件的可扩展能力提出了很高要求，所以健壮的代码都是可以随时做出调整的代码。

当函数产生了除了“接收一个值并返回一个结果”之外的行为时，就产生了副作用。副作用不是说一定是有害的，但是如果在项目中没有节制的引起副作用，代码出错的可能性会非常大。

建议尽量不要去修改全局变量或可变对象，通过参数和return完成需求。让函数成为一种纯函数，这样也可使代码更容易被测试。

当项目过于复杂的时候，经常会把各种逻辑混在一起，对后续扩展非常不利，而且还影响对代码的理解。所以尽量把相关的逻辑抽离到一起，进行集中式的管理。像React中的hooks，Vue3中的Composition API都是采用这样的思想。

除了以上介绍的四点建议外，还有很多可以改善代码健壮性的点，如：异常处理、单元测试、使用TS替换JS等等。

最后总结一下，如何编写高质量JavaScript代码：

欢迎关注「慕课网」，发现更多IT圈优质内容，分享干货知识，帮助你成为更好的程序员！

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com