WebGL Three.js入门教程 - 片段着色器实例：变色动画

使用fragmentShader和u_time uniform来创建颜色变化动画效果。u_time是一个表示离渲染开始的时间全局变量，从CPU传递给GPU，将在所有渲染管道中共享。

webgl, shader, uniform

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var container;
var camera, scene, renderer;
var uniforms;

init();
animate();

function init() {
    container = document.getElementById('container');

camera = new THREE.Camera();
    camera.position.z = 1;

scene = new THREE.Scene();

var geometry = new THREE.PlaneBufferGeometry(2, 2);

uniforms = {
        u_time: {
            type: "f",
            value: 1.0
        },
        u_resolution: {
            type: "v2",
            value: new THREE.Vector2()
        },
        u_mouse: {
            type: "v2",
            value: new THREE.Vector2()
        }
    };

var material = new THREE.ShaderMaterial({
        uniforms: uniforms,
        vertexShader: document.getElementById('vertexShader').textContent,
        fragmentShader: document.getElementById('fragmentShader').textContent
    });

var mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio(window.devicePixelRatio);

container.appendChild(renderer.domElement);

onWindowResize();
    window.addEventListener('resize', onWindowResize, false);

document.onmousemove = function(e) {
        uniforms.u_mouse.value.x = e.pageX
        uniforms.u_mouse.value.y = e.pageY
    }
}

function onWindowResize(event) {
    renderer.setSize(window.innerWidth, window.innerHeight);
    uniforms.u_resolution.value.x = renderer.domElement.width;
    uniforms.u_resolution.value.y = renderer.domElement.height;
}

function animate() {
    requestAnimationFrame(animate);
    render();
}

function render() {
    uniforms.u_time.value += 0.05;
    renderer.render(scene, camera);
}

编译

CSS

HTML

使用fragmentShader和u_time uniform来创建颜色变化动画效果。u_time是一个表示离渲染开始的时间全局变量，从CPU传递给GPU，将在所有渲染管道中共享。

webgl, shader, uniform

编辑器支持Emmet

快捷键

使用fragmentShader和u_time uniform来创建颜色变化动画效果。u_time是一个表示离渲染开始的时间全局变量，从CPU传递给GPU，将在所有渲染管道中共享。

webgl, shader, uniform

WebGL Three.js 片段着色器代码实验 - 微观世界的纹路

使用WebGL Three.js着色器代码实现的非规则球体变形背景动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：