web3d-three.js场景设计器-mesh网格添加多模型-模型描述随动

给场景中的模型加上广告牌描述，可以在模型的MESH里添加Sprite，配上相应的文字，

描述Sprite的位置则是在mesh中的相对位置，比如模型高10，那么我们可以给一个y等于10 来进行适配，这样在移动模型mesh网格时可以整体移动。

function createBox(data) {

  const geometry = new THREE.BoxGeometry(data.width, data.height, data.length)

  var material

  var materials = []

  if (data.groundTexture && data.groundTexture != '') {

    const textures = data.groundTextures ? data.groundTextures : []

    if (textures.length > 1) {

      textures.forEach(element => {

        if(element==''){

          const tmpMaterial =  new THREE.MeshStandardMaterial({

            color: data.color,

            opacity: data.opacity,

            transparent: data.opacity < 1,

            roughness: 1.0,

            metalness: 0.0

          })

          materials.push(tmpMaterial)

        }else{

        var map = new THREE.TextureLoader().load(element)

        map.wrapS = data.wrapType

        map.wrapT = data.wrapType

        map.repeat.set(data.repeatX, data.repeatY)

        const tmpMaterial = new THREE.MeshStandardMaterial({

          map: map

        })

        materials.push(tmpMaterial)

      }

      })

    } else {

      var map = new THREE.TextureLoader().load(data.groundTexture)

      map.wrapS = data.wrapType

      map.wrapT = data.wrapType

      map.repeat.set(data.repeatX, data.repeatY)

      material = new THREE.MeshStandardMaterial({

        map: map

      })

    }

  } else {

    material = new THREE.MeshStandardMaterial({

      color: data.color,

      opacity: data.opacity,

      transparent: data.opacity < 1,

      roughness: 1.0,

      metalness: 0.0

    })

  }

  const box = new THREE.Mesh(geometry, materials.length > 0 ? materials : material)

  // 创建立方体描述

  if(data.text&&data.text!='')

  createSprite({text:data.text, fontSize:100,  textColor: '#ffffff', color: '#1781b5', imageUrl:''

,position:{x:0, y:0, z:0},rotate:{x:0, y:0, z:0},scale:{x:1, y:1, z:1}}).then(sprite=>{

    sprite.position.y=data.height;

    sprite.visible=true;

    sprite.userData.text=data.text;

    box.add(sprite)

  })

  box.name = data.name

  box.castShadow = true

  box.userData.height = data.height

  return box

}文章来源地址https://www.toymoban.com/news/detail-832259.html

到了这里，关于web3d-three.js场景设计器-mesh网格添加多模型-模型描述随动的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！