web3d-three.js场景设计器-天空包围盒-TWEEN.js

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

web3d-three.js场景设计器-天空包围盒-TWEEN.js,javascript,前端,开发语言,three.js

THREE.JS 实现场景天空包围盒,为了让场景背景更具体,而不是呆板的纯色,可以给厂家添加围绕的包围盒。

  • 这里使用球体来实现,球体中央则是场景
  • 给球体添加天空的渐变色
  • 加入场景

代码如下

function createSky( hemiLight) {

  const vertexShader = `varying vec3 vWorldPosition;

    void main() {

        vec4 worldPosition = modelMatrix * vec4( position, 1.0 );

        vWorldPosition = worldPosition.xyz;

        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

    }`

  const fragmentShader = `uniform vec3 topColor;

    uniform vec3 bottomColor;

    uniform float offset;

    uniform float exponent;

    varying vec3 vWorldPosition;

    void main() {

        float h = normalize( vWorldPosition + offset ).y;

        // 从-0.2 到1做渐变

        h = smoothstep(-0.4, 1.0, h);  

        gl_FragColor = vec4( mix( bottomColor, topColor, max( pow( max( h , 0.0), exponent ), 0.0 ) ), 1.0 );

    }`

  const uniforms = {

    'topColor': { value: new THREE.Color(0x0077ff) },

    'bottomColor': { value: new THREE.Color(0xeeeeee) },

    'offset': { value: 30 },

    'exponent': { value: 0.6 }

  }

  uniforms['topColor'].value.copy(hemiLight.color)

  // scene.fog.color.copy( uniforms[ 'bottomColor' ].value );

  const skyGeo = new THREE.SphereGeometry(4000, 32, 15)

  const skyMat = new THREE.ShaderMaterial({

    uniforms: uniforms,

    vertexShader: vertexShader,

    fragmentShader: fragmentShader,

    side: THREE.BackSide

  })

  const sky = new THREE.Mesh(skyGeo, skyMat)

  return sky

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

到了这里,关于web3d-three.js场景设计器-天空包围盒-TWEEN.js的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • web 3d场景构建+three.js+室内围墙,仓库,楼梯,货架模型等,第一人称进入场景案例

      翻到了之前的一个案例,基于three.js做的仓库布局模拟,地图元素除了大模型外,其他都是通过JSON数据解析动态生成的,例如墙体,柱子门口,地标等,集成了第一人称的插件可以第一人称进入场景有需要的可以下载看看,对想入门的朋友应该有一些参考价值。 /**    *创

    2024年02月10日
    浏览(55)
  • HT for Web (Hightopo) 使用心得(6)- 3D场景环境配置(天空球,雾化,辉光,景深)

    在前一篇文章《Hightopo 使用心得(5)- 动画的实现》中,我们将一个直升机模型放到了 3D 场景中。同时,还利用动画实现了让该直升机围绕山体巡逻。在这篇文章中,我们将对上一篇的场景进行一些环境上的丰富与美化。让场景更真实一些。具体涉及到的知识点如下: 天空

    2024年02月10日
    浏览(37)
  • 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)
  • React+Three.js实现粒子包围的安卓机器人

    喜欢做动画的我很早之前就已经开始关注Threejs这个框架了,觉得这个框架老酷炫了,可以在浏览器中展示一个3D场景,奈何时间与精力关系(主要是懒)一直都没有真正花功夫去学,好在最近终于开始简单学了一点Threejs的皮毛,并且写了个安卓机器人的小demo,涉及到的知识点是

    2024年01月25日
    浏览(68)
  • WEB 3D技术 three.js 阴影属性

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

    2024年01月22日
    浏览(56)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包