精华内容
下载资源
问答
  • Web3D
    千次阅读
    2018-09-25 13:59:35

    Web3D案例预览链接

    简介

    Web3D字面意思就是在网页上展示编辑三维场景,比如展示一个机械零件,展示一个产品、展示室内装修效果、景区博物馆漫游、WebVR、Web全景、在线三维建模、游戏、大数据可视化…

    第一代技术

    第一代实现Web3D的技术并没有流行起来,原因有多种,比如标准不统一、性能有限,往往还需要安装特定插件。如果有兴趣可以百度Web3D技术,这里就不在详细介绍,大家也没有学习的必要,只要了解一下历史的发展历程就可以。

    第二代技术WebGL

    WebGL技术标准来源于OpenGL ES ,目前大多数浏览器都是支持的,所以通过WebGL来实现We3D技术是不需要安装任何插件的,这样更有利于Web3D技术的普及。目前大多数浏览器都是支持WebGL API的,无论移动端还是PC端,所有程序都是通用的。你做好一个Web3D案例作品,可以通过QQ或微信发给任何人去展示,可以挂在网页上,大家无需安装插件,直接预览三维模型或在线编辑三维模型。

    建议

    如果学习Web3D技术,直接学习WebGL就可以,如果直接使用原生WebGL编写Web3D项目比较麻烦,可以选择对WebGL API和着色器语言进行一定封装得到的三维引擎,比如Three.js三维引擎,更多WebGL和Three.js相关的教程可以关注郭隆邦技术博客

    资料链接

    更多相关内容
  • web3D构建,根据房间二维平面图构建了三维空间图,可实现房间开关门,移动,旋转,可各个角度观察房屋,使用了threejs库
  • 针对webgl的库threejs框架的Web 3D智能数字机房项目实战详细的讲解,随着IT信息技术和移动端的发展,Html5+3D(Webgl)技术已经悄然崛起,3D机房数据中心可视化应用越来越广泛,主要包括3D机房搭建,机柜、服务器、...
  • 基于ArcGIS 的Web3D应用开发全流程入门教程,利用arcgis pro+arcgis portal管理3D webgis平台
  • 《WebGL高级编程--开发Web3D图形》向读者介绍如何开发基于WebGL的Web应用程序。虽然WebGL API可用来硬件加速2D图形和3D图形,但是它的主要作用是用来创建3D图形。3D图形API的一些图书只介绍API本身,并没有对3D图形...
  • Web 3D技术综述

    2020-10-17 12:32:10
    WEB 3D(又称网络三维)技术是随着互联网与虚拟现实(Virtual Reality)技术的发展而产生的,其目的是在互联网上建立三维的虚拟世界,让人们更加清晰明了地了解真实的物体。目前,Web 3D技术在电子商务、教育、娱乐、虚拟...
  • 针对煤矿数字化及 BIM 技术的应用现状, 研发了基于开源三维引擎的 Web3D 可视化平台, 以免插件、 轻量化和跨平台的技术路线要求, 对比主流基于 WebGL 的开源三维引擎框架, 设计符合 BIM 模型可视化要求的矿用要素类...
  • Web3D技术已经被应用于各个领域,虚拟现实、三维仿真、它在医学方面也作出了突出的贡献,在虚拟环境中,通过Web3D技术可以建立虚拟的人体模型,借助于各种辅助工具,学生可以更容易的了解到人体内的各个器官和结构,...
  • 我们提出了一种基于Web的方法,用于在注释不佳的Web3D场景中提取语义信息和对象标识。 我们的方法基于一组模仿人类空间认知的规则,并辅之以针对语言谓语的对象之间自动空间相关性的索引机制。 所提出的方法包括具有...
  • 希望读者通过本书的学习能够掌握3D图形基础知识,以及学会用WebGL API 开发Web应用程序。 此外,本书还介绍线性代数的部分基础知识,这有助于读者深入理解3D图形和WebGL底层的运行机制。掌握了线性代数的基本知识,...
  • 网络3dweb 平台上使用 webgl 在 3d 世界中游泳。
  • NULL 博文链接:https://xhload3d.iteye.com/blog/2233970
  • 针对webgl的库threejs框架的Web 3D智能数字机房项目实战详细的讲解,随着IT信息技术和移动端的发展,Html5+3D(Webgl)技术已经悄然崛起,3D机房数据中心可视化应用越来越广泛,主要包括3D机房搭建,机柜、服务器、...
  • Web3D-服务-不可用
  • 使用JavaScript API构建Web 3D应用.pdf
  • JavaScript API 3D,包含基本的Web3D开发与实践的介绍,可以参考
  • #资源达人分享计划#
  • Gio.js 是一个基于Three.js的web 3D地球数据可视化的开源组件库。使用Gio.js的网页应用开发者,可以快速地以申明的方式创建自定义的Web3D数据可视化模型,添加数据,并且将其作为一个组件整合到自己的应用中
  • 基于Web3D的大规模地下场景在线演练
  • 提出了基于L-system的Web3D虚拟树木语森林的轻量化建模方法,基于树木L-System描述体系的自相似性和基于重用的WebVR轻量化建模思想,成功地将虚拟树木/森林场景转化为极为轻量化的Web3D文件,甚至只有十几kB大小,...
  • web3d_什么是Web 3D

    2020-08-07 10:17:18
    web3d 什么是Web 3D? (What Is Web 3D?) Web 3D is a term used to describe interactive 3D content included in an HTML page, viewable by a common Web browser via a special 3D viewer. It uses the concept ...

    web3d

    什么是Web 3D? (What Is Web 3D?)

    Web 3D is a term used to describe interactive 3D content included in an HTML page, viewable by a common Web browser via a special 3D viewer. It uses the concept of Web 3D also indicate a possible evolution of the Web where the idea was abandoned page and you are immersed in an interactive three-dimensional space.

    Web 3D是一个术语,用于描述HTML页面中包含的交互式3D内容,可以由普通的Web浏览器通过特殊的3D查看器查看。 它使用Web 3D的概念,也表明了Web可能的发展,其中该想法被放弃了,而您却沉浸在交互式三维空间中。

    Web 3D的历史 (History of Web 3D)

    In the beginning was VRML, a textual language can describe a 3D environment, to appear on the scene of 3D technologies designed exclusively for Web applications. That was in 1994 when Tim Berners-Lee and Dave Raggett, during the first annual conference on the World Wide Web in Geneva (town), began seriously to think of a common language for describing scenarios and 3D Hyperlink with the Web was born the first version of VRML, a programming language that promised to give Internet users browsing in 3D.

    最初是VRML,一种文字语言可以描述3D环境,出现在专门为Web应用程序设计的3D技术的场景中。 那是在1994年,当时蒂姆·伯纳斯·李(Tim Berners-Lee)和戴夫·拉格特(Dave Raggett)在日内瓦(镇)召开的第一届年度万维网会议上,开始认真考虑一种用于描述场景的通用语言,并且3D超链接网络诞生于第一时间。 VRML的一种版本,一种编程语言,有望为Internet用户提供3D浏览功能。

    After a brilliant start and full of expectations, which were born many companies ready to move in this new field of research and develop new standards for a large economic return, the promises were not kept and navigation in three dimensions was only a utopia. Many companies 3D walked off the job and changed activities, leaving in fact this promising project in a state of deadlock. The causes of this failure may be primarily sought in purely technological factors and a lack of participation in the project from major software houses. But we see better what it is: the 3D environments require the use of hardware with certain characteristics that the market then was not able to offer.

    在经历了辉煌的开端和充满期望的诞生之后,许多公司已准备好进入这一新的研究领域,并为获得巨大的经济回报制定新的标准,但诺言并没有兑现,在三个维度上的航行只是乌托邦。 许多公司3D退出工作并改变了活动,实际上,这个有前途的项目陷入了僵局。 可能导致这种失败的原因主要是纯粹出于技术因素,而主要软件公司缺乏对该项目的参与。 但是我们可以更好地了解它是什么:3D环境要求使用具有市场无法提供的某些特征的硬件。

    Moreover, the lack of support by browsers made it awkward integration scenario in the 3D browser you use. Other causes can be traced to the sophisticated technical skills specific to the new technology required, lacking in web design, and little willingness on the part of companies to software companies to establish a standard that would be “open.”

    而且,由于浏览器缺乏支持,因此在您使用的3D浏览器中出现了尴尬的集成方案。 其他原因可以追溯到特定于所需新技术的复杂技术技能,缺乏网页设计以及公司不愿软件公司建立“开放”标准的意愿。

    Furthermore, because of this condition, many leading companies like Macromedia have developed their own standards on which to base their applications, thereby introducing a real competition between proprietary and standard open source VRML instead.

    此外,由于这种情况,像Macromedia这样的许多领先公司已经开发了自己的标准作为其应用程序的基础,从而在专有和标准开源VRML之间引入了真正的竞争。

    At this point it was thought that VRML was a total failure will disappear very soon in the world of 3D technologies for the Web, but did not. With the creation of a new group in 1996, the VRML Consortium, later called Web 3D Consortium is promoting the use of VRML with a strong market orientation. The current version of the language is but the successor to VRML97 and X3D is the future evolution, standards founded with support from Microsoft, Sun Microsystems and the W3C, which is based on XML language and carries with it significant improvements.

    在这一点上,人们认为VRML完全失败了,它将很快在Web的3D技术领域消失,但是并没有消失。 随着1996年成立了一个新的小组,VRML联盟(后来称为Web 3D联盟)正在以强大的市场定位促进VRML的使用。 该语言的当前版本是VRML97和X3D的继承者,但它是未来的发展,它是在Microsoft,Sun Microsystems和W3C的支持下建立的标准,该标准基于XML语言并进行了重大改进。

    As already mentioned, this situation of duality between the desire to develop a standard open source and the willingness of companies to create closed source applications, trying to assert its technology on others, not led to any conclusion and did not has reached the standard definition of a winning sharply on others. The current situation is therefore to have a wide variety of solutions for 3D applications on the Web, where there is a considerable number of companies that perform services for 3D pure commercial purposes, each of which develops its own player.

    如前所述,在开发标准开放源代码的愿望与公司创建封闭源代码应用程序的意愿,试图将其技术断言为他人的意愿之间存在双重性的情况,没有得出任何结论,也没有达到标准的定义。在别人身上大获全胜。 因此,当前的情况是要为Web上的3D应用程序提供各种各样的解决方案,其中有很多公司为3D纯商业目的提供服务,每个公司都开发自己的播放器。

    Therefore you today is to install a substantial amount of plug-in for 3D player to view all the 3D content currently available on the web.

    因此,今天您将为3D播放器安装大量插件,以查看当前在网络上可用的所有3D内容。

    用于创建3D场景的工具 (Tools for creating 3D scenes)

    Currently there are several tools used for creating 3D scenes. However, from the beginning these tool/s were used: markup language for creating 3D scenes adapted to an HTML page.

    当前,有几种用于创建3D场景的工具。 但是,从一开始就使用了以下工具:用于创建适合HTML页面的3D场景的标记语言。

    Some markup languages are best known are:

    一些标记语言是最著名的:

    • VRML

      虚拟现实
    • X3D

      X3D
    • KML

      KML
    • 3DMLW

      3DMLW
    • COLLADA

      COLLADA

    These formats can be viewed from an HTML page through the plugin.

    可以通过插件从HTML页面查看这些格式。

    In addition to these standard models used to describe 3D scenes, the other sector technologies used with other characteristics: we are talking about libraries and in some cases of genuine software to create 3D environments that rely on OpenGL graphics library base, without making use of standard markup languages.

    除了用于描述3D场景的这些标准模型之外,其他具有其他特征的领域技术也正在使用:我们正在讨论库,在某些情况下还使用正版软件来创建依赖OpenGL图形库基础的3D环境,而不使用标准标记语言。

    In order to exploit the features of multi-language and multi-platform OpenGL, were developed many bindings for this library in many languages. Among the most important are the OpenSceneGraph library, and the innovative 3D Java library that relies on OpenGL for hardware acceleration. Sun Microsystems has also released an open source library that provides bindings to OpenGL commands in Java. This library is called JOGL.

    为了利用多语言和多平台OpenGL的功能,为此库开发了许多语言的许多绑定。 其中最重要的是OpenSceneGraph库,以及依靠OpenGL进行硬件加速的创新3D Java库。 Sun Microsystems还发布了一个开源库,该库提供Java中与OpenGL命令的绑定。 该库称为JOGL。

    Google has also created a library to build 3D scenes on the Web This O3D, made with the intention of rapidly becoming a major standard on 3D Web

    Google还创建了一个库,用于在Web上构建3D场景。此O3D旨在Swift成为3D Web的主要标准

    Web 3D应用程序 (Web 3D Applications)

    Often, 3D technology is used on the World Wide Web in order to view land and three-dimensional maps. The use of scenarios makes it very realistic 3D map of the consultation and thus facilitates its understanding of users. This application is called Geo-Viewers (but Viewers or Map-Terrain-Viewers).

    通常,万维网上使用3D技术来查看陆地和三维地图。 场景的使用使其成为非常现实的咨询3D地图,从而有助于其对用户的理解。 此应用程序称为地理查看器(但查看器或地图地形查看器)。

    Study: From Wikipedia, the free encyclopedia. The text is available under the Creative Commons.

    研究:来自维基百科,免费的百科全书。 该文本可在“ 知识共享”下找到

    翻译自: https://www.eukhost.com/blog/webhosting/what-is-web-3d/

    web3d

    展开全文
  • Web3D赛车游戏的设计与实现_论文.doc
  • 马爹利H5小游戏web3d

    2018-07-29 17:32:36
    马爹利3d版H5小游戏,教科书式的作品呈现,可以控制小鸟的飞行方向,撞击彩蛋获得分数
  • The availability of 3D data \on demand", through a service The development of web clients where 3D data can be fully explored, while minimizing data communication
  • Web3D 从入门到跑路 · 3D 初体验

    千次阅读 2022-03-17 18:34:37
    本文整理自老冯于 凹凸 2022 年技术分享,带领大家从案例、应用、技术生态出发,让大家了解一下 3DWeb 端的现状。 Hey 3D what's up,最近在Web圈混得怎样 在“元宇宙”概念越来越火热的背景下,我们准备...

    3D初体验

    本文整理自老冯于 凹凸 2022 年技术分享,带领大家从案例、应用、技术生态出发,让大家了解一下 3D 在 Web 端的现状。

    Hey 3D what's up,最近在Web圈混得怎样

    在“元宇宙”概念越来越火热的背景下,我们准备了一系列的 3D 元宇宙公开课及教学文章,教大家如何从 0 到 1 快速搭建一个3D项目,从中可以学习到 WebGL 底层原理、图形学、热门引擎的使用方法等。在入门前,我们先从案例、应用、技术生态出发,让大家了解一下 3D 在 Web 端的现状。


    一、案例展示

    1.1 组成部分

    先从一个基础的 DEMO 出发,一个基础的 3D 一般会有以下模块组成:

    (1)渲染

    打开一个 3D 页面,首先会下载模型文件,然后渲染到页面中

    (2)动画

    逐帧渲染动画

    (3)事件绑定

    通过 js 的事件绑定,触发对应的渲染。比如点击地面人物移动

    (4)场景切换

    众所周知,游戏里有很多场景,比如游戏加载、游戏开始、游戏结束,就是三个不同的场景。如图就是从主玩法到编辑场景


    1.2 完整案例

    (1)PC 端

    下面来看一些有趣的例子,先从 PC 端开始 这是一名开发者博客,他从开始场景切换成主场景,然后渲染一些树、车 3D 模型,用键盘控制模型的方向,碰撞后将模型旋转,并同时播放对应的音频等。 点击体验一下 👉 https://bruno-simon.com/

    这是 playcanvas 官网上的宝马 demo,它渲染了动画,点击下面的图片,可以更换这个模型的纹理。 点击体验一下 👉 https://playcanv.as/p/RqJJ9oU9

    (2)H5 端

    再看看移动端的案例 上面的赛车游戏,也是从开始场景切到主玩法,之后通过下方的 touch bar 对车/地图的进行位移和其他物体碰撞后,检测触发加速等事件。 扫码或点击体验一下👉 Mercedes-EQ Formula E Team - Speedboard Game

    然后是大家熟知的例子,神庙逃亡,也可以看到很明显的场景切换、碰撞检测等。 扫码或点击体验一下👉 Play Temple Run 2 on Poki


    二、应用场景

    再来看看 3D 在国内一些正式的应用场景。

    2.1 App 端

    比如 VR 看房,VR 线上看房可以没有导购员的干扰,节省带看成本,用户操作上也为该房产留下了大量的数据留存;

    还有如果在一些购物 App 上看鞋,它会有鞋 3D 模型预览,以及 AR 试穿,可以看清鞋子的细节以及个人试穿后的样子。

    2.2 H5 端

    一些互动小游戏中,也有 3D 的部分

    微信小游戏中,也有 3D 的小游戏


    三、技术生态

    3.1 游戏引擎的定义

    首先,想要“快速”实现一个 3D 游戏,需要 3D 的游戏引擎,那么到底什么是游戏引擎呢?

    (1)已编写好的可编辑电脑游戏系统 (2)交互式实时图像应用程序的核心组件 (3)能容易和快速地做出游戏程式


    3.2 游戏引擎的组成

    大多数游戏引擎包含以下系统: (1)渲染引擎 即“渲染器”,绘制图像,并向外部表达图像的系统,含二维图像引擎和三维图像引擎

    (2)物理引擎 通过为刚性物体赋予真实的物理属性的方式来计算运动、旋转和碰撞反映

    (3)脚本引擎 提供脚本接口,让开发者通过脚本设计游戏,使游戏的开发更加灵活

    (4)网络引擎 数据交换的模块,在开发多人在线游戏时使用

    (5)人工智能 代替游戏开发中部分劳动密集型内容的生成,如道路检测


    3.3 如何选择合适的游戏引擎

    如何选择适合游戏引擎,我们一般从以下三个方面考虑:

    (1)入门

    • 开发语言
    • 学习资源与技术支持能力
    • 工作流支持力度

    如果是刚入门的先要考虑是否是自己熟悉的开发语言,考察该引擎的官方的资源文档、团队的问题修复能力、社区活跃度,以及引擎的工作流支持力度,如是否有 playground 等。

    (2)参考

    • 商业化成熟案例
    • 应用广度

    从参考实例上考虑,该引擎是否有现实的有名的项目正在使用,使用的广度;

    (3)设计

    • 设计理念
    • 性能

    从设计上面考虑,引擎的设计理念是否容易理解、方便第三方介入接入。以及需要结合项目的规模及功能要求,需要选择符合要求的性能优化、内存管理、资源管理的引擎。


    3.4 技术栈

    选取了 Github 上 star 数最多的游戏引擎,选几个来分析一下其优点及不足:

    (1)Three.js

    Three.js 是最流行的 JavaScript 库之一,用于使用 WebGL 在 Web 浏览器中创建和动画化 3D 计算机图形。

    A. 优点:

    • 易于学习:非常容易上手,同样适合新手
    • 大型社区:示例多,用户多,社区丰富
    • 好的文档:强大的文档通常是一个强大的库的一个很好的指标,而 Three.js 具有出色的文档
    • 性能优势:出色的性能,能很好地执行复杂的渲染功能
    • PBR渲染:具有内置的 PBR 渲染,这使得渲染图形更加准确

    B. 不足:

    • 不算是游戏引擎:渲染以外的功能很少
    • 面向新手:由于 API 面向新手,因此隐藏了许多高级功能

    (2)Babylon.js

    Babylon.js 是一个强大的、简单的、开放的游戏和渲染引擎。

    A. 优点:

    • 出色的测试工具:Playground 是在进行全面开发之前对事物进行测试的出色工具,并且具有出色的启动文档
    • 强大的社区支持:社区活跃和丰富
    • 更新迭代频繁:该框架拥有频繁更新的代码库,并且第三方工具正在积极开发中
    • PBR 渲染:对 PBR 渲染的支持非常出色
    • 大牌支持:Babylon 得到 Adobe,Microsoft 等大型品牌的使用和支持
    • 问题修复:BUG 修复很快,问题很快能得到解决

    B. 不足:

    • 成熟度:2013 年的第一个版本,与许多竞争对手相比,它还算年轻;
    • 文档:API 文档部分参数字段描述不够清晰;
    • 规模:不适合较小的项目

    (3)Aframe

    • 使用简单,声明性 HTML:A-Frame 只需插入 <a-scene>
    • 实体组件体系结构:A-Frame 是 Three.js 之上的强大框架,为 Three.js 提供了声明性,可组合且可重用的实体组件结构
    • 性能:一个框架是在 Three.js 之上的一个瘦框架
    • 跨平台,有视觉检查器,功能丰富
    • 设计理:由于设计理念与其他引擎不同,接入第三方物理引擎的时候,不太方便做适配

    (4)Playcanvas

    侧重于游戏引擎而不是渲染引擎,是一款优秀的全功能游戏引擎。但是私有项目收费,没有碰撞偏移,缺少示例。

    (5)Whs

    • 使用简单,集成 Three.js 渲染引擎,rendering 渲染自动化,加速 3D 场景原型制作,based 基于组件的场景图
    • 即使使用 Worker(多线程),也可以轻松集成任何高性能物理
    • 基于 ES2015+,pack Webpack 友好

    (6)其他

    A. Egret 白鹭、LayaAir 还有国内的一些引擎,当我们用中文搜索“游戏引擎”,一般都会推荐白鹭、LayaAir 这两个,它们的优点就是有专门的企业进行开发和维护,也可以花钱让其做定制化需求,并且支持多端开发。 白鹭的话比较偏向于 2D,3D 是近几年开始在 2D 基础上迭代的。而 Laya 比较多的人用来做微信小游戏。不足的是,他们的社区不够活跃,文档更新不及时,对于开发者来说,开发体验不是非常友好。

    B. oasis 去年淘宝开源 oasis,用于支付宝的蚂蚁庄园以及其他的一些互动游戏。现在已经有 3500 个 star 了,从它的官方文档上看,使用方式与 three 类似,API 比较简单,也具有基础的物理相关示例,还是比较实用小型、功能小的项目的。

    7. 小程序

    如果想要兼容微信小程序端,微信官方有Adapter的示例: Adapter | 微信开放文档

    有以下开源仓库,可供大家参考一下:


    参考资料

    1. 游戏引擎 - 维基百科,自由的百科全书
    2. XR地产:VR、AR看房场景
    3. Choosing the right game engine
    4. 如何选择H5游戏引擎
    5. JavaScript Game Engines
    6. HTML5 Game Engines
    7. H5游戏开发:游戏引擎入门推荐
    8. Top 6 JavaScript and HTML5 game engines
    9. Top JS Gaming Engines and Libraries for 2020

    欢迎关注凹凸实验室博客:aotu.io

    或者关注凹凸实验室公众号(AOTULabs),不定时推送文章:

    欢迎关注凹凸实验室公众号

    展开全文
  • web3d开发技术

    2014-09-08 12:01:06
    web 3d开发相关技术总结, VRML, x3d, O3D等等
  • 课程分享——地图Web3D可视化-WebGL、Three.js,附源码 课程概述 - 本课程讲解如何在web上实现地图3D可视化 - 学习本课程有前端基础即可,如果了解three.js更好 适用人群 有前端基础,想基于Web实现地图数据的3D...
  • Cesium-1.30开发库,提供web 3D javascript库 由于node的资源在国内被墙的厉害,推荐采用cnpm替代npm来安装一些依赖库
  • 3D Web查看器 该项目是使用后端的node express和用于3D渲染的Three.js开发的。 输入项目文件夹,然后 npm install 创建一个文件夹/ p​​ublic / models并添加您的3D模型(.stl,.obj,.ply,.amf)。 现在,您可以...
  • [web3d] | 基于web3d的案例整理

    千次阅读 热门讨论 2020-08-18 16:54:18
    学习cesium和threejs的过程中整理的一些个人示例,后续慢慢完善并上传github

     学习cesium和threejs的过程中整理的一些案例,个人学习使用 伸手党勿扰

    概览图

     

    其他功能示例地址:传送门 

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 123,146
精华内容 49,258
关键字:

web3d