Three.js 自定义创建点,线,面,Geometry,法线,UV坐标,顶点颜色

概述

此章将介绍如何自定义创建点,线,面,Geometry,法线,UV坐标,顶点颜色。
任何一个模型都是由一个一个顶点来组成的,然后由顶点来组成线和面来生成的,在Three.js中,我们使用new THREE.Vector3()来创建一个顶点。

顶点

现在我们来创建4个顶点,顶点坐标分别为(0, 0, 0),(10, 0, 0), (0, 0, 10), (10, 0, 10)
顶点坐标

    let p1 = new THREE.Vector3(0, 0, 0);
    let p2 = new THREE.Vector3(10, 0, 0);
    let p3 = new THREE.Vector3(0, 0, 10);
    let p4 = new THREE.Vector3(10, 0, 10);

创建Geometry, 并将顶点添加到Geometry的顶点数组vertices中

	let geometry = new THREE.Geometry();
	// 顶点添加到Geometry的顶点数组vertices中
	geometry.vertices.push(p1, p2, p3, p4);

创建点模型对象

	// 必须使用对应点的材质,size为点的大小
	let  material = new THREE.PointsMaterial( {color: 'red', size:2} );
	
    let  mesh = new THREE.Points( geometry, material );
    scene.add( mesh );

在这里插入图片描述
geometry中打印结果为,可以在此处看见添加的几个顶点数据
在这里插入图片描述

使用顶点来创建面

在webgl中,面都是由3个顶点来创建的每一个三角形,上面我们创建了4个顶点,这里我们将这4个顶点来创建一个两个面,并对每个面使用不同的材质

在这里插入图片描述
new THREE.Face3(0, 2, 1, new THREE.Vector3(), new THREE.Color(), 0)中的0, 2, 1三个值分别对应顶点数组中的索引,对应的分别是P1, P3, P2三个点,此处创建顶点的时候需要使用逆时针的顺序,不然是看不见当前面的,具资料解释说是创建的面顺序会决定法线的方向,使用一下右手法则我们可以知道此处法线的方向是向上的,如果法线向下,那么我们的相机就需要在负Y轴才可以看到我们创建的face1, new THREE.Vector3()对应的是法线, new THREE.Color()对应的是面的颜色,0对应的是使用材质数组中的索引

	let face1 = new THREE.Face3(0, 2, 1, new THREE.Vector3(), new THREE.Color(), 0);
    let face2 = new THREE.Face3(1, 2, 3, new THREE.Vector3(), new THREE.Color(), 1);
    // 将面添加到geometry的facess数组中
    geometry.faces.push(face1, face2);
	// 创建两个材质
	let material1 = new THREE.MeshBasicMaterial( {color: 'green'} );
    let material2 = new THREE.MeshBasicMaterial( {color: 'red'} );
	// face1使用第一个材质,face2使用第二个材质
    let mesh = new THREE.Mesh( geometry, [material1, material2] );

在这里插入图片描述
最终效果:
在这里插入图片描述
打印结果为:
在这里插入图片描述

面使用顶点颜色渲染

此处我们将创建4中顶点颜色并在面的顶点颜色数组中添加对应的颜色

	let color1 = new THREE.Color(0xFF0000);
    let color2 = new THREE.Color(0x00ff00);
    let color3 = new THREE.Color(0x0000ff);
    let color4 = new THREE.Color(0x00ffff);
    // 面添加顶点颜色,此面的材质颜色使用顶点渲染
    face1.vertexColors.push(color1, color2, color4);

修改材质1来使用顶点着色,只有选择使用顶点着色后vertexColors数组才会起作用

	// vertexColors: THREE.VertexColors 使用顶点颜色进行插值渲染
    let material1 = new THREE.MeshBasicMaterial( {vertexColors: THREE.VertexColors} );

最终效果,可以看到face1为三个顶点的颜色插值来渲染的,face2保持原来的不变
在这里插入图片描述
打印结果为
在这里插入图片描述

面使用面颜色渲染

在这之前,我们分别使用了材质的颜色来渲染面,顶点颜色来渲染面,此处还有一种,就是使用在定义面的时候new THREE.Color()来渲染

    // new THREE.Color(0x00ff00) 将当前面的颜色给定义为红色
	let face1 = new THREE.Face3(0, 2, 1, new THREE.Vector3(), new THREE.Color(0x00ff00), 0);
	// 顶点颜色数组需要删除掉,不然还是会使用顶点颜色数组
	// face1.vertexColors.push(color1, color2, color4);
	// 将材质1的来使用面着色
	let material1 = new THREE.MeshBasicMaterial( {vertexColors: THREE.FaceColors} );

最终效果:
在这里插入图片描述

面添加法线

在创建的face3面中添加法线,没有法线的面是无法接收到光照的
创建唯一的光源

	const directionalLight = new THREE.DirectionalLight( '#fff' )
    directionalLight.position.set( 30, 30, 30 ).normalize()
    scene.add( directionalLight )

将face1添加new THREE.Vector3(0, 1, 0)方向的法线,face2添加new THREE.Vector3(0, -1, 0)方向的法线

	// 点的顺序决定法线的方向
    let face1 = new THREE.Face3(0, 2, 1, new THREE.Vector3(0, 1, 0), new THREE.Color(), 0);
    let face2 = new THREE.Face3(1, 2, 3, new THREE.Vector3(0, -1, 0), new THREE.Color(), 1);

定义两个材质,MeshLambertMaterial材质可以接受光照

	let material1 = new THREE.MeshLambertMaterial( {color: 'yellow'} );
    let material2 = new THREE.MeshLambertMaterial( {color: 'red'} );

最终效果:
在这里插入图片描述
可以看到最后法线向上的显示了出颜色,法线向下的是黑色,不是显示红色

自定义UV贴图

先定义四个UV坐标,xy分别为0~1, 分别为p1和p4的4个顶点的坐标
在这里插入图片描述

	let uv1 = new THREE.Vector2(0, 1);
    let uv2 = new THREE.Vector2(1, 1);
    let uv3 = new THREE.Vector2(0, 0);
    let uv4 = new THREE.Vector2(1, 0);

在geometry的faceVertexUvs数组中添加UV坐标

	geometry.faceVertexUvs[0].push([uv1, uv3, uv2])
    geometry.faceVertexUvs[0].push([uv2, uv3, uv4])

定义贴图和材质

	let loader = new THREE.TextureLoader();
    let texture = loader.load('ground.jpg');
    texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
	let material1 = new THREE.MeshBasicMaterial( {map: texture} );
    let material2 = new THREE.MeshBasicMaterial( {map: texture} );

最终效果:
在这里插入图片描述
打印结果为
在这里插入图片描述

  • 2
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱吃土豆丝嗯z

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值