在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... [继续阅读]
在Yii2中GridView可以使用pjax方式刷新，可以很好的提升用户体验，简化程序开发人员自己ajax刷新表格的工作复杂程度。可是有些时候，我们需要手动的触发表格刷新，或者有些链接我们在点击的时候，不希望触发pjax，这个需要怎么实现呢，接下来我们就讲下在Yii2中如何实现。首先如果我们有链接不想触发pjax，比如一些操作按钮，直接跳转到其他页面 那么只需要在链接上加上以下标签就可以data-pjax="0" a class="btn btn-success" title="添加" data-pjax="0" href="create"i class="glyphicon glyphicon-plus"/i/a 上面就是一个添加新... [继续阅读]
很多时候，我们希望在curd的index页面直接修改一些数据，而不是进入到编辑页面修改保存。这里给大家提供一种使用kartik-v扩展的实现方法。 首先使用composer安装一些必要扩展 "kartik-v/yii2-grid": "@dev", "kartik-v/yii2-editable": "1.7.x-dev", "kartik-v/yii2-widgets": "3.4.0.x-dev", "kartik-v/yii2-date-range": "1.6.x-dev" 然后再我们的views的index.php里面用它的gridview替换系统的gridview use kartik\grid\GridView; 修改其中需要编辑的列（比如文章标题title） [ 'cl... [继续阅读]
关于材质，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代码中写入以下代码 ... [继续阅读]
Tip1：如果能够翻墙，尽量翻墙，因为有很多包是github上面download下来的，翻墙会快很多也不会有莫名其妙的错误。Tip2：使用国内镜像会稍微缓解下，但是因为download包都是从git上面下载，所以也不会快很多。参考这个http://pkg.phpcomposer.com/安装composer config -g repo.packagist composer https://packagist.phpcomposer.comTip3：更新composer到最新版本composer self-updateTip4：先全局安装依赖fxp/composer-asset-plugincomposer global require "fxp/composer-asset-plugin:~1.1.1"Tip5：LNMP环境下的奇怪问题，从问题上看... [继续阅读]