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

这篇具有很好参考价值的文章主要介绍了web3d-three.js场景设计器-mesh网格添加多模型-模型描述随动。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

web3d-three.js场景设计器-mesh网格添加多模型-模型描述随动,javascript,前端,开发语言,three.js

给场景中的模型加上广告牌描述,可以在模型的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模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Three.js之创建3D场景

    【G】Three.js官方文档:https://threejs.org/docs/ Three.js是一个流行的WebGL库,官方文档提供了详细的API参考和示例,适合学习和参考。 【G】Three.js GitHub链接:https://github.com/mrdoob/three.js 这是一个流行的基于WebGL的3D图形库,提供了丰富的功能和工具,用于创建交互式的3D场景和应用。

    2024年02月14日
    浏览(75)
  • Three.js教程:第一个3D场景

    推荐:将 NSDT场景编辑器加入你3D工具链 其他工具系列: NSDT简石数字孪生 下面的代码完整展示了通过three.js引擎创建的一个三维场景,在场景中绘制并渲染了一个立方体的效果,为了大家更好的宏观了解three.js引擎, 尽量使用了一段短小但完整的代码实现一个实际的三维效果

    2023年04月12日
    浏览(61)
  • 什么是Web3D?Web3D技术发展历程以及Web3D应用场景

    当今的互联网已经迈入了第三代,这被称为Web3.0,而Web3D正是Web3.0的其中一个技术分支。Web3D是指将三维图形技术应用于Web上的技术,它是将3D图形和Web技术结合起来的一个分支,可以使用户在Web上以更真实、更直观的方式浏览和操作虚拟场景。本文将介绍什么是Web3D、Web3D技术

    2024年02月15日
    浏览(45)
  • 和我一起学 Three.js【初级篇】:1. 搭建 3D 场景

    💡 本篇文章共 5572 字,最近更新于 2023 年 04 月 19 日。 本系列第 6,7,8 章节支持在我的个人公众号「前端乱步」内付费观看,将在全平台文章「点赞数」+「评论数」 = 500(第 6 章), 1000(第 7,8 章) 时分别解锁发布。 《和我一起学 Three.js【初级篇】:0. 总论》 📍 您当

    2023年04月10日
    浏览(49)
  • 【Three.js基础入门】:创建你的第一个3D场景

    Three.js是一种强大的JavaScript库,用于在Web浏览器中创建交互式的3D图形和动画。无需熟练的图形编程经验,你也可以通过Three.js轻松地构建令人惊叹的3D场景。 本文将带你逐步学习如何入门Three.js,从创建一个简单的3D场景开始。 我们将介绍如何使用Three.js创建你的第一个3D场景

    2024年02月16日
    浏览(138)
  • Vue中如何进行3D场景展示与交互(如Three.js)

    随着WebGL技术的发展,越来越多的网站开始使用3D场景来展示产品、游戏等内容。在Vue中,我们可以使用第三方库Three.js来实现3D场景的展示与交互。本文将介绍如何在Vue中使用Three.js来创建3D场景,并实现交互功能。 Three.js是一个用于创建3D图形的JavaScript库。它基于WebGL技术,

    2024年02月09日
    浏览(74)
  • WEB 3D技术 three.js 阴影属性

    上文 WEB 3D技术 three.js 光照与阴影 我们说了阴影 那么 我们继续将阴影的属性 目前 我们的代码 目前阴影效果是这样的 我们可以设置它的一个模糊度 我们官网搜索 LightShadow 下面找到 radius 模糊度的一个属性 这里 我们可以 设置 20 的一个模糊度 运行代码 然后看我们的模糊度

    2024年01月22日
    浏览(56)
  • WEB 3D技术 three.js 点光源

    本文的话 我们来设置一下点光源 点光源其实最直观的就是可以做萤火虫 也可以做星光 点点的效果 我们可以直接在官网中搜索 Pointlight 大家可以在官网这里看一下 其实 SpotLight 聚关灯中的属性 Pointlight 点光源也有的 我们先编写代码如下 PointLight 创建一个点光源 这里我们给了

    2024年01月19日
    浏览(56)
  • WEB 3D技术 three.js 聚光灯

    本文 我们来说说 点光源和聚光灯 点光源 就像一个电灯泡一样 想四周发散光 而聚光灯就像手电筒一样 像一个方向射过去 距离越远范围越大 光越弱 我们先来看一个聚光灯的效果 我们可以编写代码如下 SpotLight 聚光灯 然后通过 position 设置一下光的位置 运行代码如下 目前看

    2024年01月21日
    浏览(50)
  • WEB 3D技术 three.js 3D贺卡(1) 搭建基本项目环境

    好 今天 我也是在网上学的 带着大家一起来做个3D贺卡 首先 我们要创建一个vue3的项目、 先创建一个文件夹 装我们的项目 终端执行 vue create 项目名称 例如 我的名字想叫 greetingCards 就是 因为这个名录 里面是全部都小写的 然后 下面选择 vue3 然后按下回车 等待项目创建完成

    2024年01月19日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包