js 点击button切换颜色_ThingJS 和three.js开发示例对比,让开发早点下班回家!3D 可视化...

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

Three.js是更为底层的3D渲染器,提供各式各样的3D开发概念,例如材质、网格、shader、灯光,逐一进行定制化开发,要求程序员要有清晰的设计思路,尤其是在3D对象类的定义上。

ff7f4abcd83bac7f81ef93c44707a9fc.png

今天一并总结常见的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.position = [24.642510549459775, 4.302692201327658, 16.259715252398298];app.camera.target = [16.850313962013193, 0.15861977649910672, 4.364786416484356];new THING.widget.Button('创建 Box', function () {var box = app.query('#myBox01')[0];if (box) return;box = app.create({type: 'Box',id: 'myBox01',width: 2.0, // 宽度height: 2.0, // 高度depth: 2.0, // 深度center: 'Bottom', // 中心点position: [18, 0, 8],style: {image: 'images/uv.jpg',color: '#ffffff',}});})new THING.widget.Button('换 Box 贴图', function () {var imgUrl = 'https://www.thingjs.com/static/images/avatar.png';var box = app.query('#myBox01')[0];if (box) {box.style.image = imgUrl;}})

子类与层级关系

在此示例中,月亮属于地球的子类,将跟随地球一起绕太阳公转,通过创建子类,不管地球如何运动,月亮将自动跟随地球,程序不需要再单独处理这部分内容。层级关系是计算机动画的重要概念之一。比如骨骼动画,对于人体动画,小腿骨骼将跟随大腿骨骼一起运动。

在 ThingJS 场景中,每个对象,都可以通过 children 访问到下层子对象物体,通过 parent 访问到对应的父物体。创建一个物体对象时,可指定该对象的父物体;一个物体对象也可以通过 add ,添加子物体。

5bb9d5b47c8c567ac767142c0a1e4959.png

线段处理

在真实的太阳系中并没有轨道线,但在程序中加入轨道线将使场景更加美观。我们使用圆形轨道来模拟真实轨道(真实轨道是椭圆的),THREE.LineBasicMaterial材质可将geometry中的顶点逐个相连,只要分段足够多,最终的效果将趋于平滑的圆形,本例中,轨道线被分成了120段。

ThingJS提供轨迹线应用,直接封装了three.js有关于线条、材质的3D概念,直接取用轨迹线的对象规则来创建轨迹线,实现便捷开发。

/*** 说明:轨迹线应用*/
app = new THING.App({url: 'https://www.thingjs.com/static/models/simplebuilding'
});//轨迹线
var line;
app.on('load', function () {var points = [];var radius = 20;for (var degree = 0, y = 0.5; degree <= 520; degree += 2) {var x = Math.cos(degree * 2 * Math.PI / 360) * radius;var z = Math.sin(degree * 2 * Math.PI / 360) * radius;points.push([x, y, z]);}// 创建轨迹线line = app.create({type: 'Line',color: 0x00FF00, // 轨迹线颜色dotSize: 2, // 轨迹点的大小dotColor: 0xFF0000, // 轨迹点的颜色points: points,})// 小车开始沿轨迹线运动play();// 创建按钮new THING.widget.Button('开始移动', play);new THING.widget.Button('轨迹线', showLines);new THING.widget.Button('轨迹点', showPoints);
});// 物体跟随轨迹线运动
function play() {var car = app.query('car01')[0];car.movePath({'path': line.points, // 轨迹路线'time': 12000, // 移动时间'orientToPath': true, // 物体移动时沿向路径方向});
}// 显示/隐藏轨迹线
var lineVisible = true;
function showLines() {lineVisible = !lineVisible;line.showLines(lineVisible);
}// 显示/隐藏轨迹点
var pointVisible = true;
function showPoints() {pointVisible = !pointVisible;line.showPoints(pointVisible);
}

粒子系统

为使整个地月系看起来更加生动,我们为其添加了背景星空,随机地添加了1000颗星星,它们的大小和亮度不等,类似的情形包括烟雾效果、火焰效果、波纹效果等,在Three.js中,这类效果可以使用粒子系统来实现,即THREE.ParticleSystem。

ThingJS封装了粒子效果的实现方法,是更为顶层的抽象,所以减少了代码量和开发投入,更受3D开发初学者的欢迎,如直接用query查询API接口,在场景中加入火焰效果。

// 创建火焰粒子new THING.widget.Button('create', function () {var fire = app.query('#fire01')[0];if (!fire) {app.create({id: 'fire01',type: 'ParticleSystem',url: 'https://model.3dmomoda.com/models/19061018snbajhvuzrheq9sbgwdoefuk/0/particles',parent: car, // 设置粒子的父物体localPosition: [0, 0, 0] // 设置粒子相对于父物体的位置});}})

如果将场景扩展到了整个太阳系,包含水星、金星、地球、火星、木星、土星六大近地行星,所有星球均按真实大小比例和距太阳的距离构造,通过第一人称视角漫游,用户可以自由选择在任意位置、任意角度来观察太阳系,一样可以通过ThingJS的第一人称行走简单实现!

只要对技术实现逻辑清晰,就可以在不同的场景上轻松应用规则,实现快速的规模化3D开发!

feaca6b5ca4b24a2808fc7c3c16ac3c5.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/469132.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

变量命名

列举一下我自己的一些写法 local_int_loop_count global_int_data_count local_bool_plug_insert_flag global_bool_ble_connect_flag函数命名 get_tick_number set_tick_number为了代码清晰易懂&#xff0c;通常变量名采用一些著名的命名规则&#xff0c;主要有Camel标记法&am…

VSCode使用技巧——Ctrl+鼠标滚轮键使字体进行缩放

点击VSCode左下角的齿轮&#xff0c;进入设置 进入Extensions——》JSON——》Edit in settings.json 在json当中添加如下&#xff1a; "editor.mouseWheelZoom": true,

python 交互式可视化库_Python 交互式可视化库

Python 交互式可视化库 所属分类&#xff1a;中间件编程 开发工具&#xff1a;Python 文件大小&#xff1a;12843KB 下载次数&#xff1a;1 上传日期&#xff1a;2018-12-06 18:40:56 上 传 者&#xff1a;孤独的老张 说明&#xff1a; 一个 Python 交互式可视化库&#xff0c;…

OpenCV各版本差异与演化,从1.x到4.0

最近因项目需要&#xff0c;得把OpenCV捡起来&#xff0c;登录OpenCV官网&#xff0c;竟然发现release了4.0.0-beata版本&#xff0c;所以借此机会&#xff0c;查阅资料&#xff0c;了解下OpenCV各版本的差异及其演化过程&#xff0c;形成了以下几点认识&#xff1a; 新版本的…

python题库刷题训练软件_Python基础练习100题 ( 11~ 20)

刷题继续 上一期和大家分享了前10道题&#xff0c;今天继续来刷11~20 Question 11: Write a program which accepts a sequence of comma separated 4 digit binary numbers as its input and then check whether they are divisible by 5 or not. The numbers that are divisi…

如何学习计算机图形学

http://blog.csdn.net/szchtx/article/details/6916675转载于:https://www.cnblogs.com/ArcherHuang/p/6574560.html

shell for循环

weiqifaubuntu:~/qcom$ for i in $(seq 1 1 10) > do > echo "hello World" > done hello World hello World hello World hello World hello World hello World hello World hello World hello World hello World weiqifaubuntu:~/qcom$ 输入for i in $(s…

西门子s7-200解密软件下载_西门子S7-200/300/400通讯方式汇总,超级全面

1西门子 200 plc 使用 MPI 协议与组态王进行通讯时需要哪些设置?1)在运行组态王的机器上需要安装西门子公司提供的 STEP7 Microwin 3.2 的编程软件&#xff0c;我们的驱动需要调用编程软件提供的 MPI 接口库函数;2)需要将 MPI 通讯卡 CP5611 卡安装在计算机的插槽中&#xff0…

如何监控NVIDIA GPU 的运行状态和使用情况

设备跟踪和管理正成为机器学习工程的中心焦点。这个任务的核心是在模型训练过程中跟踪和报告gpu的使用效率。 有效的GPU监控可以帮助我们配置一些非常重要的超参数&#xff0c;例如批大小&#xff0c;还可以有效的识别训练中的瓶颈&#xff0c;比如CPU活动(通常是预处理图像)占…

进程和线程的本质和区别

进程是什么&#xff1f; 程序并不能单独运行&#xff0c;只有将程序装载到内存中&#xff0c;系统为它分配资源才能运行&#xff0c;而这种执行的程序就称之为进程。程序和进程的区别就在于&#xff1a;程序是指令的集合&#xff0c;它是进程运行的静态描述文本&#xff1b;进程…

HBase学习笔记——概念及原理

1.什么是HBase HBase – Hadoop Database&#xff0c;是一个高可靠性、高性能、面向列、可伸缩的分布式存储系统&#xff0c;利用HBase技术可在廉价PC Server上搭建起大规模结构化存储集群。HBase利用Hadoop HDFS作为其文件存储系统&#xff0c;利用Hadoop MapReduce来处理HBas…

.bat是什么语言_简单说说当我们打开网页时,浏览器到底做了什么?

前言&#xff1a;为什么我们需要掌握浏览器的原理作为一名前端研发&#xff0c;平日里打交道最多的&#xff0c;就是各式各样的客户端。不论你是针对pc端还是移动端&#xff0c;甚至是专门在微信端做前端研发&#xff0c;都需要跟一样东西接触——浏览器。不知道你有没有留意过…

花书《深度学习》代码实现:02 概率部分:概率密度函数+期望+常见概率分布代码实现

1 概率 1.1 概率与随机变量 频率学派概率 (Frequentist Probability)&#xff1a;认为概率和事件发⽣的频率相关。贝叶斯学派概率 (Bayesian Probability)&#xff1a;认为概率是对某件事发⽣的确定程度&#xff0c;可以理解成是确信的程度。随机变量 (Random Variable)&…

内存泄露Lowmemorykiller分析

01 前言 最近疫苗事情非常火热,这件事情让我对刘强东有点刮目相看,我们需要更多的人关注曝光此类问题 02 正文 Android Kernel 会定时执行一次检查,杀死一些进程,释放掉内存。Low memory killer 是定时进行检查。Low memory killer 主要是通过进程的oom_adj 来判定进程的…

腾讯官网生成qq在线客服代码

http://jingyan.baidu.com/article/e2284b2b42ce8ce2e6118ddd.html转载于:https://www.cnblogs.com/diyunpeng/p/6576696.html

TabError: inconsistent use of tabs and spaces in indentation

本文使用PyCharm的格式化代码功能解决TabError: inconsistent use of tabs and spaces in indentation。 1、提出问题&#xff1a; 当把代码从别处复制进来PyCharm&#xff0c;然后运行报错&#xff1a;TabError: inconsistent use of tabs and spaces in indentation 2、 分…

python 默认参数_有趣的 Python 特性 3 | 当心默认可变参数这个大猪蹄子。

本文字数&#xff1a;1575 字阅读本文大概需要&#xff1a;4 分钟写在之前Python 提供了很多让使用者觉得舒服至极的功能特性&#xff0c;但是随着不断的深入学习和使用 Python&#xff0c;我发现其中存在着许多玄学的输出与之前预想的结果大相径庭&#xff0c;这个对于初学者来…

Linux内核模块编译

Linux内核模块是一种可被动态加载和卸载的可执行程序。通过内核模块可以扩展内核功能,内核模块通常用于设备驱动、文件系统等。如果没有内核模块,需要向内核添加功能就需要自发代码、重新编译内核、安装新内核等步骤。 内核空间中不止一个程序试图访问驱动程序模块,导致一个…

AI-无损检测方向速读:基于深度学习的表面缺陷检测方法综述

1 表面缺陷检测的概念 表面缺陷检测是机器视觉领域中非常重要的一项研究内容, 也称为 AOI (Automated optical inspection) 或 ASI (Automated surface inspection)&#xff0c;它是利用机器视觉设备获取图像来判断采集图像中是否存在缺陷的技术。 1.1 传统检测的缺陷(非CNN)…

1016. 部分A+B (15)

1016. 部分AB (15) 正整数A的“DA&#xff08;为1位整数&#xff09;部分”定义为由A中所有DA组成的新整数PA。例如&#xff1a;给定A 3862767&#xff0c;DA 6&#xff0c;则A的“6部分”PA是66&#xff0c;因为A中有2个6。 现给定A、DA、B、DB&#xff0c;请编写程序计算PA…