首页 > 代码库 > 依然着色器，不啰嗦，直接撸别人的代码

依然着色器，不啰嗦，直接撸别人的代码

2024-09-09 01:15:45   220人阅读

<html>
<head>
    <title>threejs - material</title>

    <style>
    	body{
    		margin: 0;
    		overflow: hidden;
    	}
    </style>
</head>
<body>

    <canvas id="myCanvas"></canvas>

    <script src="http://www.mamicode.com/three.js"></script>

<script type="x-shader/x-vertex" id="vertexShader">
void main() 
{
	vec4 modelViewPosition = modelViewMatrix * vec4(position, 1.0);
	gl_Position = projectionMatrix * modelViewPosition;
}
</script>
<script type="x-shader/x-fragment" id="fragmentShader">
void main() {
	gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
</script>

<script type="x-shader/x-vertex" id="vertexShader2">
attribute float vertexDisplacement;
uniform float delta;
varying float vOpacity;
varying vec3 vUv;

void main() 
{
    vUv = position;
    vOpacity = vertexDisplacement;

    vec3 p = position;

    p.x += sin(vertexDisplacement) * 50.0;
    p.y += cos(vertexDisplacement) * 50.0;

	vec4 modelViewPosition = modelViewMatrix * vec4(p, 1.0);
	gl_Position = projectionMatrix * modelViewPosition;
}
</script>
<script type="x-shader/x-fragment" id="fragmentShader2">
uniform float delta;
varying float vOpacity;
varying vec3 vUv;

void main() {

    float r = 1.0 + cos(vUv.x * delta);
    float g = 0.5 + sin(delta) * 0.5;
    float b = 0.0;
    vec3 rgb = vec3(r, g, b);

	gl_FragColor = vec4(rgb, vOpacity);
}
</script>


    <script>

    var renderer,
    	scene,
    	camera,
    	myCanvas = document.getElementById(‘myCanvas‘);

    //RENDERER
    renderer = new THREE.WebGLRenderer({
      canvas: myCanvas, 
      antialias: true
    });
    renderer.setClearColor(0xffffff);
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);

    //CAMERA
    camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 300, 10000 );

    //SCENE
    scene = new THREE.Scene();

    //LIGHTS
    var light = new THREE.AmbientLight(0xffffff, 0.5);
    scene.add(light);

    var light2 = new THREE.PointLight(0xffffff, 0.5);
    scene.add(light2);
  
    
    //Custom Shader Material
    /*
    var material = new THREE.ShaderMaterial({
        uniforms: [],
        vertexShader: document.getElementById(‘vertexShader‘).textContent,
        fragmentShader: document.getElementById(‘fragmentShader‘).textContent
    });
    */


    var customUniforms = {
        delta: {value: 0}
    };
    var material = new THREE.ShaderMaterial({
        uniforms: customUniforms,
        vertexShader: document.getElementById(‘vertexShader2‘).textContent,
        fragmentShader: document.getElementById(‘fragmentShader2‘).textContent
    });


    
    var geometry = new THREE.BoxBufferGeometry(100, 100, 100, 10, 10, 10);
    var mesh = new THREE.Mesh(geometry, material);
    mesh.position.z = -1000;
    mesh.position.x = -100;
    scene.add(mesh);


    var geometry2 = new THREE.SphereGeometry(50, 20, 20);
    var mesh2 = new THREE.Mesh(geometry2, material);
    mesh2.position.z = -1000;
    mesh2.position.x = 100;
    scene.add(mesh2);


    var geometry3 = new THREE.PlaneGeometry(10000, 10000, 100, 100);
    var mesh3 = new THREE.Mesh(geometry3, material);
    mesh3.rotation.x = -90 * Math.PI / 180;
    mesh3.position.y = -100;
    scene.add(mesh3);


    //attribute
    var vertexDisplacement = new Float32Array(geometry.attributes.position.count);

    for (var i = 0; i < vertexDisplacement.length; i ++) {
        vertexDisplacement[i] = Math.sin(i);
    }

    geometry.addAttribute(‘vertexDisplacement‘, new THREE.BufferAttribute(vertexDisplacement, 1));


    //RENDER LOOP
    render();


    var delta = 0;
    function render() {

        delta += 0.1;

        //uniform
        mesh.material.uniforms.delta.value = http://www.mamicode.com/0.5 + Math.sin(delta) * 0.5;>

　　

依然着色器，不啰嗦，直接撸别人的代码


联系
我们