linux运行threejs,threejs一些基础

导入js包

场景对象-scene

几何对象-Geometry

材质-material

网格对象-mesh(对象，材质)

光源-Light

摄像机-camera

camera.lookAt相机看的方向

渲染器-renderer

document.body.appendChild(renderer.domElement); //body元素中插入canvas对象

//执行渲染操作 指定场景、相机作为参数

renderer.render(scene, camera);

requestAnimationFrame()渲染函数

requestAnimationFrame(render);//请求再次执行渲染函数render

鼠标的控制

导入的包three.js-masterexamplesjscontrolsOrbitControls.js

var controls = new THREE.OrbitControls(camera,renderer.domElement);//创建控件对象

controls.addEventListener(‘change’, render);//监听鼠标、键盘事件

和requestAnimationFrame()不能同时使用

辅助三维坐标系AxisHelper

为了方便调试预览threejs提供了一个辅助三维坐标系AxisHelper，可以直接调用THREE.AxisHelper创建一个三维坐标系，然后通过.add()方法插入到场景中即可。

threejs三维坐标系老版本名称是AxisHelper，新版本名称AxesHelper。

材质效果

半透明效果

更改场景中的球体材质对象构造函数THREE.MeshLambertMaterial()的参数，添加opacity和transparent属性，opacity的值是0~1之间，transparent表示是否开启透明度效果， 默认是false表示透明度设置不起作用，值设置为true，网格模型就会呈现透明的效果，使用下面的代码替换原来的球体网格模型的材质， 刷新浏览器,通过鼠标旋转操作场景,可以看到半透明的球体和立方体颜色叠加融合的效果。

材质常见属性

wireframe-线框

opacity-透明度

transparent-是否开启透明

添加高光效果

漫反射-MeshLambertMaterial()

镜面反射-

MeshPhongMaterial()

高光效果-属性

属性specular表示球体网格模型的高光颜色改颜色的RGB值会与光照颜色的RGB分量相乘

shininess属性可以理解为光照强度的系数

光源的类型

AmbientLight-环境光

PointLight-点光源

DirectionalLight-平行光，比如太阳光

SpotLight-聚光源

光源创建-scene.add()

立体的效果

仅仅使用环境光的情况下，你会发现整个立方体没有任何棱角感，这是因为环境光知识设置整个空间的明暗效果。如果需要立方体渲染要想有立体效果，需要使用具有方向性的点光源、平行光源等。

通过光源构造函数的参数可以设置光源的颜色，一般设置明暗程度不同的白光RGB三个分量值是一样的。如果把THREE.AmbientLight(0x444444);的光照参数0x444444改为0xffffff,你会发现场景中的立方体渲染效果更明亮。-环境光的强度

光源位置

point.position.set(0, 0, 0);

点模型Points

// 点渲染模式

var material = new THREE.PointsMaterial({

color: 0xff0000,

size: 10.0 //点对象像素尺寸

}); //材质对象

var points = new THREE.Points(geometry, material); //点模型对象

scene.add(points); //点对象添加到场景中

线模型Line

// 线条渲染模式

var material=new THREE.LineBasicMaterial({

color:0xff0000 //线条颜色

});//材质对象

var line=new THREE.Line(geometry,material);//线条模型对象

scene.add(line);//线条对象添加到场景中

材质属性.vertexColors

vertexColors: THREE.VertexColors, //以顶点颜色为准

关于材质的属性.vertexColors可以查看Material文档介绍，属性.vertexColors的默认值是THREE.NoColors，这也就是说模型的颜色渲染效果取决于材质属性.color，如果把材质属性.vertexColors的值设置为THREE.VertexColors,threejs渲染模型的时候就会使用几何体的顶点颜色数据geometry.attributes.color。

属性缓冲区对象BufferAttribute

Threejs提供的接口BufferAttribute目的是为了创建各种各样顶点数据，比如顶点颜色数据，顶点位置数据，然后作为几何体BufferGeometry的顶点位置坐标属性BufferGeometry.attributes.position、顶点颜色属性BufferGeometry.attributes.color的值。

缓冲类型几何体BufferGeometry除了顶点位置、顶点颜色属性之外还有其他顶点属性，后面课程都会讲解到。关于BufferGeometry更多属性和方法可以查看文档BufferGeometry。

颜色插值

如果你把几何体作为网格模型Mesh或者线模型Line构造函数的参数，你会发现渲染出渐变的彩色效果。

顶点法向量

在上面顶点位置数据基础上定义顶点法向量数据，这时候除了环境光以外，点光源也会参与光照计算，三角形整个表面比较明亮，同时两个三角形表面法线不同，即使光线方向相同，明暗自然不同，在分界位置有棱角感。

// 设置几何体attributes属性的位置normal属性

geometry.attributes.normal = new THREE.BufferAttribute(normals, 3); //3个为一组,表示一个顶点的法向量数据

API使用总结

// 访问几何体顶点位置数据

BufferGeometry.attributes.position

// 访问几何体顶点颜色数据

BufferGeometry.attributes.color

// 访问几何体顶点法向量数据

BufferGeometry.attributes.normal

顶点索引.index

BufferGeometry.index定义了一个矩形。通过顶点索引组织网格模型三角形的绘制，因为矩形的两个三角形有两个顶点位置重复，所以顶点位置数据、顶点法向量数据都只需要定义4个就可以。

通过顶点索引组织顶点数据，顶点索引数组indexes通过索引值指向顶点位置geometry.attributes.position、顶点法向量geometry.attributes.normal中顶面数组。

Vector3定义顶点位置坐标数据

Vector3是threejs的三维向量对象,可以通过Vector3对象表示一个顶点的xyz坐标，顶点的法线向量。

几何体Geometry和缓冲类型几何体BufferGeometry表达的含义相同，只是对象的结构不同，Threejs渲染的时候会先把Geometry转化为BufferGeometry再解析几何体顶点数据进行渲染。

几何体Geometry的顶点位置属性geometry.vertices和缓冲类型几何体BufferGeometry顶点位置属性BufferGeometry.attributes.position是对应的。

Color定义顶点颜色数据

通过threejs顶点颜色对象Color可以定义几何体顶点颜色数据，然后顶点颜色数据构成的数组作为几何体Geometry顶点颜色属性geometry.colors的值。

几何体Geometry的顶点颜色属性geometry.colors和缓冲类型几何体BufferGeometry顶点颜色属性BufferGeometry.attributes.color是对应的。

注意设置几何体Geometry顶点颜色属性geometry.colors，对网格模型Mesh是无效的，对于点模型Points、线模型Line是有效果。

注意使用顶点颜色数据定义模型颜色的时候，要把材质的属性vertexColors设置为THREE.VertexColors,这样顶点的颜色数据才能取代材质颜色属性.color起作用。

//材质对象

var material = new THREE.MeshLambertMaterial({

// color: 0xffff00,

vertexColors: THREE.VertexColors, //以顶点颜色为准

side: THREE.DoubleSide, //两面可见

});

程序员灯塔

转载请注明原文链接：threejs一些基础