《three.js文档》

中文文档跳转到文档页面

相关链接

documentation：帮助手册，three.js引擎所有的对象及其方法和属性的语法格式，初学查询，开发字典
examples：大量案例，可以参考学习
download：下载文件，three.js引擎文件
editor：简单可视化图形编辑器，可以类比各种三维建模、渲染软件

轻量级开源的JavaScript 3D引擎,传播最广泛的WebGL三维引擎。对WebGL底层的东西进行了封装，让非计算机图形学领域的人也可以实现三维世界 WebGL从应用的角度看，在不同领域差别也比较大。对机械而言更多是侧重于建模，工业设计除了建模外，还要进行仿真渲染，游戏的角色模型更侧重于柔性的人体、动物体。WebGL的引擎比较多，将来会更多，不可能都要掌握背会，比如你的特长是渲染模型，对于你而言不同的框架，只是具体代码不同而已，但是灯光、环境、贴图的概念是相同的，代码的思想是相同的。所以本文档会把three.js常用的对象及其属性和方法的使用格式一一呈现，大家开发项目时，可以随时查询

一、概述

three.js引擎文件夹目录结构

不同版本略有差异，大体相同

build：两个文件，执行代码是相同的，three.js引擎，文件three.js有英文注释，three.min.js是压缩过的three.js，文件较小，适合建站使用，使用src引入three.js文件即可
editor：简单可视化图形编辑器，可以类比各种三维建模、渲染软件，通过index.html进入界面
examples：大量三维案例，曲面模型、水、布料、人体、VR等素材，可以查看源码学习，一些扩展的js框架，例如鼠标旋转零件
src：three.js引擎每个部分单独存放成文件
utils：存放一些辅助工具，例如blender文件夹中文件可以与blender软件结合，是blender有导出json等格式模型的功能
docs：帮助文档，学习查询工具

二、three.js中canvas画布控制

单个canvas画布，比如一个全屏显示的游戏

当在html文档中使用three.js文件创建3D场景时，three.js中一段程序默认在body中插入canvas元素,不需要像使用原生WebGL那样要在body标签里面手动创建canvas画布元素

属性	意义
height	画布高度
width	画布宽度
background-color	画布背景颜色
opacity	画布透明度

//在style标签里创建style样式即可，下面代码全屏显示

canvas { width: 100%; height: 100% }

一个页面插入多个canvas画布，比如基于WebGL的3D电商页面展示多个可以在线预览的3D商品模型

        <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>

三、场景Scene

- fog
- overrideMaterial
- autoUpdate
- background
- toJSON
- name
- color
- near
- far
- clone
- toJSON
- name
- color
- density
- far
- clone
- toJSON

四、几何体Geometry

- parameters

开发业余时间，会不定期更新，同时完善总结不到位的内容，如果那些内容不够完善，大家可以加QQ群提出来，WebGL和three.js交流群：187740169，

《three.js文档》

中文文档跳转到文档页面

一、概述

three.js引擎文件夹目录结构

二、three.js中canvas画布控制

单个canvas画布，比如一个全屏显示的游戏

一个页面插入多个canvas画布，比如基于WebGL的3D电商页面展示多个可以在线预览的3D商品模型

三、场景Scene

构造函数Scene()

属性

方法

构造函数Fog( hex, near, far )

属性

方法

构造函数FogExp2( hex, density)

属性

方法

四、几何体Geometry

构造函数BoxBufferGeometry(width, height, depth, widthSegments, heightSegments, depthSegments)

属性

《three.js文档》

中文文档跳转到 文档页面

一、概述

three.js引擎文件夹目录结构

二、three.js中canvas画布控制

单个canvas画布，比如一个全屏显示的游戏

一个页面插入多个canvas画布，比如基于WebGL的3D电商页面展示多个可以在线预览的3D商品模型

三、场景Scene

构造函数Scene()

属性

方法

构造函数Fog( hex, near, far )

属性

方法

构造函数FogExp2( hex, density)

属性

方法

四、几何体Geometry

构造函数BoxBufferGeometry(width, height, depth, widthSegments, heightSegments, depthSegments)

属性

中文文档跳转到文档页面