百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 优雅编程 > 正文

前端如何开发3D网页?(前端如何开发3d网页游戏)

sinye56 2024-10-23 14:31 6 浏览 0 评论

前言

不论是电脑桌面应用,还是 Web 应用,想要渲染 3D 模型,都需要显卡的支持。显卡越好,渲染的速度就会越快。质量就会越高。

而桌面应用因为直接跟电脑显卡通信对接,使用操作系统提供的图形语言 GL,再加上代码优化,可以写出高质量,高性能的 3D 应用。但它也有它的缺点,比如开发难度高,需要高水平的 C++ 开发人员;应用不易扩展,针对不同平台需要不同平台的软件安装包。

而 Web 端渲染 3D 模型是由于浏览器厂商封装了浏览器与显卡的通信规范,暴露出 JavaScript API,供前端开发人员调用,而这个规范就叫 WebGL。通过 WebGL 开发的 Web 程序由于接口的封装性,性能肯定不足桌面端应用的水平,但也有可取之处:比如开发相较而言简单,开发人员上手难度低,很容易培养大量的人员;应用扩展性高,手机、平板、支持现代浏览器的电脑都可以直接通过网址打开。

小结

技术的选择取决于业务需求,业务要求性能第一,首先原生开发;业务要求快速敏捷,肯定选难度最低,出效果最快的。

正如现在移动端开发一样,Android 和 iOS 原生开发效率低,难度大,针对不同平台需要专门的开发人员,所以现在除了重要的应用如微信、支付宝,追逐性能的手机游戏外,都会优先考虑跨平台框架,也就是 H5 技术去开发 App。

Three.js

使用 JavaScript 写纯 WebGL 的代码去操作显卡处理3维数据是很辛苦的,所以一般开发而言都会使用 WebGL 的封装库去开发,封装库的意义就在于开发效率高,上手成本低,性能也能满足大部分业务的需求。Three.js 是一款比较成熟的 JavaScript 3D库,适用于各种3D 场景,采用 MIT 许可证开源,GitHub Star 也有 7万多。Three.js 和 WebGL 的关系就很像 JQuery 和 JavaScript。

AutoDesk Forge

Forge 是 Autodesk 公司推出的一款开发 Web 端 3D 应用的云平台,它拥有模型格式云端转换,使用 Revit 开发的 模型可以很方便地通过它转换,再使用 Forge 提供的 JavaScript 封装库,可以很轻松地在网页上渲染,而且提供了很多常用的工具。

它底层封装了 Three.js 的 API。所以它属于业务层的封装库。

缺点是:它的服务器在美国,上传的模型文件都是上传到美国的服务器,虽说官网强调不会侵犯用户的数据隐私,但谁能保证呢。数据服务访问速度不快,渲染速度还行。

BIMFACE

BIMFACE 是一款国产的云平台,拥有跟 Forge 一样的能力,而且针对国内常见的需求,提供了快捷服务,可以很方便地集成进自己的项目。缺点也有:二次封装的库都会存在一定的性能问题,因为加了一层封装就意味着加了一层代码,而 JavaScript 引擎就会多执行一层代码,会影响执行效率;扩展性差,针对业务的封装库都是这样,后期如果有新的业务,或者老业务上新的功能,封装库一般不会提供现成的解决方案,这时候就需要深入研究它的 API 甚至源码。这样的话上手成本就会高了很多。所以这种基于业务的封装库适用于短期高效开发,业务不复杂的场景。

拓展

还有一种开发 Web 端 3D 应用的方式,如 虚幻引擎4就有将项目通过打包成 WebAssembly 格式,从而开发 3D 游戏或应用网页。优点是性能上超过使用上述办法开发的 3D Web 应用,性能高的原因就是 WebAssembly 格式可以充分发挥浏览器端 JavaScript 引擎的执行效率,使其接近操作系统原生应用的效率。而上述方法其实也可以打包成 WebAssembly 格式从而达到性能优化,只不过需要学习和时间成本。

这种方式也有它的缺点:UE4 的项目打包成 Web 应用这种方式,存在的意义就是扩展应用的使用范围而已,因为它开发完成之后就已经可以作为桌命端应用交付使用了,它的开发周期和成本还是受到桌面端开发的限制。

总结

其实不同的库都有优缺点,但都有可取之处,归根究底还是靠业务来选型。如果业务大场景、重交互、需要优质体验,首选游戏引擎原生开发;如果业务简单,需要拓展 Web 平台,使用 Three.js 和其他封装库的意义就存在。

