- 动效 文章 模型
-
-
three.js extrude shape代码示例
ExtrudeBufferGeometry example: heart shape and cloud shape
-
three.js制作星球和星星闪烁的简单示例
three.js simple example for making blinking stars
-
Oculus Go手柄（控制器）使用说明
Oculus Go是Facebook的一体式、3Dof VR眼镜，其手柄（即控制器）功能很简单。
电池安装
配对控制器
下载 Oculus 应用（这个需要手机科学上网）并按照屏幕上的指示将 Oculus Go 连上 WiFi。将随附的电池插入控制器中（如上图），然后轻触 Oculus 应用中的继续。按住控制... -
three.js添加场景背景和天空盒（skybox）
本文我们介绍在three.js中如何给3D场景添加背景，我们有3种方式来实现这个目的。通过html添加背景元素，这实际上一个2D背景；在three.js加载图片并设置为scene.background，这种方法的好处是可以被后处理(post-processing)效果所影响；在three.js中绘制天空盒作为背景。第一种是直接在canvas的c...
-
如何实现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... -
AFrame工作原理简要说明
AFrame（a-frame）是Mozilla推出的基于Three.js的一个WebXR ( WebVR ) 应用开发引擎。其架构或设计模式为游戏引擎常用的Entity/Component/System。其总体思想是通过声明式语言的方式来创建实体、挂载组件，并通过系统（Systems）来提供基础服务如多相机系统、XR交互控制、存储系统等。其工作过程大致如下：
1）在DOM文... -
深入剖析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...
-
WebXR桌面浏览器模拟器使用简介
WebXR标准最近（10月份）刚刚发布了工作版本（Working Draft），是一个重要的里程碑。由于WebXR的体验依赖于头戴设备，因此其应用程序开发和调试比较困难，为了测试你的应用程序在各种情况下的响应，你得拥有大量的设备：移动设备、3dof设备、6dof设备等等（比...
-
NodeJS中的module概念以及module.exports和exports的区别
NodeJS为js引入了模块化的一些概念，html里面可以引入js或css，甚至css也可以通过@import来引入其他css文件，而JS一直缺少这个机制，这使得JS很难像其他语言如java/python/php那样来编写模块化的应用程序。因此ES6以及NodeJS都对这方面特性做了增强。NodeJS为每个单独的JS文件生成了默认的Module对象，该对象用来表示文件执...
-
php curl大文件上传遇到502或504错误
使用php的curlfile上传大文件到远端服务器，遇到502错误。原因可能是超时或者内存超出，需要修改nginx、php.ini和php-fpm.conf中的一些配置。修改php.ini（注意console下和网页运行环境下使用的php.ini文件通常是不同的）中的输出缓冲参数如下：//output_buffering>=>4096 output_buffering>=>On>//>On表示无限制 max_e...
-
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...
-
WebGL 2D纹理坐标到3D顶点坐标的映射
webgl纹理映射用来把图片贴到模型的材料表面，给模型添加丰富的细节。该方法的核心是把一张二维的图片映射到三维的坐标空间去，也就是为每一个3d顶点找到其相应的纹理像素。要想实现这样的目标，显然需要先把3d模型展开为2d的平面，然后才可以和2d贴图建立对等的映射关系。我们这里以一个最简单的平面来观察这个映射的过程...
-
WebXR基本概念和应用程序开发简介
XR是VR,AR和MR的统称，VR,AR是从感官体验的角度来区分的，
VR是用户借助外设输入输出（头戴、手柄、体感、运动感知等软硬件系统）来和纯虚拟场景的交互体验，AR也是用户借助外设来体验额外的虚拟内容，区别是虚拟内容是叠加在真实世界上，其方式可以是通过透射或者视频叠加。WebXR是基于网页的XR应用程序，可以用来支持... -
网站SSL安全证书认证的基本过程和原理
现在的网站基本上都迁移到了https协议上，https是http协议的安全升级版本。在原来的http协议下，如果有人截获了你发送给服务器的报文，就能获取里面的信息，比如用户名乃至密码。所以http协议单纯从传输层面看是不安全的，其信息安全性得依赖额外的应用层面来保证。那么如何保证信息交互的安全性呢，一般是通过密钥对的方式...
-
WebGL入门教程 - 高光计算模型
现实物体在光源的照射下，会出现吸收和反射。物体的颜色主要由漫反射决定，但局部高光效果则主要由镜面反射来决定。从表面反射出的光线与入射角成相等但相反的角度，称为“镜面反射”。如果镜面反射光线直接进入相机，就好像相机直接看到光源一样，即使它已经从物体上反弹出来。相机看到的是光源的光，而不是物体的颜色。如...
-
Yii2里面布局Layout的缺省设置
yii2里面渲染视图时，需要先查找layout，这个逻辑是在yii2/base/Controller/renderContent里面实现的：
public>function>renderContent($content) >>>>{ >>>>>>>>$layoutFile>=>$this->>>>>>if>($layoutFile>!==>false)>{ >>>>>>>>>>>>return>$this-=$content],>$this); >>>>>>>>} >>>>>>>>return>$content; >>... -
如何构建一个面向对象的webgl渲染引擎
WebGL渲染引擎主流的有three.js和babylon.js，如果我们要自己实现一个类似的引擎，该如何设计实现呢？基本上我们可以分解为以下5个部分：webgl渲染部分的封装可渲染实例的抽象光照和相机场景和资源管理常用的图形运算库其中第1部分主要是整合绘制方面的一些...
-
9月前
-
3年前
-
3年前
-
3年前
-
3年前
-
3年前
-
3年前
-
3年前
-
3年前
-
3年前
-
3年前
-
3年前
-
3年前
-
3年前
-
3年前
-
3年前
奇迹世界Ⅱ Elementalist
Soul of the Ultimate Nation Elementalist 《奇迹世界Ⅱ》是韩国“网禅”（Webzen）《奇迹》和《奇迹世界》原班人马打造，使用了全新的3D渲染物理引擎开发，在...
-
3年前
-
3年前
© TechBrood Co. All rights reserved. 沪ICP备14011478号
