web3d-three.js场景设计器-天空包围盒-TWEEN.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

}

相关推荐
showyoui15 分钟前
Python 闭包(Closure)实战总结
开发语言·python
我在北京coding16 分钟前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
今天背单词了吗98020 分钟前
算法学习笔记:7.Dijkstra 算法——从原理到实战,涵盖 LeetCode 与考研 408 例题
java·开发语言·数据结构·笔记·算法
Eiceblue23 分钟前
使用 C# 发送电子邮件(支持普通文本、HTML 和附件)
开发语言·c#·html·visual studio
小小小小王王王28 分钟前
hello判断
开发语言·c#
前端开发与ui设计的老司机39 分钟前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
全能打工人41 分钟前
前端查询条件加密传输方案(SM2加解密)
前端·sm2前端加密
海天胜景1 小时前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
翻滚吧键盘1 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
苦夏木禾1 小时前
js请求避免缓存的三种方式
开发语言·javascript·缓存