diff --git a/examples/webgl_shaders_vector.html b/examples/webgl_shaders_vector.html index 09c901e4c04f8f6c570d04b4a16082131ccf46cf..1b6270f37e94f0cfd67d885540ca2988ec1d78ad 100644 --- a/examples/webgl_shaders_vector.html +++ b/examples/webgl_shaders_vector.html @@ -74,26 +74,7 @@ var camera, scene, renderer, controls; - var group, text; - - var t = false; - - function toggle() { - - if ( t ) { - - text2.visible = 0; - text1.visible = 1; - - } else { - - text2.visible = 1; - text1.visible = 0; - - } - - t = !t; - } + var group; var loader = new THREE.FontLoader(); loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) { @@ -106,35 +87,32 @@ function init( font ) { camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 ); - camera.position.set( 0, 100, 500 ); + camera.position.set( 50, 100, 500 ); controls = new THREE.OrbitControls( camera ); - controls.target.set( 0, 100, 0 ); + controls.target.set( 50, 100, 0 ); controls.update(); scene = new THREE.Scene(); scene.background = new THREE.Color( 0xf0f0f0 ); - var theText = "&"; // i % & j b 8 + var theText = '&'; // i % & j b 8 group = new THREE.Group(); scene.add( group ); var textMaterial = new THREE.MeshBasicMaterial( { - color: new THREE.Color(0, 0, 1 ), + color: new THREE.Color( 0, 0, 1 ), side: THREE.DoubleSide, wireframe: true } ); var textShapes = font.generateShapes( theText, 180, 2 ); - var text3d = new THREE.ShapeBufferGeometry( textShapes ); - - text3d.computeBoundingBox(); - var centerOffset = -0.5 * ( text3d.boundingBox.max.x - text3d.boundingBox.min.x ); - text = new THREE.Mesh( text3d, textMaterial ); + var geometry = new THREE.ShapeBufferGeometry( textShapes ); - text.position.x = centerOffset - 150; + var text = new THREE.Mesh( geometry, textMaterial ); + text.position.x = - 200; group.add( text ); // @@ -234,7 +212,6 @@ for ( var i = 0; i < subshape.holes.length; i ++ ) { hole = subshape.holes[ i ]; - // console.log('hole', hole); process = processShape( hole.curves, true ); @@ -271,21 +248,17 @@ bezierGeometry.addAttribute( 'uv', new THREE.Float32BufferAttribute( uvs, 2 ) ); bezierGeometry.addAttribute( 'invert', new THREE.Float32BufferAttribute( invert, 1 ) ); - text3d = new THREE.ShapeBufferGeometry( convexhullShapeGroup ); - text3d.computeBoundingBox(); - var centerOffset = - 0.5 * ( text3d.boundingBox.max.x - text3d.boundingBox.min.x ); + geometry = new THREE.ShapeBufferGeometry( convexhullShapeGroup ); - var text1 = new THREE.Mesh( text3d, textMaterial ); - text1.position.x = centerOffset + 150; - group.add( text1 ); + text = new THREE.Mesh( geometry, textMaterial ); + text.position.x = 200; + group.add( text ); - text3d = new THREE.ShapeBufferGeometry( solidShapeGroup ); - text3d.computeBoundingBox(); - var centerOffset = - 0.5 * ( text3d.boundingBox.max.x - text3d.boundingBox.min.x ); + geometry = new THREE.ShapeBufferGeometry( solidShapeGroup ); - var text2 = new THREE.Mesh( text3d, new THREE.MeshBasicMaterial( { color: new THREE.Color(1, 0, 0 ), side: THREE.DoubleSide, wireframe: true } ) ); - text2.position.x = centerOffset + 150; - group.add( text2 ); + text = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: new THREE.Color( 1, 0, 0 ), side: THREE.DoubleSide, wireframe: true } ) ); + text.position.x = 200; + group.add( text ); // @@ -299,11 +272,6 @@ } ); text = new THREE.Mesh( bezierGeometry, newMaterial ); - text.position.x = centerOffset; - text.position.y = 0; - text.position.z = 0; - - text.rotation.x = 0; text.rotation.y = Math.PI * 2; group.add( text ); @@ -311,15 +279,9 @@ // - text3d = new THREE.ShapeBufferGeometry( solidShapeGroup ); - text3d.computeBoundingBox(); - - text = new THREE.Mesh( text3d, new THREE.MeshBasicMaterial( { color: 0.45 * 0xffffff, side: THREE.DoubleSide } ) ); - text.position.x = centerOffset; - text.position.y = 0; - text.position.z = 0; + geometry = new THREE.ShapeBufferGeometry( solidShapeGroup ); - text.rotation.x = 0; + text = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0.45 * 0xffffff, side: THREE.DoubleSide } ) ); text.rotation.y = Math.PI * 2; group.add( text ); @@ -334,8 +296,6 @@ stats = new Stats(); document.body.appendChild( stats.dom ); - document.addEventListener( 'mousedown', toggle, false ); - window.addEventListener( 'resize', onWindowResize, false ); } @@ -349,7 +309,6 @@ } - // function animate() {