一般使用THREE.ImageUtils.loadTexture(img_path)
将图像加载为纹理,然后将纹理赋给材质的map属性,
其中我们可以选择纹理放大和缩小使用的插值算法。
THREE.NearestFilter
、THREE.LinearFilter
、THREE.NearestMipMapNearestFilter
、THREE.NearestMipMapLinearFilter
、THREE.LinearMipMapNearestFilter
和THREE.LinearMipMapLinearFilter
详细说明自行百度。
使用凹凸贴图创建一种新的纹理,将其赋给材质的bumpMap属性,并调整bumpScale即可获得凹凸的效果
function createMesh(geom, imageFile, bump) {
var texture = THREE.ImageUtils.loadTexture("../assets/textures/general/" + imageFile);
geom.computeVertexNormals();
var mat = new THREE.MeshPhongMaterial();
mat.map = texture;
if (bump) {
var bump = THREE.ImageUtils.loadTexture("../assets/textures/general/" + bump);
mat.bumpMap = bump;
mat.bumpScale = 0.2;
console.log('d');
}
// create a multimaterial
var mesh = new THREE.Mesh(geom, mat);
return mesh;
}
凹凸贴图只有高度信息而没有斜角的信息,使用法向贴图,当光照从侧面照过来,可以看到阴影效果
和上面类似,将法向贴图纹理赋给材质的normalMap属性即可
function createMesh(geom, imageFile, normal) {
var t = THREE.ImageUtils.loadTexture("../assets/textures/general/" + imageFile);
var m = THREE.ImageUtils.loadTexture("../assets/textures/general/" + normal);
var mat2 = new THREE.MeshPhongMaterial();
mat2.map = t;
mat2.normalMap = m;
var mesh = new THREE.Mesh(geom, mat2);
return mesh;
}
简单地说就是当没有光线照射的情况下,当物体放置在该网格上时,会产生阴影效果
只需要设置材质的lightMap属性即可
var groundMaterial = new THREE.MeshBasicMaterial(
{
color: 0x777777,
lightMap: lm,
map: wood
});
//这个要设置好,暂不知道有什么用
groundGeom.faceVertexUvs[1] = groundGeom.faceVertexUvs[0];
使用高光贴图增强某部分的高光效果,只需要将纹理赋给材质的specularMap属性并设置specular高光部分的颜色和shininess设置高光的强度即可
function createMesh(geom) {
var planetTexture = THREE.ImageUtils.loadTexture("../assets/textures/planets/Earth.png");
var specularTexture = THREE.ImageUtils.loadTexture("../assets/textures/planets/EarthSpec.png");
var normalTexture = THREE.ImageUtils.loadTexture("../assets/textures/planets/EarthNormal.png");
var planetMaterial = new THREE.MeshPhongMaterial();
planetMaterial.specularMap = specularTexture;
planetMaterial.specular = new THREE.Color(0xff0000);
planetMaterial.shininess = 2;
planetMaterial.normalMap = normalTexture;
// planetMaterial.map = planetTexture;
// planetMaterial.shininess = 150;
// create a multimaterial
var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [planetMaterial]);
return mesh;
}
通过设置geometry.material.map.wrapS和geometry.material.map.wrapT来改变x,y轴方向的重复状态,可以选择两种属性:
THREE.RepeatWrapping
:允许纹理重复
THREE.ClampToEdgeWrapping
:不允许纹理重复,使用纹理的边缘填充剩余部分
可以通过geometry.material.map.repeat.set(repeatX,repeatY)来设置在x,y轴的重复频率
var canvas = document.createElement("canvas");//创建画布
document.getElementById('canvas-output').appendChild(canvas);//添加到html中
$('#canvas-output').literallycanvas({imageURLPrefix: '../libs/literally/img'});//创建一个可以画画的画布
function createMesh(geom) {
//将画布直接传入材质的构造函数即可
var canvasMap = new THREE.Texture(canvas);
var mat = new THREE.MeshPhongMaterial();
mat.map = canvasMap;
var mesh = new THREE.Mesh(geom, mat);
return mesh;
}
和画布同理
//创建视频纹理并进行一些初始化
var video = document.getElementById('video');
texture = new THREE.Texture(video);
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;
texture.format = THREE.RGBFormat;
texture.generateMipmaps = false;
//要对纹理进行更新
function render() {
stats.update();
if (video.readyState === video.HAVE_ENOUGH_DATA) {
if (texture) texture.needsUpdate = true;
}
if (controls.rotate) {
cube.rotation.x += -0.01;
cube.rotation.y += -0.01;
cube.rotation.z += -0.01;
}
// render using requestAnimationFrame
requestAnimationFrame(render);
webGLRenderer.render(scene, camera);
}