ThingJS 和three.js对比开发太空漫游技术!3D 可视化

ThingJS 3D用来增加视觉效果,给人以更加直观,真实的感觉。

ThingJS 3D框架简化了开发工作,面向对象和模块化的特点使得网页代码更加易于管理和维护,并且提供近200个官方示例,直接获取API能力,不需要基于3D概念进行开发,适合3D商业项目快速生成!距离您的业务仅一层之隔,是非开发者也容易理解的一种应用方法。

Three.js是更为底层的3D渲染器,提供各式各样的3D开发概念,例如材质、网格、shader、灯光,逐一进行定制化开发,要求程序员要有清晰的设计思路,尤其是在3D对象类的定义上。
ThingJS 和three.js对比开发太空漫游技术!3D 可视化_第1张图片

今天一并总结常见的3D开发概念及其使用方法,包括:(1)第一人称漫游;(2)图片纹理;(3)子类与层级关系;(4)线段处理;(5)粒子系统。对于这些内容的解释和说明,我们在脚本文件中穿插进行,看看three.js和ThingJS实现过程中有何区别?

第一人称漫游

它允许用户通过键盘或鼠标对场景进行巡游控制,ThingJS平台通过第一人称行走控件实现。和three.js的代码量相比,显然更加轻量化。

// 添加控件
var ctrl = null;
var gui = null;
function add_control() {
   
	if (ctrl) {
   
		return;
	}

	app.camera.position = [0, 10, 0];// 起始位置 就是摄像机位置, 不设置就会在摄像机位置直接开始
	ctrl = app.addControl(
		new THING.WalkControl({
    // 参数可以动态修改
			walkSpeed: 0.02, // 行走速度
			turnSpeed: 0.25, // 右键旋转速度
			gravity: 29.8, // 物体重量
			eyeHeight: 1.6, // 人高度
			jumpSpeed: 10, // 按空格键 跳跃的速度
			enableKeyRotate: false, // 默认不开启键盘控制旋转
			useCollision: false, // 默认不开启碰撞检测
			useGravity: true // 默认开启重力
		})
	);

图片纹理

在真实的3D场景中,模型是有纹理的,而不仅仅是只有颜色值,Three.js通过ImageUtils.loadTexture方法使用图片纹理对3D模型进行贴图,使得模型更接近真实。例如,MeshLambertMaterial(朗勃面)是一种很常用的材质,它将使用漫反射的方式引用前面的纹理图片,最终效果还与光线有关;另外一种常用的材质是MeshPhongMaterial,它可以产生镜面效果。
ThingJS中提供直接贴图的方式来实现模型纹理,建模师只要导入类似于照片效果的图形,简单实现模型的纹理,虽然无法实现three.js那样的细节定制化,仍旧可以改变参数来接近实景效果。

// 设置摄像机位置和目标点
	app.camera

你可能感兴趣的:(ThingJS,3D可视化,物联网,javascript)