<!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - custom attributes [lines]</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <style> body { color: #ffffff; font-family:Monospace; font-size:13px; text-align:center; font-weight: bold; background-color: #000000; margin: 0px; overflow: hidden; } #info { color: #fff; position: absolute; top: 0px; width: 100%; padding: 5px; z-index:100; } </style> </head> <body> <div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - custom attributes example</div> <div id="container"></div> <script src="js/Detector.js"></script> <script src="js/libs/stats.min.js"></script> <script src="../build/three.min.js"></script> <script src="fonts/helvetiker_bold.typeface.js"></script> <script type="x-shader/x-vertex" id="vertexshader"> uniform float amplitude; attribute vec3 displacement; attribute vec3 customColor; varying vec3 vColor; void main() { vec3 newPosition = position + amplitude * displacement; vColor = customColor; gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 ); } </script> <script type="x-shader/x-fragment" id="fragmentshader"> uniform vec3 color; uniform float opacity; varying vec3 vColor; void main() { gl_FragColor = vec4( vColor * color, opacity ); } </script> <script> if ( ! Detector.webgl ) Detector.addGetWebGLMessage(); var renderer, scene, camera, stats; var object, uniforms, attributes; var text = "three.js", height = 15, size = 50, curveSegments = 10, steps = 40, bevelThickness = 5, bevelSize = 1.5, bevelSegments = 10, bevelEnabled = true, font = "helvetiker", // helvetiker, optimer, gentilis, droid sans, droid serif weight = "bold", // normal bold style = "normal"; // normal italic var WIDTH = window.innerWidth, HEIGHT = window.innerHeight; init(); animate(); function init() { camera = new THREE.PerspectiveCamera( 30, WIDTH / HEIGHT, 1, 10000 ); camera.position.z = 400; scene = new THREE.Scene(); attributes = { displacement: { type: 'v3', value: [] }, customColor: { type: 'c', value: [] } }; uniforms = { amplitude: { type: "f", value: 5.0 }, opacity: { type: "f", value: 0.3 }, color: { type: "c", value: new THREE.Color( 0xff0000 ) } }; var shaderMaterial = new THREE.ShaderMaterial( { uniforms: uniforms, attributes: attributes, vertexShader: document.getElementById( 'vertexshader' ).textContent, fragmentShader: document.getElementById( 'fragmentshader' ).textContent, blending: THREE.AdditiveBlending, depthTest: false, transparent: true }); shaderMaterial.linewidth = 1; geometry = new THREE.TextGeometry( text, { size: size, height: height, curveSegments: curveSegments, font: font, weight: weight, style: style, bevelThickness: bevelThickness, bevelSize: bevelSize, bevelEnabled: bevelEnabled, bevelSegments: bevelSegments, steps: steps }); geometry.dynamic = true; geometry.center(); object = new THREE.Line( geometry, shaderMaterial, THREE.LineStrip ); var vertices = object.geometry.vertices; var displacement = attributes.displacement.value; var color = attributes.customColor.value; for( var v = 0; v < vertices.length; v ++ ) { displacement[ v ] = new THREE.Vector3(); color[ v ] = new THREE.Color( 0xffffff ); color[ v ].setHSL( v / vertices.length, 0.5, 0.5 ); } object.rotation.x = 0.2; scene.add( object ); renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setClearColor( 0x050505 ); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( WIDTH, HEIGHT ); var container = document.getElementById( 'container' ); container.appendChild( renderer.domElement ); stats = new Stats(); stats.domElement.style.position = 'absolute'; stats.domElement.style.top = '0px'; container.appendChild( stats.domElement ); // window.addEventListener( 'resize', onWindowResize, false ); } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight ); } function animate() { requestAnimationFrame( animate ); render(); stats.update(); } function render() { var time = Date.now() * 0.001; object.rotation.y = 0.25 * time; uniforms.amplitude.value = 0.5 * Math.sin( 0.5 * time ); uniforms.color.value.offsetHSL( 0.0005, 0, 0 ); var nx, ny, nz, value; for( var i = 0, il = attributes.displacement.value.length; i < il; i ++ ) { nx = 0.3 * ( 0.5 - Math.random() ); ny = 0.3 * ( 0.5 - Math.random() ); nz = 0.3 * ( 0.5 - Math.random() ); value = attributes.displacement.value[ i ]; value.x += nx; value.y += ny; value.z += nz; } attributes.displacement.needsUpdate = true; renderer.render( scene, camera ); } </script> </body> </html>