在线教程

  • Techbrood Stone 3D IDE Release Notes

    Stone 3D致力于在沉浸式网页(web3d/webxr)应用领域提供一款可以和Unity、Unreal相互竞争的轻量级引擎。Stone的体量只有Unity、Unreal的千分之一,在网页3D构建、快速概念验证和在线仿真教学方面有较大优势。
    版本0.1:[2020-10-01]主流ECS架构...

    阅读全文 收藏 评论 (0) 阅读 (3582) 2020-11-17 09:28:37  
  • 生成本地npm包

    1、创建一个文件夹,此处我的文件夹名字为test-my-pack

    2、在文件根目录初始化npm,可以一路回车
    npm>init之后会生成package.json文件

    3、在根目录下创建bin目录,并在bin目录下创建一个js文件,此处我命名js文件为my-...

    阅读全文 收藏 评论 (1) 阅读 (5213) 2020-02-21 16:28:02  
  • 基于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) 阅读 (9072) 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) 阅读 (12796) 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) 阅读 (6981) 2019-11-09 15:26:43  
  • AFrame工作原理简要说明

    AFrame(a-frame)是Mozilla推出的基于Three.js的一个WebXR ( WebVR ) 应用开发引擎。其架构或设计模式为游戏引擎常用的Entity/Component/System。其总体思想是通过声明式语言的方式来创建实体、挂载组件,并通过系统(Systems)来提供基础服务如多相机系统、XR交互控制、存储系统等。其工作过程大致如下:
    1)在DOM文...

    阅读全文 收藏 评论 (0) 阅读 (3161) 2019-11-07 12:22:48  
  • 深入剖析JavaScript代码执行上下文、变量范围以及闭包(Closure)

    Some concepts are important to grok before you can grok closures. One of them is the execution context.This article has a very good primer on Execution Context. To quote the article:When code is ru...

    阅读全文 收藏 评论 (0) 阅读 (2170) 2019-11-03 22:49:54  
  • NodeJS中的module概念以及module.exports和exports的区别

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

    阅读全文 收藏 评论 (0) 阅读 (3174) 2019-10-28 10:54:50  
  • WebXR基本概念和应用程序开发简介

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

    阅读全文 收藏 评论 (0) 阅读 (7207) 2019-09-02 18:31:12  
  • WebGL入门教程 - 高光计算模型

    现实物体在光源的照射下,会出现吸收和反射。物体的颜色主要由漫反射决定,但局部高光效果则主要由镜面反射来决定。从表面反射出的光线与入射角成相等但相反的角度,称为“镜面反射”。如果镜面反射光线直接进入相机,就好像相机直接看到光源一样,即使它已经从物体上反弹出来。相机看到的是光源的光,而不是物体的颜色。如...

    阅读全文 收藏 评论 (1) 阅读 (4025) 2019-08-09 18:06:06