披上华服

1. 材质

这些都是 Three.js 官方例子中的材质展示图, Material 作为第2个参数传入到 Mesh 中. var material = new THREE.??Material({ }); var mesh = new THREE.Mesh( geometry, material );

2. 纹理

Material里有很多属性, 如果只用 color 就显得太单调了, 为何不披上一件漂亮的衣服呢? Material里还有一个 map 属性, 用上它就可以把 图案渲染出来. 但在之前必须先把图片加载好, 有两种方法:

(1). 用 Html 中的 img 便签来下载图片和使用 Texture var image = createImg(); var imgTexture = new THREE.Texture( image ); function createImg(){ var image = document.createElement('img'); image.src = '---.jpg'; image.onload = function(){ imgTexture.needsUpdate = true; }; return image; } var material = new THREE.MeshPhongMaterial({ map: imgTexture }); (2). 直接用 TextureLoader 来加载 var earth = new THREE.Mesh(); var loader = new THREE.TextureLoader(); loader.load('---.jpg', function( texture ){ var geometry = new THREE.SphereGeometry(4, 64, 64), material = new THREE.MeshBasicMaterial({ map: texture }); earth.geometry = geometry; earth.material = material; scene.add(earth); });