跟随技术的脚步-linolzhang的专栏

在学习了几何形状和材质之后，我们就能使用他们来创建物体了。最常用的一种物体就是网格（Mesh），网格是由顶点、边、面等组成的物体；其他物体包括线段（Line）、骨骼（Bone）、粒子系统（ParticleSystem）等。创建物体需要指定几何形状和材质，其中，几何形状决定了物体的顶点位置等信息，材质决定了物体的颜色、纹理等信息。本章将介绍创建较为常用的物体：网格，然后介绍如何修改物体的属性

材质是指几何对应的 颜色信息，想让一个对象最终呈现出你所希望的样子，其中最重要的一个因素就是材质。       来看一下例子 “canvas_material.html” // Spheres var geometry = new THREE.SphereGeometry( 100, 14, 7 ); var textureLoader = new THREE.TextureLoa

THREE.js 支持两种形式的漫游，第一人称漫游（First Person） 和 飞行（Fly），可以分别参考 example 下的 “misc_fps.html” 和 “misc_controls_fly.html”。一. 第一人称漫游       例子中的效果是这样的，通过 【ASDW】控制平移，通过【←↑↓→】控制朝向（try 一下）。       漫游主要是通过 ca

Three.js 提供了很多操纵器，example下也给了一些操纵器（也叫控制器）的例子，引用 js 可以参考 examples/js/controls/TrackballControls.js 。       Trackball 是众多控制器中应用最多的样例之一，将场景对象封装到一个包围球，将鼠标操作映射为对该包围球的拖拽。       下图是 example下提供的例子：（对应代码 m

在三维世界，一个模型要想最终呈现到一个照片上，需要经过三次矩阵变换，这三个矩阵分别是：       模型矩阵（World） - 视图矩阵（View）- 投影矩阵（Projection）一. 模型矩阵       将 局部坐标系 下的模型坐标（相对于自身原点的坐标） 转化到 世界坐标系 下，通常称为World Matrix。       可以理解为把多个不同坐标系下的

• Three.js 的场景       THREE.Scene 执行场景树管理，场景的创建只需要一句话： var scene = new THREE.Scene();       场景常用操作包含：1.scene.add(obj);                    // 在场景中添加物体2.scene.remove(obj);              //

与OpenGL一样，Three.js 符合右手坐标系，X轴向右，Y轴向上，Z轴朝外：       Three.js 的绘制流程可以描述为：1. 生成 渲染器 - THREE.WebGLRenderer，并绑定Canvas绘图画布2. 建立 场景管理器 - THREE.Scene，管理场景对象（场景树）    生成场景对象THREE.mesh，添加到场景管理器3. 创

一. 何为WebGL？      WebGL 是基于Web的 三维渲染接口，与OpenGL的不同之处在于，添加了对 JavaScript 的支持，能够为 HTML5 提供硬件加速的三维图形渲染（通过Canvas来和DOM打交道）。      WebGL 是基于 OpenGL ES 2.0 的 Javascript API。通过 HTML5 的 Canvas 来和 DOM 打交道。

Three.js 支持四种光源模式，分别是 环境光、点光源、平行光 和 聚光灯。一. 环境光        Ambient Light：所有对象的整体光照模型，控制整个场景的明暗。 var ambientLight = new THREE.AmbientLight(ambiColor); // 环境光颜色 scene.add(ambientLight)

本文将详细描述如何使用Three.js给3D对象添加贴图（Texture Map，也译作纹理映射，“贴图”的翻译要更直观，而“纹理映射”更准确。）。为了能够查看在线演示效果，你需要有一个兼容WebGL的现代浏览器（最好是Chrome/FireFox/Safari/Edge/IE11+）。本文的在线演示结果和代码请点击这里：Three.js贴图实例。什么是贴图（Texture Mappi

Three.js可以通过使用Physijs库向场景中加入物理效果。这个库是基于著名的物理引擎ammo.js。Physiji1.导入库文件[html] view plain copy Physijs.scripts.worker = 'js/Physijs/physijs_worker.js';  Physijs

body {margin: 0;}body, html {overflow: hidden;}body, html, .canvasbox {width: 100%;height: 100%;}/* 坐标系 */.zuobiaoxi {position: absolute;display: table;right: 3px;top: 3px;font-size: 12px;z-index:

最近在试着用Three.js做一个简单的赛车游戏，里面有一个需要解决的问题是如何判断两个物体发生了碰撞，比如赛车是否碰上了障碍物或者获得了奖励物品。示例我找了一些资料，发现了两个示例程序：第一个示例、  第二个示例 。 以上两个程序都是用  THREE.Raycaster 类来解决问题的。 Raycaster类Raycaster 应该翻译为“光线投射”，顾名

Three.js是一个伟大的开源WebGL库，WebGL允许JavaScript操作GPU，在浏览器端实现真正意义的3D。但是目前这项技术还处在发展阶段，资料极为匮乏，爱好者学习基本要通过Demo源码和Three.js本身的源码来学习。 0.简介 嗨，又见面了。这么说我们已经开始学习Three.js了，如果你还没有看过之前三篇教程，建议你先读完。如果你已经读完前面的教程了，你可能会想做一些

“渲染”（Rendering）是即使非计算机专业的都不会觉得陌生的词，虽然在很多人说这个词的时候，并不清楚“渲染”究竟意味着什么。相反，“着色器”（Shader）很可能是大家比较陌生的词，从名字看上去似乎是用来上色的，但它具体能做什么呢？在解释着色器之前，我们先来聊聊渲染。渲染用通俗的话来说，渲染就是将模型数据在屏幕上显示出来的过程。这听起来好像很简单呢！但正如

Three.js有一系列导入外部文件的辅助函数，是在three.js之外的，使用前需要额外下载，在https://github.com/mrdoob/three.js/tree/master/examples/js/loaders可以找到。*.obj是最常用的模型格式，导入*.obj文件需要OBJLoader.js；导入带*.mtl材质的*.obj文件需要MTLLoader.js以及OBJ

动画原理在这里，我们将动态画面简称为动画（animation）。正如动画片的原理一样，动画的本质是利用了人眼的视觉暂留特性，快速地变换画面，从而产生物体在运动的假象。而对于Three.js程序而言，动画的实现也是通过在每秒中多次重绘画面实现的。为了衡量画面切换速度，引入了每秒帧数FPS（Frames Per Second）的概念，是指每秒画面重绘的次数。FPS越大，则动画效果越

全景图是一个当下非常流行的展示方式，在 VR | AR领域有广泛应用。       在三维内的 全景图 通常是根据 鼠标事件调整摄像机位置（在包围球内旋转），其基本思路一致，包围球可以通过 球面、立方体来实现，在几何上面贴上全景图纹理，一个典型的全景纹理图可能是下面这几种：       或者也有可能是多副图的形式，组成一个Cube（根据实际的方式会有所不同）。       概念