相关推荐

程序员:JDK的安装与配置(完整版)_jdk的安装方法

对于Java程序员来说,jdk是必不陌生的一个词。但怎么安装配置jdk,对新手来说确实头疼的一件事情。我这里以jdk10为例,详细的说明讲解了jdk的安装和配置,如果有不明白的小伙伴可以评论区留言哦下...

Linux中安装jdk并配置环境变量_linux jdk安装教程及环境变量配置

一、通过连接工具登录到Linux(我这里使用的Centos7.6版本)服务器连接工具有很多我就不一一介绍了今天使用比较常用的XShell工具登录成功如下:二、上传jdk安装包到Linux服务器jdk...

麒麟系统安装JAVA JDK教程_麒麟系统配置jdk

检查检查系统是否自带java在麒麟系统桌面空白处,右键“在终端打开”,打开shell对话框输入:java–version查看是否自带java及版本如图所示,系统自带OpenJDK,要先卸载自带JDK...

学习笔记-Linux JDK - 安装&配置

前提条件#检查是否存在JDKrpm-qa|grepjava#删除现存JDKyum-yremovejava*安装OracleJDK不分系统#进入安装文件目...

Linux新手入门系列:Linux下jdk安装配置

本系列文章是把作者刚接触和学习Linux时候的实操记录分享出来,内容主要包括Linux入门的一些理论概念知识、Web程序、mysql数据库的简单安装部署,希望能够帮到一些初学者,少走一些弯路。注意:L...

测试员必备:Linux下安装JDK 1.8你必须知道的那些事

1.简介在Oracle收购Sun后,Java的一系列产品就被整合到Oracle官网中,打开官网乍眼一看也不知道去哪里下载,还得一个一个的摸索尝试,而且网上大多数都是一些Oracle收购Sun前,或者就...

Linux 下安装JDK17_linux 安装jdk1.8 yum

一、安装环境操作系统:JDK版本:17二、安装步骤第一步:下载安装包下载Linux环境下的jdk1.8,请去官网(https://www.oracle.com/java/technologies/do...

在Ubuntu系统中安装JDK 17并配置环境变量教程

在Ubuntu系统上安装JDK17并配置环境变量是Java开发环境搭建的重要步骤。JDK17是Oracle提供的长期支持版本,广泛用于开发Java应用程序。以下是详细的步骤,帮助你在Ubuntu系...

如何在 Linux 上安装 Java_linux安装java的步骤

在桌面上拥抱Java应用程序,然后在所有桌面上运行它们。--SethKenlon(作者)无论你运行的是哪种操作系统,通常都有几种安装应用程序的方法。有时你可能会在应用程序商店中找到一个应用程序...

Windows和Linux环境下的JDK安装教程

JavaDevelopmentKit(简称JDK),是Java开发的核心工具包,提供了Java应用程序的编译、运行和开发所需的各类工具和类库。它包括了JRE(JavaRuntimeEnviro...

linux安装jdk_linux安装jdk软连接

JDK是啥就不用多介绍了哈,外行的人也不会进来看我的博文。依然记得读大学那会,第一次实验课就是在机房安装jdk,编写HelloWorld程序。时光飞逝啊,一下过了十多年了,挣了不少钱,买了跑车,娶了富...

linux安装jdk,全局配置,不同用户不同jdk

jdk1.8安装包链接:https://pan.baidu.com/s/14qBrh6ZpLK04QS8ogCepwg提取码:09zs上传文件解压tar-zxvfjdk-8u152-linux-...

运维大神教你在linux下安装jdk8_linux安装jdk1.7

1.到官网下载适合自己机器的版本。楼主下载的是jdk-8u66-linux-i586.tar.gzhttp://www.oracle.com/technetwork/java/javase/downl...

window和linux安装JDK1.8_linux 安装jdk1.8.tar

Windows安装JDK1.8的步骤:步骤1:下载JDK打开浏览器,找到JDK下载页面https://d.injdk.cn/download/oraclejdk/8在页面中找到并点击“下载...

最全的linux下安装JavaJDK的教程(图文详解)不会安装你来打我?

默认已经有了linux服务器,且有root账号首先检查一下是否已经安装过java的jdk任意位置输入命令:whichjava像我这个已经安装过了,就会提示在哪个位置,你的肯定是找不到。一般我们在...

取消回复欢迎 发表评论: