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

}

相关推荐
无限的鲜花7 小时前
反射(原创推荐)
java·开发语言
yongche_shi7 小时前
ragas官方文档中文版(五十)
开发语言·python·ai·ragas·如何评估和改进 rag 应用
前端之虎陈随易7 小时前
编程语言级别的Skill市场,AI Agent 的未来形态
前端·vue.js·人工智能·typescript·node.js
一路向北he7 小时前
字节钢铁军团--“提供情境,而非控制”
java·开发语言·前端
kyriewen8 小时前
豆包和千问同时关了智能体,我用它们搭的 3 个自动化全废了——迁移方案整理
前端·javascript·ai编程
前端一小卒8 小时前
我用 TypeScript 从零手写了一个 Claude Code,然后发现它的核心只有 30 行
前端·agent
铁皮饭盒8 小时前
用 Bun.cron 定时 7 月 7 日,为啥? 看图1
javascript
AI行业学习9 小时前
Notepad++ 官方下载 + 完整安装 + 全套优化配置(2026最新)
开发语言·人工智能·python·前端框架·html·notepad++
大圣编程9 小时前
Python中continue语句的用法是什么?
开发语言·前端·python
yuhaiqiang9 小时前
随手 vibecoding 的浏览器插件已经 6000 多次下载,聊聊他的产品设计
前端·后端·面试