WebGL一个js的API,通过调用浏览器的GPU显卡来画图的接口来实现丰富的交互过程。但是因为webGL的语法很复杂需要会很多的GLSL(着色器语言)所以通过对这些语言封装的three.js应用而生。Three.js一个开源的轻量级的3D库。Three.js 封装了 WebGL 的细节提供了一个简单易用的对象模型。通过 Three.js你可以使用直观的“场景”、“相机”、“材质”和“灯光”等概念来构建 3D 应用而无需从零开始编写复杂的图形渲染管线。坐标系及辅助工具这一节学习世界坐标系和局部坐标系世界坐标是唯一的、不可变的局部坐标是每个 Object3D 自己的一套随父级一起动。 两者之间靠matrixWorld转换。AxesHelper 创建坐标系将场景或者物体的坐标轴可视化显示const axesHelper new THREE.AxesHelper(30);//参数表示坐标轴线条的长度 scene.add(axesHelper);GridHelper 一个水平网格通常用来做地面的参考// 参数 1网格的总长度和宽度 // 参数 2网格细分的次数每边有多少个格子 const gridHelper new THREE.GridHelper(50, 10); scene.add(gridHelper);光影让场景变得立体通过光照、光照的方向以及灯光布局的方式让物体变的有阴影。光源包含环境光和平行光。环境光是一种均匀照亮场景中的光用来充当补光的作用平行光模拟的是主光源用来使物体产生阴影和棱角的。环境光const ambientLight new THREE.AmbientLight(0xffffff, 0.5) scene.add(ambientLight)平面光const sunLight new THREE.DirectionalLight(0xffffff, 1.5); sunLight.position.set(10,20,10) sunLight.castShadow true;实践参考加载3D模型 | Threejs指南
