threejs纹理的使用

  1.  实现地板的效果,需要导入3张图片,第一种样式,第二种,木板间的间隙,第三种,木板的粗细图片。
    threejs纹理的使用_第1张图片
  2. 先注册一个物体属性,在物体属性上加上图片,注册代码如下图:
    const floorMat = new THREE.MeshStandardMaterial( {
        roughness: 0.8,
        color: 0xffffff,
        metalness: 0.2,
        bumpScale: 0.0005
    });
  3. 样式的图片,图片:
    threejs纹理的使用_第2张图片
    图片导入的代码:
    const textureLoader = new THREE.TextureLoader();
    textureLoader.load( 'textures/hardwood2_diffuse.jpg', function ( map ) {
        map.wrapS = THREE.RepeatWrapping;
        map.wrapT = THREE.RepeatWrapping;
        map.anisotropy = 4;
        map.repeat.set( 10, 24 );
        map.encoding = THREE.sRGBEncoding;
        floorMat.map = map;
        floorMat.needsUpdate = true;
    });
    最重要的是floorMat.map这个代码,下面的效果也主要是这两个参数。
  4. 木板间的间隙的图片:
    threejs纹理的使用_第3张图片
    相关代码:
    textureLoader.load( 'textures/hardwood2_bump.jpg', function ( map ) {
        map.wrapS = THREE.RepeatWrapping;
        map.wrapT = THREE.RepeatWrapping;
        map.anisotropy = 4;
        map.repeat.set( 10, 24 );
        floorMat.bumpMap = map;
        floorMat.needsUpdate = true;
    } );

    关键代码:floorMat.bumpMap

  5. 木板间的粗糙程度的图片:
    threejs纹理的使用_第4张图片
    相关代码:
    textureLoader.load( 'textures/hardwood2_roughness.jpg', function ( map ) {
    	map.wrapS = THREE.RepeatWrapping;
    	map.wrapT = THREE.RepeatWrapping;
    	map.anisotropy = 4;
    	map.repeat.set( 10, 24 );
    	floorMat.roughnessMap = map;
    	floorMat.needsUpdate = true;
    } );

    关键代码:floorMat.roughnessMap

  6. 具体效果可以查看: threejs地板效果

 

 

 

 

你可能感兴趣的:(threejs,threejs)