在线教程

  • three.js添加场景背景和天空盒(skybox)

    本文我们介绍在three.js中如何给3D场景添加背景,我们有3种方式来实现这个目的。通过html添加背景元素,这实际上一个2D背景;在three.js加载图片并设置为scene.background,这种方法的好处是可以被后处理(post-processing)效果所影响;在three.js中绘制天空盒作为背景。第一种是直接在canvas的c...

    阅读全文 收藏 评论 (0) 阅读 (8155) 2019-11-11 18:25:03  
  • 如何实现three.js响应式设计(消除拉伸变形和锯齿)

    我们先创建一个基本的three.js场景,里面有一个cube对象。分三步,首先声明一个canvas的html元素并设置其样式:&canvas>id="c">>>width:>100%; >>>>height:>100%; >>>>display:>block; }第二步,使用three.js创建场景、光照、相机和立方体模型(cube):
    import>*>as>THREE>from>'//techbrood.com/thr...

    阅读全文 收藏 评论 (2) 阅读 (4534) 2019-11-09 15:26:43  
  • WebXR基本概念和应用程序开发简介

    XR是VR,AR和MR的统称,VR,AR是从感官体验的角度来区分的,
    VR是用户借助外设输入输出(头戴、手柄、体感、运动感知等软硬件系统)来和纯虚拟场景的交互体验,AR也是用户借助外设来体验额外的虚拟内容,区别是虚拟内容是叠加在真实世界上,其方式可以是通过透射或者视频叠加。WebXR是基于网页的XR应用程序,可以用来支持...

    阅读全文 收藏 评论 (0) 阅读 (4711) 2019-09-02 18:31:12  
  • 如何构建一个面向对象的webgl渲染引擎

    WebGL渲染引擎主流的有three.js和babylon.js,如果我们要自己实现一个类似的引擎,该如何设计实现呢?基本上我们可以分解为以下5个部分:webgl渲染部分的封装可渲染实例的抽象光照和相机场景和资源管理常用的图形运算库其中第1部分主要是整合绘制方面的一些...

    阅读全文 收藏 评论 (0) 阅读 (2159) 2019-07-19 18:25:30  
  • HTML5 And Canvas 2D Specs Are Now Feature Complete, First HTML 5.1 Working Draft Published

    We’ve been writing about HTML5 for quite a while, but, until today, the actual HTML5 specs and standards were still moving targets. Now, however, the World Wide Web Consortium (W3C) has announced that the specifications for HTML5 and Canvas 2D are finally feature complete. This, the W3C notes, mean...

    阅读全文 收藏 评论 (0) 阅读 (2510) 2017-09-11 19:44:52  
  • 踏得网精选2016年度10大最佳HTML5动画

    踏得网精选2016年度最酷最新的HTML5动画集,评选标准为:创意新颖度+实现技术难度+趣味程度。使用一些在线H5生成工具的作品,因其主要使用图片和CSS3套路动画,千人一面乏善可陈,不入该列。所涉及技术主要是:HTML5/CSS3/SVG/WebGL(Three.js)/ES6(BabelJS)。TOP10: 镜花水月使用SVG>turbulence 滤镜实现的动画特效

    阅读全文 收藏 评论 (1) 阅读 (17270) 2017-07-21 09:54:37  
  • 如何使用BabylonJS加载OBJ或STL模型

    BabylonJS(也就是babylon.js,这是一个和three.js类似的WebGL开发框架),更多的用在游戏领域。
    本文说明和演示如何使用babylon.js来加载一个标准3d模型文件,如OBJ或STL。1.首先引入babylon主js和loader(主要是文件解析作用)的js脚本如下:&base>href="//wow.techbrood.com">/< &script>src="/libs...

    阅读全文 收藏 评论 (0) 阅读 (14111) 2017-06-25 19:57:40