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

}

相关推荐
因吹斯汀18 小时前
一饭封神:当AI厨神遇上你的冰箱,八大菜系大师在线battle!
前端·vue.js·ai编程
再学一点就睡18 小时前
NATAPP 内网穿透指南:让本地项目轻松 “走出去”
前端
拜无忧18 小时前
2025最新React项目架构指南:从零到一,为前端小白打造
前端·react.js·typescript
稻草人不怕疼18 小时前
记一次从“按钮点不动”到“窗口派发缺失”的排查过程
前端
土了个豆子的18 小时前
02.继承MonoBehaviour的单例模式基类
开发语言·visualstudio·单例模式·c#·里氏替换原则
qq_1728055919 小时前
Go 自建库的使用教程与测试
开发语言·后端·golang
irving同学4623819 小时前
TypeORM 列装饰器完整总结
前端·后端·nestjs
久绊A19 小时前
Hydra-SSH 破解安全防范
开发语言·php
彭于晏爱编程19 小时前
你真的了解 Map、Set 嘛
前端
崔璨19 小时前
详解Vue3的响应式系统
前端·vue.js