threejs 模拟天空

1.在html声明webgl变量

<script type="x-shader/x-vertex" id="vertexShader">varying vec3 vWorldPosition;void main() {vec4 worldPosition = modelMatrix * vec4( position, 1.0 );vWorldPosition = worldPosition.xyz;gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );}
</script>

<script type="x-shader/x-fragment" id="fragmentShader">uniform vec3 topColor;uniform vec3 bottomColor;uniform float offset;uniform float exponent;varying vec3 vWorldPosition;void main() {float h = normalize( vWorldPosition + offset ).y;gl_FragColor = vec4( mix( bottomColor, topColor, max( pow( max( h, 0.0 ), exponent ), 0.0 ) ), 1.0 );}</script>

2.初始化3d环境

let camera, scene, renderer;
camera = new THREE.PerspectiveCamera( 40, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );camera.position.set( 700, 200, - 500 );// SCENEscene = new THREE.Scene();// LIGHTSconst light = new THREE.DirectionalLight( 0xaabbff, 0.3 );light.position.x = 300;light.position.y = 250;light.position.z = - 500;scene.add( light );

##3.创建天空

使用一个球体模拟天空

             const vertexShader = document.getElementById( 'vertexShader' ).textContent;const fragmentShader = document.getElementById( 'fragmentShader' ).textContent;const uniforms = {topColor: { value: new THREE.Color( 0x0077ff ) },bottomColor: { value: new THREE.Color( 0xffffff ) },offset: { value: 400 },exponent: { value: 0.6 }};uniforms.topColor.value.copy( light.color );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 );scene.add( sky );

4.渲染

             // RENDERERrenderer = new THREE.WebGLRenderer( { antialias: true } );renderer.setPixelRatio( window.devicePixelRatio );renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );container.appendChild( renderer.domElement );renderer.outputEncoding = THREE.sRGBEncoding;function animate() {requestAnimationFrame( animate );renderer.render( scene, camera );stats.update();}
animate()

threejs 模拟天空相关推荐

在游戏里模拟天空的颜色，太迷人了！
几个世纪以来,天空一直是许多艺术家迷恋的主题,他们试图尽可能准确地描绘其颜色.同样的,在游戏开发中,天空渲染对于游戏开发者也一直是一个迷人的主题,本文理论部分译自scratchapixel,介绍了天空 ...
OGRE渲染引擎之地形、天空和雾
本教程将重点介绍场景中的渲染地形.我们将介绍需要完成的基本设置,并将介绍使用带地形的照明.我们还将简要介绍使用Skyboxes,Skydomes和Skyplanes模拟天空.最后,我们将解释如何向场景 ...
opengles绘制天空穹
天空穹技术中不再使用立方体模拟天空,而是用一个半球面模拟天空,此半球面上贴上对应的天空纹理,摄像机位于天空穹内部. 效果图核心代码半球的绘制 package test.com.opengles11 ...
Games104笔记---LE6--渲染系统3：游戏中的地形/天空/云渲染
目录地形几何高度图: 自适应网格细分几个原则: 网格细分的方法: 实时变形的地形: 体素化: Marching Cubes算法: 地形着色: 存储内容: 地形纹理采样: 正确的过渡算法: 凹凸/ ...
vue动态粒子背景效果-particles、threejs
一.第一种使用script标签引入,比较简单方便,但是效果比较单一,而且是在body上的背景,而vue又是单页面应用,所以说一个页面引入后其他页面也会有这个效果 mounted() {const o ...
基于 HTML5 WebGL 智能城市的模拟运行
2019独角兽企业重金招聘Python工程师标准>>> 前言智能城市是一个系统.也称为网络城市.数字化城市.信息城市. 智能城市建设是一个系统工程:首先实现的是城市管理智能化,由智 ...
Ogre基础教程3：地形，天空，烟雾
本教程将专注于在一个场景中渲染地形. 我们将涉及到需要被完成的基本设置,并且将介绍地形光照的使用. 我们也会给出对使用天空盒(Skyboxes).天空穹顶(Skydomes)以及天空面(Skyplan ...
第一阶段_第二部分_功能介绍
第二部分上一作业 1.z前x右y上:把子物体旋转后:容器的坐标为朝前z,用local选项. 2.Transformer为相对的 3.如果有父物体子相对于父的transformer Material( ...
第一阶段unity基础
第一阶段unity基础引言注意: 1.重点:1.适用性(什么时候用,怎么用)<记脑子里> 2.作用(能够解决什么问题) 3.定义 4.操作/语法 2.每天练习必须会独立完成 3.形 ...

threejs 模拟天空

1.在html声明webgl变量

2.初始化3d环境

4.渲染

threejs 模拟天空相关推荐

最新文章

热门文章