国际惯例 Hello World！ 基础概念 光线与阴影 贴图与材质 模型加载 简单动画 交互 鼠标事件 碰撞检测 HUD标签的实现 其他demo 地址 [继续阅读]
我们在很多场景需要使用类似HUD的效果，比如游戏的小地图啊，瞄准啊，标注啊，地图上的定点啊等等都是HUD层的效果。（神马，你还不知道啥叫HUD，好吧，哥来给你个链接，赶快去看看https://en.wikipedia.org/wiki/Head-up_display）这篇，我们来讲讲怎么制作一个包含3D场景的HUD显示效果。 废话不多说，先上一个显示效果图。 图上可以看出一个红色的警告标识会一直跟随着下面的方块一起运动。这个时候你肯定会说，神马，就这么简单一个效果？直接在3d场景中加入一个三位的object不就ok了么。其实仔细想想并不是这么简单，比如大家可... [继续阅读]
Threejs是一个非常棒的图形库，可是对于一些交互逻辑，实现起来就没有那么容易了，这篇我们来讲解下如何实现一些常见的交互操作，比如点击、mouseover等效果。首先来看看Threejs是如何实现交互的。在3d的世界中，我们选取一个物体不像2d平面立面那么简单，因为我们所对应的是一个3维的世界，而鼠标所在的屏幕是一个2d的世界。这个时候Threejs会为我们提供一个叫做Raycaster的类，为我们提供的是一个射线，然后我们可以根据不同的方向去发射射线，根据射线是否被阻挡，来判断我们是否碰到了物体。我们来看看如何使用Raycaster类来实现鼠... [继续阅读]
在Threejs中我们可以使用代码创建简单的模型，可是对于复杂的模型，就没有办法使用代码来创建了。这个时候我们会采用加载3d模型的方式，直接加载美工人员使用专业工具制作的3d模型和动画。Threejs支持的格式还不少，基本上常用的都有支持。具体可以看看官方文档，这里我们简单介绍下加载.obj格式的模型文件和材质。首先，我们需要准备原材料，也就是模型文件，这个文件一般由美工人员导出，例如从3dmax软件里面导出画好的模型文件。记得一定要连材质一起导出，并且选取贴图材质路径是相对路径，一般导出的模型及材质会包括一个obj文件... [继续阅读]
在Threejs中实现动画可以采用两种方式，一种是直接在render循环中写动画逻辑，比如每次渲染的时候修改动画对象的一些属性，这种方法比较简单粗暴，没有很好的控制。还有一种是较为高级的使用成熟的第三方库Tween来做。接下来我们就两种方法分别介绍： 第一中： 我们在render循环中写入一下代码 var render = function () { requestAnimationFrame(render); step += 0.01; cube.position.x = 2 + (1 * (Math.cos(step))); cube.position.y = 2 + (10 * Math.abs(Math.sin(step))); ... [继续阅读]
最近项目需要在3D场景中给自定义的楼层区域进行贴图区分，对于普通的的纯色材质，实现比较简单，但是如果要进行纹理贴图的材质，就有点复杂了，这里写篇文章记录下。首先看看我们的楼层定义，如何实现自定义区域。其实很简单，我们使用有序的点来定义楼层的平面形状，然后根据平面的定义，自动生成3d的平面区域。var areaPts = []; for (var idx = 0 ; idx area.points.length; idx++) { var p = area.points[idx]; var v = new THREE.Vector2(p.px , p.py ); areaPts.push(v); } var areaShape = new THREE.Shap... [继续阅读]
关于材质，threejs的官方文档（https://threejs.org/docs/index.html?q=material）讲解比...介绍完材质后，我们来简单看看纹理贴图。如果我们想在材质上实现更加逼真的效果的话我们就要用到纹理贴图了，例如墙砖，地板等。 加载纹理图片我们使用TextureLoader var texture = new THREE.TextureLoader().load("images/f2.jpg"); 纹理可以设置水平和竖直方向的重复 texture.wrapS = THREE.RepeatWrapping; texture.wrapT = THREE.RepeatWrapping; 可以设置重复的次数 texture.repeat.set(20, 20); 效果图如下 下面介绍几个... [继续阅读]
光线与阴影 AmbientLight(环境光) 环境光作为基础光线，将应用到场景中的所有三维物体上，一般需要配合其他光源一起使用。AmbientLight不能产生阴影，也不需要指定坐标位置。设置好颜色和强度就ok了。 ambientLight = new THREE.AmbientLight(0xDFDFDF, 0.3); scene.add(ambientLight); PointLight（点光源） 点光源类似我们生活中的灯泡，光是没有固定方向，向着四周散射的。 DirectionalLight（方向光） DirectionalLight是较经常使用的光源，它的光纤都是平行向着一个方向发射的。所以使用DirectionalLight我们可以... [继续阅读]
接下来我们继续来详细讲解以下threejs的一些基础概念。 坐标系 首先是坐标系统，在三维世界中xyz坐标轴分别代表三个方向。Threejs中的x轴向右，y向上，z从屏幕向外，示意图如下 另外在场景中加入以下代码，便可以显示坐标轴辅助线（x轴为红色，z轴是蓝色，y轴是绿色） scene.add(new THREE.AxisHelper(5)); 了解了坐标系后，我们继续来看实现一个3d场景的必要元素。我们可以这样理解：一个三维场景实际上是一个摄像机在拍摄一个舞台场景，然后通过渲染器渲染到屏幕上。所以一个三位场景的主要要素有摄像机（camera... [继续阅读]