国际惯例 Hello World！ 基础概念 光线与阴影 贴图与材质 模型加载 简单动画 交互 鼠标事件 碰撞检测 HUD标签的实现 其他demo 地址 [继续阅读]
最近项目需要在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... [继续阅读]
要开发web3D的项目，大名鼎鼎的threejs相信你一定听说过。接下来，我们就按照国际惯例，从helloworld开始，把大家带入3D的世界！首先我们从GitHub（https://github.com/mrdoob/three.js/）下载three.min.js，其实可以download他们所有的库，里面还包含很多例子，这里我们仅仅使用在build目录下的已经打包好的three主文件，然后在html里面引用好threejs的库script src="js/three.min.js"/script 然后引入场景控制辅助类（在源码包的example/js/controls里面）script src="js/OrbitControls.js"/script 接着在JS代码中写入以下代码 ... [继续阅读]