相关链接
轻量级开源的JavaScript 3D引擎,传播最广泛的WebGL三维引擎。对WebGL底层的东西进行了封装,让非计算机图形学领域的人也可以实现三维世界 WebGL从应用的角度看,在不同领域差别也比较大。对机械而言更多是侧重于建模,工业设计除了建模外,还要进行仿真渲染,游戏的角色模型更侧重于柔性的人 体、动物体。WebGL的引擎比较多,将来会更多,不可能都要掌握背会,比如你的特长是渲染模型,对于你而言不同的框架,只是具体代码不同而已,但是灯光、环境、贴图的概念 是相同的,代码的思想是相同的。所以本文档会把three.js常用的对象及其属性和方法的使用格式一一呈现,大家开发项目时,可以随时查询
不同版本略有差异,大体相同
当在html文档中使用three.js文件创建3D场景时,three.js中一段程序默认在body中插入canvas元素,不需要像使用原生WebGL那样要在body标签里面手动创建canvas画布元素
属性 | 意义 |
height | 画布高度 |
width | 画布宽度 |
background-color | 画布背景颜色 |
opacity | 画布透明度 |
canvas { width: 100%; height: 100% }
<body> //创建一个canvas标签的容器 <div id="div" style="width: 200px;height: 200px"> </div> </body> <script> //选择创建的div元素块 var obj=document.getElementById("div"); ... //three.js引擎的构造函数WebGLRenderer创建的渲染器对象renderer,具有domElement属性,该属性的值就 是一个canvas对象,利用appendChild方法就可以实现在页面某个区域插入canvas画布。 obj.appendChild(renderer.domElement); </script>
创建一个场景对象,可以向场景里面添加网格模型、灯光等对象
var Scene = new THREE.Scene();
雾实例,默认空
背景,默认空
以JSON格式返回场景数据
hex:十六进制颜色参数
创建一个场景对象,可以向场景里面添加网格模型、灯光等对象
雾实例,默认空
设置颜色,如果方法函数的参数是黑色,极限远处物体是黑色
fog开始影响的最短距离,默认1
超过某个距离不在计算和应用,默认1000
返回一个参数相同的fog实例/p>
以JSON格式返回fog数据
hex:十六进制颜色参数
雾指数,密度随距离指数变化
FogExp2实例,默认空
设置颜色,如果方法函数的参数是黑色,极限远处物体是黑色
密度变化速度,默认0.00025
超过某个距离不在计算和应用,默认1000
返回一个参数相同的FogExp2实例/p>
以JSON格式返回FogExp2数据
创建一个长方体
参数:
width — X方向长度
height — Y方向长度
depth — Zx方向长度
widthSegments — X方向分段数,默认1
heightSegments — Y方向分段数,默认1
depthSegments — Z方向分段数,默认1
//长宽高均为1的立方体
var Box = new THREE.BoxBufferGeometry( 1, 1, 1 );
输出一个对象//{width: 1, height: 1, depth: 1, widthSegments: undefined, heightSegments: undefined}
geometry.parameters
开发业余时间,会不定期更新,同时完善总结不到位的内容,如果那些内容不够完善,大家可以加QQ群提出来,WebGL和three.js交流群:187740169,