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

}

11eleven
关注 关注
  • 15
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
scene-editor:Three.js编辑
05-17
场景编辑 Three.js编辑
ThreeStudio:基于Three.js和Electron的3D游戏编辑
01-28
ThreeStudio 基于Three.js和Electron的3D游戏编辑。 该项目的目的是使用现有的基于Web的开源框架和库来创建功能性3D编辑。 应用程序:Node.js + Electron 核心:HTML + CSS + JavaScript + jQuery 界面:jQuery UI + jsTree + GoldenLayout + CodeMirror + jscolor + Bootstrap + FontAwesome 渲染和物理:Three.js + ammo.js + csg.js 脚本:Esprima + CoffeeScript + RapydScript 用法: npm install npm start 按F9或Ctrl+P进入/退出游戏模式。 要以独立模式运行游戏: npm start player
web3d-three.js场景设计-模型平滑移动-TWEEN.js
acheng
01-19 750
THREE.js中通过直接改模型的位置或者角度可以实现变现的效果,但是如果幅度过大有瞬移的感觉,不是那么自然。 Tween动画是一种非线性的时间序列插值技术,它被广泛应用于平滑地改变3D对象的各种属性,例如位置、旋转、缩放等。TWEEN库并不是three.js核心库的一部分,但通常与three.js配合使用来实现复杂的动画效果。 1.three @tweenjs/tween.js 安装依赖 2.引入 import TWEEN from "@tweenjs/tween.js";
基于threejs的在线3D场景编辑使用mongodb保存3D模型场景数据
08-10
基于three.js的在线3D场景编辑,使用mongodb保存3D模型场景数据
three.js模型添加动态的文字精灵(vue)
soclear_的博客
03-23 1747
1.创建2D文字canvas makeLabelCanvas(baseWidth, size, name) { const borderSize = 2; const ctx = document.createElement('canvas').getContext('2d'); const font = `${size}px bold sans-serif`; ctx.font = font; // console.log("ctx",ct
h5:three.js+photo-sphere-viewer.js 全景场景切换,全景家居
12-19
`photo-sphere-viewer.js`是专为全景图像设计的轻量级JavaScript库,它基于three.js。此库简化了全景图像的加载和展示,提供了一套完整的API来控制视角、添加交互和特效。在全景家居应用中,它能帮助我们轻松地展示...
三维模型-three.js-PCD模型文件,用于three.js显示pcd文件
07-25
在三维可视化领域,Three.js是一个非常流行的JavaScript库,它允许开发者在Web浏览中创建和展示复杂的3D模型。本资源是关于使用Three.js处理PCD(Point Cloud Data)模型文件的,这是一种常见的3D点云数据格式。在...
three.js+photo-sphere-viewer.js 全景图场景切换
02-07
在本项目中,我们主要探讨的是如何利用three.js和photo-sphere-viewer.js库来创建一个全景图场景切换的应用。这个应用旨在提供一种沉浸式的360度视角体验,让用户能够在不同的全景图之间自由切换,同时具备前进和...
mixamo-three.js:使用Mixamo模型和动画进行Three.js测试
04-06
在本文中,我们将深入探讨如何使用Mixamo模型和动画与Three.js进行集成,这是一个非常流行的JavaScript库,用于在Web浏览中创建3D图形。Mixamo是Adobe提供的一个在线服务,它提供了大量的预设3D人物模型和动画,...
three.js-r133.zip
06-16
1. **基本场景创建**:创建场景、相机、网格,并将它们添加场景中,然后设置渲染循环,让3D模型动起来。 2. **动画和交互**:利用`THREE.Animation`和`THREE.Tween.js`进行动画控制,通过监听鼠标和触摸事件实现...
基于Three.js的一款运行于浏览三维图编辑
12-22
基于Three.js的一款运行于浏览(chrome、Firefox、360)三维图编辑。本人呕心开发,具备如下功能,且功能仍在进一步完善中。 1、添加立方体、园柱体、球体、半球体、圆锥体等。 2、实现几何体边框的虚实线。 3、鼠标点击选中几何体,用鼠标和键盘在场景中拖拽平移。 4、正视、俯视、侧视整个场景。 5、鼠标旋转场景,各个角度查看。 6、修改几何体材质,包括颜色、透明度等。 7、实现环境光源、点光源的光照效果,可修改点光源强度、角度等。 8、几何体的缩放,包括整体缩放、X、Y、Z各方向的缩放。 9、部件合并功能,可以把几个几何体合并在一起,整体移动、缩放等。
three.js 制作简单行星运转动画
02-06
three.js制作简单动画,模拟月球绕地球公转。渲染为CanvasRenderer
THREE.js(三):跟随3D的文字UI元素
ACG_Angel
02-17 1289
绘制文字
ThreeJS 模型中内嵌文字
jinse29的博客
08-29 809
之前有过模型中内嵌html网页,地址☞这次是纯粹的在模型中嵌入文本信息,进行简单的文字展示展示效果图。
three.js 几何体-组合网格_ThreeJs初体验2
weixin_39574869的博客
11-25 308
前期准备工作引入three文件1.Github下载代码,引入文件下载地址https://github.com/mrdoob/three.jsThreeJs下载2.CDN引入文件(推荐使用)CDN地址https://www.bootcdn.cn/three.js/方块旋转方块选择3D样式代码二十行左右的代码就实现一个简单的3D动画。渲染步骤解析创建场景var scene = new THREE.Sc...
Three.js中使用CSS3DRenderer和CSS3DSprite实现模型标签文字+指示线
最新发布
前端开发工程师
05-20 1643
在`Three.js`中,使用`CSS3DRenderer`和`CSS3DSprite`可以轻松地实现模型标签文字的效果,为场景中的模型提供更直观的信息展示。本文将介绍如何使用这两个工具来实现模型标签文字,并提供相应的代码示例。
threejs模型旁边添加 文字注释,解释模型 3D效果
热门推荐
WWW_share8的博客
10-30 1万+
先给大家看一下 效果吧 如上面所示,这是一个 简单的dome,就是在一个立方体旁边叠加一个显示文字的 模块。 threejs制作简单的立方体这个没有什么说,基本就是 let geometry = new THREE.BoxGeometry(50, 50, 50)//构建一个正方体 let material = new THREE.MeshLambertMaterial({ col...
Three.js中的3D文字效果
02-12 2786
对于一些设计网页中经常会出现一些3D的文字效果,本文将利用Three.js实现各种动画WebGL文本输入效果。
ThreeJs案例四 场景添加多个立方体(网格模型
LAZYPET BLOG
06-25 3741
1、实现步骤 1、找到threejs下的doc文件下的index.html 2、右击index.html open with live serve 3、搜索geometry 找到你想要添加的几何体的api添加即可 4、设置位置 1、通过mesh2.translateY(120); 2、通过mesh3.position.set(120,0,0); 5、常用的几何体 //长方体 参数:长,宽,高 var geometry = new THREE.BoxGeometry(100, 100, 100); /
Three.js实现室内场景模型的第三人称行走
资源摘要信息:"three.js室内场景+模型第三人称行走demo" 知识点一:three.js基础介绍 three.js是一个基于WebGL的JavaScript 3D库,它简化了使用WebGL进行3D图形编程的复杂性,使得开发者可以不需要深入了解底层图形...
写文章

热门文章

  • C#调用bartender进行动态打印以及批量打印的完整教程 22111
  • .net core 使用MQTTNET搭建MQTT 服务以及客户端例子 11926
  • ChatGpt-2 对话单页功能实现vue3+elementplus 7786
  • 基于winform的打印标签模板设计器以及打印辅助类 6989
  • Winform布局与控件自适应分辨率以及防止错位 6018

分类专栏

  • 基于web实现打印设计自定义,打印接口化 付费
  • winform 6篇
  • 工具 14篇
  • THREE.JS 4篇
  • web3d 2篇
  • C#+VUE构建流程审批服务 1篇
  • 视觉 15篇
  • vue.js 3篇
  • javascript 1篇
  • 表单审批 2篇
  • 3D 3篇
  • TCP通讯 3篇
  • 审批流 3篇
  • 打印 2篇
  • halcon 12篇
  • 拧紧枪 1篇
  • 海康相机 1篇
  • 内网续传 1篇
  • websocket 1篇
  • windows service 1篇
  • JEKINS 1篇
  • 心得

最新评论

  • C#调用bartender进行动态打印以及批量打印的完整教程

    11eleven: 这个类是自己封装定义的 不是DLL自带的

  • C#调用bartender进行动态打印以及批量打印的完整教程

    yvhkfnfhvk: 请问,为啥我这提示错误:未定义类型“bartenderHelper”,那两个引用我加上了,程序:BarTender Designer 2019 R4 许可证:Enterprise 版

  • C# Winform+Halcon结合标准视觉工具

    Teddy_brother: 这个程序能分享吗

  • QuestDb 基础使用

    xiguanjiuhao512: 兄弟,这个数据不支持行级别的删除的

  • C#调用bartender进行动态打印以及批量打印的完整教程

    xjt927: 博主,下载下来了示例,并且添加了dll,调用btFormat.PrintOut(true, false);方法后没有打印出来东西,调用该方法后返回值是1,没有打印是什么原因呢? 使用原生TSCLIB.dll类库可以打印出来

最新文章

  • C#收集海康系读码器内容并硬触发IO报警
  • c#对PDF进行电子签章小工具
  • Vue3监控div的宽高变化事件canvas自适应
2024年14篇
2023年39篇
2022年29篇
2021年4篇
2020年2篇
2019年2篇

目录

目录

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

11eleven

你的鼓励是我创作的动力 !

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或 充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值

深圳坪山网站建设公司光山网站关键词优化工具益阳网站优化推荐彭州网站优化公司网站链接怎样优化天津门户网站开发新站快速优化上海网站优化seo京东网站优化郑州瓷砖行业网站优化推广技巧无锡标准网站优化联系人广州网站优化简历南阳平台seo网站优化广告网站优化最好的方法建安区网站优化公司丰城百度网站优化聊城网站优化有哪些衢州seo网站优化英山网站优化网站tdk的优化郑州网站seo优化推广网站优化关键词价格是多少钱抚州网站优化香港优化网站排名邯郸家具行业网站优化推广技巧平顶山网站seo优化哪家正规网站在线速度优化测试深圳网站优化推温江区定制版网站优化西宁软件优化网站郑州官网网站优化系统网站优化百度香港通过《维护国家安全条例》两大学生合买彩票中奖一人不认账让美丽中国“从细节出发”19岁小伙救下5人后溺亡 多方发声卫健委通报少年有偿捐血浆16次猝死汪小菲曝离婚始末何赛飞追着代拍打雅江山火三名扑火人员牺牲系谣言男子被猫抓伤后确诊“猫抓病”周杰伦一审败诉网易中国拥有亿元资产的家庭达13.3万户315晚会后胖东来又人满为患了高校汽车撞人致3死16伤 司机系学生张家界的山上“长”满了韩国人?张立群任西安交通大学校长手机成瘾是影响睡眠质量重要因素网友洛杉矶偶遇贾玲“重生之我在北大当嫡校长”单亲妈妈陷入热恋 14岁儿子报警倪萍分享减重40斤方法杨倩无缘巴黎奥运考生莫言也上北大硕士复试名单了许家印被限制高消费奥巴马现身唐宁街 黑色着装引猜测专访95后高颜值猪保姆男孩8年未见母亲被告知被遗忘七年后宇文玥被薅头发捞上岸郑州一火锅店爆改成麻辣烫店西双版纳热带植物园回应蜉蝣大爆发沉迷短剧的人就像掉进了杀猪盘当地回应沈阳致3死车祸车主疑毒驾开除党籍5年后 原水城县长再被查凯特王妃现身!外出购物视频曝光初中生遭15人围殴自卫刺伤3人判无罪事业单位女子向同事水杯投不明物质男子被流浪猫绊倒 投喂者赔24万外国人感慨凌晨的中国很安全路边卖淀粉肠阿姨主动出示声明书胖东来员工每周单休无小长假王树国卸任西安交大校长 师生送别小米汽车超级工厂正式揭幕黑马情侣提车了妈妈回应孩子在校撞护栏坠楼校方回应护栏损坏小学生课间坠楼房客欠租失踪 房东直发愁专家建议不必谈骨泥色变老人退休金被冒领16年 金额超20万西藏招商引资投资者子女可当地高考特朗普无法缴纳4.54亿美元罚金浙江一高校内汽车冲撞行人 多人受伤

深圳坪山网站建设公司 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化