首页 > 代码库 > 依然着色器,不啰嗦,直接撸别人的代码
依然着色器,不啰嗦,直接撸别人的代码
<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;>
依然着色器,不啰嗦,直接撸别人的代码
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。