手册
- 起步
- 进阶
- 构建工具
参考
- 动画
- 动画 / 轨道
- 音频
- 摄像机
- 常量
- 核心
- 核心 / BufferAttributes
- 附件
- 附件 / 核心
- 附件 / 曲线
- 附件 / 物体
- 几何体
- 立方缓冲几何体(BoxGeometry)
- 圆形缓冲几何体(CircleGeometry)
- 圆锥缓冲几何体(ConeGeometry)
- 圆柱缓冲几何体(CylinderGeometry)
- 十二面缓冲几何体(DodecahedronGeometry)
- 边缘几何体(EdgesGeometry)
- 挤压缓冲几何体(ExtrudeGeometry)
- 二十面缓冲几何体(IcosahedronGeometry)
- 车削缓冲几何体(LatheGeometry)
- 八面缓冲几何体(OctahedronGeometry)
- 参数化缓冲几何体(ParametricGeometry)
- 平面缓冲几何体(PlaneGeometry)
- 多面缓冲几何体(PolyhedronGeometry)
- 圆环缓冲几何体(RingGeometry)
- 形状缓冲几何体(ShapeGeometry)
- 球缓冲几何体(SphereGeometry)
- 四面缓冲几何体(TetrahedronGeometry)
- 文本缓冲几何体(TextGeometry)
- 圆环缓冲几何体(TorusGeometry)
- 圆环缓冲扭结几何体(TorusKnotGeometry)
- 管道缓冲几何体(TubeGeometry)
- 网格几何体(WireframeGeometry)
- 辅助对象
- 灯光
- 灯光 / 阴影
- 加载器
- 加载器 / 管理器
- 材质
- 基础线条材质(LineBasicMaterial)
- 虚线材质(LineDashedMaterial)
- 材质(Material)
- 基础网格材质(MeshBasicMaterial)
- 深度网格材质(MeshDepthMaterial)
- MeshDistanceMaterial
- Lambert网格材质(MeshLambertMaterial)
- MeshMatcapMaterial
- 法线网格材质(MeshNormalMaterial)
- Phong网格材质(MeshPhongMaterial)
- 物理网格材质(MeshPhysicalMaterial)
- 标准网格材质(MeshStandardMaterial)
- MeshToonMaterial
- 点材质(PointsMaterial)
- 原始着色器材质(RawShaderMaterial)
- 着色器材质(ShaderMaterial)
- 阴影材质(ShadowMaterial)
- 点精灵材质(SpriteMaterial)
- 数学库
- 数学库 / 插值
- 物体
- 渲染器
- 渲染器 / 着色器
- 渲染器 / WebXR
- 场景
- 纹理贴图
示例
- 动画
- 控制
- 几何体
- 辅助对象
- 灯光
- 加载器
- 物体
- 后期处理
- 导出器
- 数学库
- QuickHull
- 渲染器
- 实用工具
开发者参考
- 差异化支持
- WebGL 渲染器
文章来源于网络收集而来,版权归原创者所有,如有侵权请及时联系!
使用NPM进行测试(Testing with NPM)
这篇文章展示了如何将three.js置入node.js环境中, 这样你就可以执行自动化测试了。测试可以通过命令行或者类似Travis的CI工具来运行。
一句话概括
如果你习惯使用node和npm,
$ npm install three --save-dev并将
const THREE = require('three');添加到你的测试中。
从头创建一个可测试的项目
如果你不太熟悉这些工具,下面是一个快速入门。(基于linux,在windows上的安装过程会稍稍有点不一样,不过NPM指令是相同的。)
基本设置
- 安装npm和nodejs。最简单的方式一般像这样
$ sudo apt-get install -y npm nodejs-legacy # 修复默认registry URL中任何SSL的问题 $ npm config set registry http://registry.npmjs.org/
- 新建一个项目路径
$ mkdir test-example; cd test-example
- 让npm为你创建一份新的项目文件:
$ npm init
在所有出现的提示中敲击回车键来接受默认值。 这样,一份package.json就建立好了。 - 尝试启动测试功能
$ npm test
当然,这一定会失败。 如果你检查一下package.json,test script的定义是这样的"test": "echo \"Error: no test specified\" && exit 1"
添加mocha
我们将使用mocha。- 安装mocha
$ npm install mocha --save-dev
你会注意到 node_modules/ 被创建了,并且你的依赖都出现在了这里面。 还有你的package.json被更新了,--save-dev指令向其中加入并更新了devDependencies属性。 - 编辑package.json来使用mocha进行测试。当调用测试的时候,我们只想运行mocha并且生成一份详细的报告。 默认情况下这会运行 test/ 中的任何东西。 (如果项目中没有 test/ 目录的话,会导致npm报错。你可以通过mkdir test来创建这个目录)
"test": "mocha --reporter list"
- 重新运行测试
$ npm test
现在应该就能成功执行了,生成类似 0 passing (1ms) 的报告。
添加three.js
- 现在添加我们的three.js依赖
$ npm install three --save-dev
- 如果你需要three.js的其他版本,使用
$ npm show three versions
来确认哪些是可用的。要让npm使用正确的版本,执行$ npm install three@0.84.0 --save
(例子中用的是0.84.0)。 --save 指令将此加入项目的dependency而不是dev dependency。 更多信息请参阅这份文档。
- 如果你需要three.js的其他版本,使用
- Mocha会在 test/ 目录中寻找测试文件,所以我们先创建这个目录:
$ mkdir test
- 最后我们需要一份JS测试文件来运行。我们就添加一段简单的测试程序,这段程序会检验three.js对象是否能正常工作。 在 test/ 目录下创建verify-three.js包含以下代码:
const THREE = require('three'); const assert = require("assert"); describe('The THREE object', function() { it('should have a defined BasicShadowMap constant', function() { assert.notEqual('undefined', THREE.BasicShadowMap); }), it('should be able to construct a Vector3 with default of x=0', function() { const vec3 = new THREE.Vector3(); assert.equal(0, vec3.x); }) })
- 最后再次通过$ npm test来测试。这次应该能正确执行上面的代码,并且返回类似:
The THREE object should have a defined BasicShadowMap constant: 0ms The THREE object should be able to construct a Vector3 with default of x=0: 0ms 2 passing (8ms)
加入你自己的代码
你需要做下面三件事:- 为你的代码写一段测试程序来检验期望结果,并把它放在 test/ 目录下。 这里有一个实际项目的例子。
- 将你的代码以nodejs承认的方式导出,即可以通过require的方式引用。 参考这份代码。
- 在测试程序中通过require引入你自己的代码,就像上面例子中我们通过require('three')来引入一样。
第2、3条会根据你组织代码的方式而改变。在上面给出的Physics.js的例子中,导出的部分在代码的最末尾。 我们将module.exports赋值为一个对象:
//============================================================================= // 为了在nodejs中可用 //============================================================================= if (typeof exports !== 'undefined') { module.exports = Physics; }
处理依赖
如果你已经在使用require.js或者browserify之类的便捷工具,就跳过这个部分。
一般来说,一个three.js项目将在浏览器中运行,浏览器会通过执行一系列script标签来加载模块。 你自己的文件不用考虑依赖的问题。然而在nodejs环境中,没有一个关联所有文件的index.html,所以你需要显式地加载。
如果你要导出的模块还依赖其他文件,你需要告诉node去加载它们。下面是一种方式:
- 在你的模块顶部,检查是否处于nodejs环境中。
- 如果是,那就显式地声明你的依赖。
- 如果不是,你多半处于浏览器环境中。这时候你不需要做任何多余操作。
//============================================================================= // 服务器端测试配置 //============================================================================= if (typeof require === 'function') // 检测nodejs环境 { const THREE = require('three'); const MY3 = require('./MY3.js'); }
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论