給場景中的模型加上廣告牌描述，可以在模型的MESH里添加Sprite，配上相應(yīng)的文字，
描述Sprite的位置則是在mesh中的相對位置，比如模型高10，那么我們可以給一個y等于10 來進行適配，這樣在移動模型mesh網(wǎng)格時可以整體移動。
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)
? // 創(chuàng)建立方體描述
? 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文章來源：http://www.zghlxwxcb.cn/news/detail-832259.html
}文章來源地址http://www.zghlxwxcb.cn/news/detail-832259.html
到了這里，關(guān)于web3d-three.js場景設(shè)計器-mesh網(wǎng)格添加多模型-模型描述隨動的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
