threejs笔记3

最新推荐文章于 2024-09-18 23:47:33 发布

spwke_com

最新推荐文章于 2024-09-18 23:47:33 发布

阅读量139

点赞数

分类专栏： threejs 文章标签： javascript html5 webgl

本文链接：https://blog.csdn.net/spwke_com/article/details/107383787

版权

threejs 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

threejs笔记3

 这是第一次学习threejs，记录一些学习笔记，简化知识点, 如果对您也有帮助请搜索头像二维码或者搜索小程序“上品威客”，感谢您的支持

3D组成

计算机中3d世界由点组成 两个点组成直线 三个不在一条直线的点组成三角形 无数三角形组成各种物体，我们通常把这种网格模型叫做Mesh模型，给物体贴上皮肤叫做纹理，无数的物体组成3d世界

定义一个点

THREE.Vector3 = function ( x, y, z ) {
	this.x = x || 0;
	this.y = y || 0;
	this.z = z || 0;
};
var point1 = new THREE.Vecotr3(4,8,9);
point1.set(4,8,9);

画一条线

LineBasicMaterial( parameters )
Color：线条的颜色。
Linewidth：线条的宽度。
Linecap：线条两端的外观
Linejoin：两个线条的连接点处的外观
VertexColors：线条材质是否使用顶点颜色
Fog：定义材质的颜色是否受全局雾效的影响。

代码

  var geometry = new THREE.Geometry();
  var material = new THREE.LineBasicMaterial( { vertexColors: true } );
  var color1 = new THREE.Color( 0x444444 ), color2 = new THREE.Color( 0xFF0000 );

  // 线的材质可以由2点的颜色决定
  var p1 = new THREE.Vector3( -100, 0, 100 );
  var p2 = new THREE.Vector3(  100, 0, -100 );
  geometry.vertices.push(p1);
  geometry.vertices.push(p2);
  geometry.colors.push( color1, color2 );

  var line = new THREE.Line( geometry, material, THREE.LineSegments );
  scene.add(line);

坐标系

threejs使用右手坐标系：x正向向右，y正向向上， z正向从屏幕里面向外

线条深入理解

THREE.Geometry结构中包含一个数组vertices，这个vertices就是存放无数的点（THREE.Vector3）的数组，为了绘制一条直线我们定义两个THREE.Vector3，我们需要给线加一种材质，可以使用专为线准备的材质，THREE.LineBasicMaterial。最后通过THREE.Line绘制了一条线，