在线教程

  • Stone 3D Demo Cases

    新能源虚拟城市概念展https://wow.techbrood.com/static/20210108/60580.html邻里家全景图浏览https://wow.techbrood.com/static/20210223/61008.html3D电子调音台https://wow.techbrood.com/static/20210616/61771.html高精度房地产电子沙盘https://wow.techbrood.com/static/2021012...

    阅读全文 收藏 评论 (0) 阅读 (2358) 2021-02-23 16:10:10  
  • Linux Apache2如何开启gzip (deflate module) 压缩功能

    检查你的网站是否启用了gzip,用chrome打开网站比如http://www.techbrood.com选中一个请求,查看Response header部分,如果没有包含Content-Encoding: gzip
    那么你还没有开启gzip网页压缩功能。1.首先检查是否已安装mod_deflat...

    阅读全文 收藏 评论 (0) 阅读 (2392) 2020-10-15 00:32:04  
  • 基于elementUI封装自己的UI组件库

    初始化 project这里我们使用官方的 vue-cli 初始化一个 Vue 项目npm>install>-g>@vue/cli #>or yarn>global>add>@vue/cli vue>create>admin-ui

    >>>>在src的同级目录创建packages文件夹,用于存放需要打包的组件>>>>package目录结构接下来让我们写一个简单的Vue component,基于elem...

    阅读全文 收藏 评论 (3) 阅读 (9028) 2019-12-04 15:55:22  
  • three.js添加场景背景和天空盒(skybox)

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

    阅读全文 收藏 评论 (0) 阅读 (12733) 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) 阅读 (6944) 2019-11-09 15:26:43  
  • NodeJS中的module概念以及module.exports和exports的区别

    NodeJS为js引入了模块化的一些概念,html里面可以引入js或css,甚至css也可以通过@import来引入其他css文件,而JS一直缺少这个机制,这使得JS很难像其他语言如java/python/php那样来编写模块化的应用程序。因此ES6以及NodeJS都对这方面特性做了增强。NodeJS为每个单独的JS文件生成了默认的Module对象,该对象用来表示文件执...

    阅读全文 收藏 评论 (0) 阅读 (3153) 2019-10-28 10:54:50  
  • HTML、JavaScript和GLSL编码规范

    HTML编码规范
    • 始终将文档类型声明为文档中的第一行:>&!doctype>html&p&div&p...>&/p&br>/&div>class="..."&div>class="..."&div>class="..."> >>&meta>charset="UTF-8">> >>&titleSyntax>and>Coding>Style&/title &/head&!-->This>is>a>com...

    阅读全文 收藏 评论 (0) 阅读 (1954) 2019-09-23 17:52:23  
  • WebGL 2D纹理坐标到3D顶点坐标的映射

    webgl纹理映射用来把图片贴到模型的材料表面,给模型添加丰富的细节。该方法的核心是把一张二维的图片映射到三维的坐标空间去,也就是为每一个3d顶点找到其相应的纹理像素。要想实现这样的目标,显然需要先把3d模型展开为2d的平面,然后才可以和2d贴图建立对等的映射关系。我们这里以一个最简单的平面来观察这个映射的过程...

    阅读全文 收藏 评论 (1) 阅读 (5976) 2019-09-12 20:24:55  
  • WebXR基本概念和应用程序开发简介

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

    阅读全文 收藏 评论 (0) 阅读 (7185) 2019-09-02 18:31:12  
  • 体积光原理及WebGL实现

    体积光(或叫上帝之光)在自然界中是十分常见的现象,如太阳光从云隙中透过时产生的云隙光,森林中阳光从树叶中穿过产生的光柱。如果我们要在网页三维场景中模拟这种光效,需要深入了解大气物理模型和光散射原理。大气物理模型物体与其观察者之间存在着复杂的介质,比如太阳光到达我们眼睛是穿过了厚厚的大气层,大气层里面...

    阅读全文 收藏 评论 (1) 阅读 (5089) 2019-07-16 17:43:36