一、对比图:
二、实现过程
加载贴图:
// TextureLoader创建一个纹理加载器对象,可以加载图片作为几何体纹理
var textureLoader = new THREE.TextureLoader();
// 加载纹理贴图
var texture = textureLoader.load('./Earth.png');
// 加载法线/凹凸贴图
var textureNB = textureLoader.load('./EarthNormal.png');
1、给球体添加法线贴图
var geometry = new THREE.SphereGeometry(100, 25, 25); //加载球体
// 加载法线/凹凸贴图
var textureNB = textureLoader.load('./EarthNormal.png');
//法线贴图
var material = new THREE.MeshPhongMaterial({
map: texture, // 普通颜色纹理贴图
normalMap: textureNB, //法线贴图
//设置深浅程度,默认值(1,1)。
normalScale: new THREE.Vector2(1.2, 1.2),
}); //材质对象Material
var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
mesh.position.set(150,0,0);
scene.add(mesh);
2、给球体添加凹凸贴图
var geometry = new THREE.SphereGeometry(100, 25, 25); //加载球体
// 凹凸贴图
var materialBump = new THREE.MeshPhongMaterial({
map:texture, //普通颜色纹理图片
bumpMap:textureNB, // 凹凸贴图
bumpScale:3 //设置凹凸高度,默认值1
});
var mesh1 = new THREE.Mesh(geometry,materialBump);
mesh1.position.set(-150,0,0);
scene.add(mesh1);
3、初始化场景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title