HTML5 | WebGL 一半火焰一半海水特效

地球表面一半黎明一半黄昏。可用来学习webgl着色器的颜色变换。

webgl, globe，color, shader

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 6303
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

class World {

constructor() {
    this.scene = new THREE.Scene();
    this.renderer = new THREE.WebGLRenderer();
    this.renderer.setClearColor(0x000000);
    document.body.appendChild(this.renderer.domElement);
    this.resize();

this.addCube();

requestAnimationFrame(this.render.bind(this));
    window.addEventListener('resize', this.resize.bind(this));
  }

addCube() {

var geometry = new THREE.SphereGeometry(50, 50, 50);

var material = new THREE.ShaderMaterial({
      vertexShader: vertexShader,
      fragmentShader: fragmentShader,
      uniforms: uniforms
    });
    this.cube = new THREE.Mesh(geometry, material);
    this.scene.add(this.cube);
  }

render() {
    this.cube.rotation.x += 0.1;
    requestAnimationFrame(this.render.bind(this));
    this.renderer.render(this.scene, this.camera);
  }

resize() {
    this.camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 1000);
    this.camera.position.z = 300;

this.renderer.setSize(window.innerWidth, window.innerHeight);
  }
}

var _w = new World();

编译

CSS

HTML

地球表面一半黎明一半黄昏。可用来学习webgl着色器的颜色变换。

webgl, globe，color, shader

编辑器支持Emmet

快捷键

地球表面一半黎明一半黄昏。可用来学习webgl着色器的颜色变换。

webgl, globe，color, shader

HTML5 WebGL 毛刷子 | 高度浸染的画笔特效

HTML5 WebGL 火山爆发（火山灰）灭世末日景象动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：