“未来早已到来，只是尚未流行。”最近，由于业务的需求，笔者的团队终于迈进了3d时代。其实，早在2017年，笔者便开始尝试前端的3d探索，因为当时主要的业务场景是运营活动，求新、创新便是活动的特性。不过，当时由于种种原因，最后未能落地，但未曾想到，会在3年后

mtl文件用于描述多边形可视面貌的材质如果你可以导出obj、mtl文件的话，那么就可以使用下面的代码把3d模型添加到three.js构建的场景里了

经过老板20天惨无人道的摧残，终于小有成就。开发使用： C4D、Blender2.75、[threejs-r72]万事开头难，第一个问题就是怎么才能把3d软件中做好的模型显示在浏览器中。接着在网上搜索发现Blender这玩意，由于设计师对C4D情有独钟不会

年前就一直研究了下WebGL相关的东西，看了很多资料和文档，这里做了一些小实践，记录分享一下。WebGL是一种 3D 绘图协议，这种绘图技术标准结合了JavaScript和OpenGL ES 2.0，在HTML5的Canvas元素中使用，从而可以在 Web

如果threejs可以导入shp文件，就可以呈现效果那是多么完美的事情啊！当然这是肯定的，那是我在经历的痛苦期，现在来分享我的甜品。有个偶然，一个QQ群的人，告诉我有个大神写了shp.js，可以读取线坐标，这才是我豁然开朗。之后，我就开始潜心，通读代码，已

parameters — Object that can contains the following parameters.　　size — Float. Size of the text. Default is 100.　　height — Float

当项目决定要做宇宙星空效果的时候，我百度了一波；发现了threejs；然后就从0开始学习了；一路上坑坑洼洼的；网上确实有相关文章，但没有相对于新手的；尤其是我这种现看文档现做的；而且很多代码都是使用原生js或者jquery的；这次是我把threejs引入a

GridHelper.js可以帮助绘制一个xz平面网格，它没有提供更多的参数，所以不能用于生成xy网格。line.position.y = i * divisions - size / 2; //设置line的位置。line.position.x = i

今天做项目的时候发现threejs中.obj模型投影与geometry的投影有一点不同，写个文章记录一下，防止忘记，也希望能够帮到大家！如果对你的问题产生了帮助，就请点个赞吧 ^_^ ~// obj.receiveShadow = true; /

在这几天工作中有遇到这么个问题：使用threeJS创建了一个3d效果图，且在该项目中使用了threeJs的轨道控制插件orbitcontrols插件，该效果图需要运行在移动端浏览器中，既然是运行移动端，自然需要用到触摸功能了，在我们常见的3d图中，有能旋转

最近在学three.js，特地整理偶然间碰到的学习资料分享给大家，国内除了大公司，专门学习three.js的太少了，普通的业务前端学它并不会增大面试成功率，react，vue新特性，原理都学不利落呢，谁会去研究这种只是炫，好玩的东西呢

Three.js官方文档比较精简，重点介绍api，没有一个合适的零基础的教程，但官网的demo十分丰富，遂产生从demo来逐渐学习Three.js的想法。// 初始化透视相机，参数。// 初始化渲染器，antialias表示抗锯齿, canvas属性将th

Three.js着色器很多时候如果想写一些特效，往往需要编写着色器代码GLSL，如果你不熟悉着色器语言，自然需要学习着色器语言语法，如果你有着色器语言基础，直接使用Threejs引擎的ShaderMaterial或RawShaderMaterial API

插件最早实现Web3D技术所有技术方案，基本都要依赖特定插件来实现，渲染效率、渲染质量都有些问题，并未全面流行起来。本篇文章既然不涉及使用插件方式实现三维模型在线预览，就不在展开详述历史上需要插件实现在线预览三维模型的相关技术。WebGL技术说到WebGL

本来以为不就设一个阴影嘛，网上这么多文章，随便看一篇就知道怎么设置了，然而我却花了整整一天才让阴影出现...很多博主说，在threeJS中要让阴影显示，只要满足以下几个基本条件。使阴影在这6个面描述的范围内才能显示，否则可能只显示一部分或者不显示阴影，如下

Object3D 获取中心点和尺寸Object3D 物体可以获取一个包含物体的 Box, 这个 Box 有一些功能, 比如获取中心点:. const center = box.getCenter;也可以用了获取物体的大小:. Orbit Control 如

用到一个基础的 three.js 的拖拽旋转, 梳理了一下资料,简单的描述就是定义了沿着 X Y Z 方向的依次旋转, 来模拟空间当中的任何一个旋转,比如这个例子, 鼠标在 X Y 方向的拖拽, 分别对应到地面的水平渲染, 和视角在纵向的旋转,而且, 即便

点光源 —— THREE.PointLight;//hex：颜色，intensity：强度，distance：距离。聚光灯 —— THREE.SpotLight;//hex：颜色，intensity：强度，distance：距离，angel：着色角度(弧度

DOM + CSS使用 html 是最快最简单来添加和管理文字的。大多数我们给的示例，是采用这种方法来用作描述性的层。<div id="info">Description</div>运用 css 标记语言的 z-

矩阵的概念threejs中的矩阵矩阵的应用用于旋转一个几何体创建一个立方体cube放到场景中；绕向量旋转30度var axis = new THREE.Vector3; //创建一个三维向量。var rotWorldMatrix = new THRE