js 自带的 map() 方法

  1. 方法概述

    map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。

  2. 例子

    2.1 在字符串中使用map

    在一个 String 上使用 map 方法获取字符串中每个字符所对应的 ASCII 码组成的数组:

    var map = Array.prototype.map
    var a = map.call("Hello World", function(x) { return x.charCodeAt(0); })
    // a的值为[72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]
    

    2.2 易犯错误

    通常情况下,map 方法中的 callback 函数只需要接受一个参数(很多时候,自定义的函数形参只有一个),就是正在被遍历的数组元素本身。

    但这并不意味着 map 只给 callback 传了一个参数(会传递3个参数)。这个思维惯性可能会让我们犯一个很容易犯的错误。

     // 下面的语句返回什么呢:
     ["1", "2", "3"].map(parseInt);
     // 你可能觉的会是[1, 2, 3]
     // 但实际的结果是 [1, NaN, NaN]
     
     	// 通常使用parseInt时,只需要传递一个参数.但实际上,parseInt可以有两个参数.第二个参数是进制数.可以通过语	句"alert(parseInt.length)===2"来验证.
     // map方法在调用callback函数时,会给它传递三个参数:当前正在遍历的元素, 元素索引, 原数组本身.
     // 第三个参数parseInt会忽视, 但第二个参数不会,也就是说,parseInt把传过来的索引值当成进制数来使用.从而返回了NaN.
     
     	/*
     	//应该使用如下的用户函数returnInt
     
     	function returnInt(element){
     	  return parseInt(element,10);
     	}
     
     	["1", "2", "3"].map(returnInt);
     	// 返回[1,2,3]
     	*/     
    

参考文章:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在使用three.js加载gltf模型时,可能会遇到模型自带的材质加载不出来的问题,这可能是因为模型的材质格式不被three.js所支持。解决这个问题的方法是将模型的材质转化为可以被three.js所识别的材质格式。你可以使用GLTFLoader加载模型后,通过遍历模型的材质数组,将每个材质转化为对应的three.js材质类型,例如THREE.MeshBasicMaterial、THREE.MeshLambertMaterial、THREE.MeshPhongMaterial等。具体的实现可以参考以下代码示例: ```javascript var loader = new THREE.GLTFLoader(); loader.load( 'model.gltf', function ( gltf ) { gltf.scene.traverse( function ( child ) { if ( child.isMesh ) { for ( var i = 0; i < child.material.length; i ++ ) { var material = child.material[ i ]; if ( material.isGLTFSpecularGlossinessMaterial ) { material = THREE.MeshStandardMaterial().copy( material ); } else if ( material.isGLTFMaterial ) { material = THREE.MeshStandardMaterial().copy( material ); material.map = null; material.lightMap = null; material.aoMap = null; material.emissiveMap = null; material.bumpMap = null; material.normalMap = null; material.displacementMap = null; material.roughnessMap = null; material.metalnessMap = null; } material.needsUpdate = true; child.material[ i ] = material; } } } ); scene.add( gltf.scene ); }, undefined, function ( e ) { console.error( e ); } ); ``` 在这个示例中,我们通过遍历模型的材质数组,将每个材质转化为THREE.MeshStandardMaterial类型,这是three.js中支持的一种材质类型。如果你的模型不支持这种材质类型,你可以根据你的模型选择其他的材质类型。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值