ThreeJs 入门概念及使用整理
ThreeJs用于浏览器3D图形的渲染，基于WebGL封装，本身是Javascript语言开发的。尝试基于threeJs开发手写手绘小程序，因此整理了相关的基础技术文档。
一、场景、相机、渲染器概念
场景（scene）容纳了所有模型。
{
fog：设置场景的雾化效果,可以渲染出一层雾气，隐层远处的的物体。
overrideMaterial：强制场景中所有物体使用相同材质。
autoUpdate：设置是否自动更新。
background：设置场景背景，默认为黑色。
children：所有对象的列表。
add()：向场景中添加对象。
remove()：从场景中移除对象。
getChildByName()：根据名字直接返回这个对象。
traverse()：传入一个回调函数访问所有的对象。
}
相机（camera）决定了观察模型的位置和方位。
{
//透视相机
PerspectiveCamera(fov, aspect, near, far)
fov：表示视场，就是能够看到的角度范围，人的眼睛大约能够看到 180度 的视场，视角大小设置要根据具体应用，一般游戏会设置 60~90 度，默认值 45。
aspect：表示渲染窗口的长宽比，如果一个网页上只有一个全屏的 canvas 画布且画布上只有一个窗口，那么 aspect 的值就是网页窗口客户区的宽高比 window.innerWidth/window.innerHeight。
near：属性表示的是从距离相机多远的位置开始渲染，一般情况会设置一个很小的值。 默认值 0.1。
far：属性表示的是距离相机多远的位置截止渲染，如果设置的值偏小，会有部分场景看不到，默认值 1000。
//正交相机
OrthographicCamera( left , right , top , bottom , near , far)
left — 摄像机视锥体左侧面。
right — 摄像机视锥体右侧面。
top — 摄像机视锥体上侧面。
bottom — 摄像机视锥体下侧面。
near — 摄像机视锥体近端面。
far — 摄像机视锥体远端面。
}
渲染器（render）渲染模型到网页上。
{
//设置render尺寸
render.setSize(canvas.width,canvas.height);
//设置render屏幕百分比
render.setPixelRatio(ratio);
//获取当前上下文参数
render.capabilities.maxTextureSize。
//设置viewPort
render.setViewport(view.left,view.bottom, view.width, view.height);
//设置裁剪范围
render.setScissor(area.left,area.bottom, area.width, area.height);
}
二、几何、材质、物体
（1）几何（Geometry）有内置常用几何、外部导入几何、自定义几何类型。
{
//常用几何体
BufferGeometry 是面片、线或点几何体的有效表述。包括顶点位置，面片索引、法相量、颜色值、UV 坐标和自定义缓存属性值。使用 BufferGeometry 可以有效减少向 GPU 传输上述数据所需的开销。
BufferGeometry .setAttribute( 'position', new three.Float32BufferAttribute( pos, 3 ) ); BufferGeometry .setAttribute( 'scale', new three.BufferAttribute( size, 1 ) ); BufferGeometry .index=new three.BufferAttribute(indice,1); } （2）着色器材质（ShaderMaterial） 材质（Material）决定了几何表面的着色方式。着色器和着色器所需要的uniform参数、纹理按需求定义其中。
//常用材质
使用自定义shader渲染的材质。 shader是一个用GLSL编写的小程序 ，在GPU上运行。 您可能需要使用自定义shader，如果你要：要实现内置材质之外的效果；将许多对象组合成单个buffergeometry以提高性能。
{
const material = new three.ShaderMaterial({
uniforms: test_uniforms,
vertexShader: test_vshader,
fragmentShader: test_fshader,
blending: three.CustomBlending,
blendEquation :three.AddEquation,
blendSrc: three.SrcAlphaFactor,
blendDst: three.OneMinusSrcAlphaFactor,
wireframe:true,
});
}
（3）物体(Object3D)
这是Three.js中大部分对象的基类，提供了一系列的属性和方法来对三维空间中的物体进行操纵。请注意，可以通过add( object )方法来将对象进行组合，该方法将对象添加为子对象，但为此最好使用Group（来作为父对象）。常用子类：
点（Points）一个用于显示点的类。调用gl.POINTS渲染。
线段（LineSegments）在若干对的顶点之间绘制的一系列的线。它和Line几乎是相同的，唯一的区别是它在渲染时使用的是gl.LINES， 而不是gl.LINE_STRIP。
线（Line）一条连续的线。
网格（Mesh）结合了材质和几何生成的绘制元素，添加到场景中即可绘制显示出来。
{
//定义方块几何
const geometry = new three.BoxGeometry(1, 1, 1);
//定义基础材质
const material = new three.MeshBasicMaterial({ color: 0x03c03c });
//生成网格元素并加入场景
const mesh = new three.Mesh(geometry, material);
scene.add(mesh);
}
标签：ThreeJs,场景,概要,render,渲染,three,new,材质,入门 From： https://www.cnblogs.com/wangxydela/p/17075128.html