Skip to content

Commit

Permalink
#3 add 3d text
Browse files Browse the repository at this point in the history
  • Loading branch information
@obriensystems
obriensystems committed Jul 11, 2017
1 parent 5148616 commit b88806e
Show file tree
Hide file tree
Showing 3 changed files with 165 additions and 9 deletions.
13 changes: 13 additions & 0 deletions onap-demo.web/src/main/resources/static/fonts/LICENSE
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
Copyright � 2004 by MAGENTA Ltd. All Rights Reserved.

Permission is hereby granted, free of charge, to any person obtaining a copy of the fonts accompanying this license ("Fonts") and associated documentation files (the "Font Software"), to reproduce and distribute the Font Software, including without limitation the rights to use, copy, merge, publish, distribute, and/or sell copies of the Font Software, and to permit persons to whom the Font Software is furnished to do so, subject to the following conditions:

The above copyright and this permission notice shall be included in all copies of one or more of the Font Software typefaces.

The Font Software may be modified, altered, or added to, and in particular the designs of glyphs or characters in the Fonts may be modified and additional glyphs or characters may be added to the Fonts, only if the fonts are renamed to names not containing the word "MgOpen", or if the modifications are accepted for inclusion in the Font Software itself by the each appointed Administrator.

This License becomes null and void to the extent applicable to Fonts or Font Software that has been modified and is distributed under the "MgOpen" name.

The Font Software may be sold as part of a larger software package but no copy of one or more of the Font Software typefaces may be sold by itself.

THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL MAGENTA OR PERSONS OR BODIES IN CHARGE OF ADMINISTRATION AND MAINTENANCE OF THE FONT SOFTWARE BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE.
1 change: 1 addition & 0 deletions onap-demo.web/src/main/resources/static/fonts/helvetiker_regular.typeface.json
View file

Large diffs are not rendered by default.

160 changes: 151 additions & 9 deletions onap-demo.web/src/main/resources/static/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
<div id="north">north</div>
<div id="center">center</div>
<div id="d2>">d2</div>
<table><tr><td>
<div id="d3">
<script src="https://fb.me/react-15.0.1.js"></script>
<script src="https://fb.me/react-dom-15.0.1.js"></script>
Expand All @@ -50,31 +51,33 @@
var cube1material, cube1state, texture1, texture2, aspect, gridOffset, layerOffset;
maxFrame = 20; frameStep = 10;
aspect = 2;
gridOffset = 2.5;
gridOffset = 0.75;
layerOffset = gridOffset * 5;
cube1state = 1;
init();
animate();
//renderer.render( scene, camera );


function init() {
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth / 2, window.innerHeight / (2 * aspect) );
renderer.setSize( window.innerWidth / (3/2), window.innerHeight / ((3/2) * aspect) );
renderer.setClearColor(0x999999, 1); // bg
document.body.appendChild( renderer.domElement );

// https://threejs.org/docs/#api/cameras/PerspectiveCamera
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight * aspect, 1, 1200 );
camera.position.set( 15, 20, 30 );
camera = new THREE.PerspectiveCamera( 20, window.innerWidth / window.innerHeight * aspect, 1, 2000 );
camera.position.set( 35, 30, 40 );
scene.add( camera );

// controls
var controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.minDistance = 20;
controls.maxDistance = 50;
controls.maxPolarAngle = Math.PI / 2;
//controls.enablePan = true;

scene.add( new THREE.AmbientLight( 0x222222 ) );

Expand All @@ -93,7 +96,8 @@
// points
//https://threejs.org/docs/#api/geometries/BoxGeometry
//var pointsGeometry = new THREE.DodecahedronGeometry( 10 );
var pointsGeometry = new THREE.BoxGeometry( 2*gridOffset,2*gridOffset,2*gridOffset);
//var cubeGeo = new THREE.BoxGeometry( 2*gridOffset,2*gridOffset,2*gridOffset);
var cubeGeo = new THREE.CylinderGeometry(2*gridOffset, 2*gridOffset, gridOffset, 32);
texture1 = loader.load('textures/sprites/logo_onap_4x.png')
texture2 = loader.load('textures/sprites/logo_onap_4xtint.png')
//var material = new THREE.PointsMaterial( { color: 0x0080ff, map: texture, size: 1, alphaTest: 0.5} );
Expand All @@ -107,7 +111,7 @@
var meshMaterial = new THREE.MeshLambertMaterial( { color: 0xfffffff, opacity: 0.9, transparent: false} );
//var meshMaterial = material;
cube1material = meshMaterial;
var meshGeometry = new THREE.ConvexBufferGeometry( pointsGeometry.vertices );
var meshGeometry = new THREE.ConvexBufferGeometry(cubeGeo.vertices );
//var mesh = new THREE.Mesh( meshGeometry, meshMaterial );
//mesh.material.side = THREE.BackSide; // back faces
//mesh.renderOrder = 0;
Expand All @@ -120,24 +124,156 @@
group.add( mesh );

// layers
var layer0Geo = new THREE.BoxGeometry( 60,0.1,30 );
var oz = 10 * gridOffset;
var oy = 0.1;
var ox = 20 * gridOffset;
var layer0Geo = new THREE.BoxGeometry( ox,oy,oz );
var layer0Material = new THREE.MeshLambertMaterial( { color: 0xccccff, opacity: 0.2, transparent: true} );
var layer0Mesh = new THREE.Mesh( layer0Geo, layer0Material);
layer0Mesh.position.y = layerOffset;
group.add(layer0Mesh);

var layer1Geo = new THREE.BoxGeometry( 60,0.1,30 );
var layer1Geo = new THREE.BoxGeometry( ox,oy,oz );
var layer1Material = new THREE.MeshLambertMaterial( { color: 0xccccff, opacity: 0.2, transparent: true} );
var layer1Mesh = new THREE.Mesh( layer1Geo, layer1Material);
layer1Mesh.position.y = 0;
group.add(layer1Mesh);

var layer2Geo = new THREE.BoxGeometry( 60,0.1,30 );
var layer2Geo = new THREE.BoxGeometry( ox,oy,oz );
var layer2Material = new THREE.MeshLambertMaterial( { color: 0xccccff, opacity: 0.2, transparent: true} );
var layer2Mesh = new THREE.Mesh( layer2Geo, layer2Material);
layer2Mesh.position.y = -layerOffset;
group.add(layer2Mesh);


// add text
// from https://github.com/mrdoob/three.js/blob/master/examples/webgl_geometry_text_shapes.html
var floader = new THREE.FontLoader();
//floader.load( 'fonts/helvetiker_regular.typeface.json', fontFunction('fonts/helvetiker_regular.typeface.json', "test", layerOffset));
// need to consolidate!
floader.load( 'fonts/helvetiker_regular.typeface.json', function(font) {
var xMid, text;
var textShape = new THREE.BufferGeometry();
var color = 0x006699;
var matDark = new THREE.LineBasicMaterial({color: color,side: THREE.DoubleSide} );
var matLite = new THREE.MeshBasicMaterial({color: color,transparent: true,opacity: 0.4, side: THREE.DoubleSide} );
var message = "service layer";
var shapes = font.generateShapes( message, 0.5, 0.1 );
var geometry = new THREE.ShapeGeometry( shapes );
geometry.computeBoundingBox();
xMid = - 0.5 * ( geometry.boundingBox.max.x - geometry.boundingBox.min.x );
geometry.translate( xMid, 5 * gridOffset, 0 );
// make shape ( N.B. edge view not visible )
textShape.fromGeometry( geometry );
text = new THREE.Mesh( textShape, matLite );
text.position.z = - layerOffset;//150;
scene.add( text );
// make line shape ( N.B. edge view remains visible )
var holeShapes = [];
for ( var i = 0; i < shapes.length; i ++ ) {
var shape = shapes[ i ];
if ( shape.holes && shape.holes.length > 0 ) {
for ( var j = 0; j < shape.holes.length; j ++ ) {
var hole = shape.holes[ j ];
holeShapes.push( hole );
}
}
}
shapes.push.apply( shapes, holeShapes );
var lineText = new THREE.Object3D();
for ( var i = 0; i < shapes.length; i ++ ) {
var shape = shapes[ i ];
var lineGeometry = shape.createPointsGeometry();
lineGeometry.translate( xMid, 0, 0 );
//var lineMesh = new THREE.Line( lineGeometry, matDark );
//lineText.add( lineMesh );
}
scene.add( lineText );
} ); //end load function

floader.load( 'fonts/helvetiker_regular.typeface.json', function(font) {
var xMid, text;
var textShape = new THREE.BufferGeometry();
var color = 0x006699;
var matDark = new THREE.LineBasicMaterial({color: color,side: THREE.DoubleSide} );
var matLite = new THREE.MeshBasicMaterial({color: color,transparent: true,opacity: 0.4, side: THREE.DoubleSide} );
var message = "virtual machine layer";
var shapes = font.generateShapes( message, 0.5, 0.1 );
var geometry = new THREE.ShapeGeometry( shapes );
geometry.computeBoundingBox();
xMid = - 0.5 * ( geometry.boundingBox.max.x - geometry.boundingBox.min.x );
geometry.translate( xMid, 0 * gridOffset, 0 );
// make shape ( N.B. edge view not visible )
textShape.fromGeometry( geometry );
text = new THREE.Mesh( textShape, matLite );
text.position.z = - layerOffset;//150;
scene.add( text );
// make line shape ( N.B. edge view remains visible )
var holeShapes = [];
for ( var i = 0; i < shapes.length; i ++ ) {
var shape = shapes[ i ];
if ( shape.holes && shape.holes.length > 0 ) {
for ( var j = 0; j < shape.holes.length; j ++ ) {
var hole = shape.holes[ j ];
holeShapes.push( hole );
}
}
}
shapes.push.apply( shapes, holeShapes );
var lineText = new THREE.Object3D();
for ( var i = 0; i < shapes.length; i ++ ) {
var shape = shapes[ i ];
var lineGeometry = shape.createPointsGeometry();
lineGeometry.translate( xMid, 0, 0 );
//var lineMesh = new THREE.Line( lineGeometry, matDark );
//lineText.add( lineMesh );
}
scene.add( lineText );
} ); //end load function


floader.load( 'fonts/helvetiker_regular.typeface.json', function(font) {
var xMid, text;
var textShape = new THREE.BufferGeometry();
var color = 0x006699;
var matDark = new THREE.LineBasicMaterial({color: color,side: THREE.DoubleSide} );
var matLite = new THREE.MeshBasicMaterial({color: color,transparent: true,opacity: 0.4, side: THREE.DoubleSide} );
var message = "ONAP layer";
var shapes = font.generateShapes( message, 0.5, 0.1 );
var geometry = new THREE.ShapeGeometry( shapes );
geometry.computeBoundingBox();
xMid = - 0.5 * ( geometry.boundingBox.max.x - geometry.boundingBox.min.x );
geometry.translate( xMid, -5 * gridOffset, 0 );
// make shape ( N.B. edge view not visible )
textShape.fromGeometry( geometry );
text = new THREE.Mesh( textShape, matLite );
text.position.z = -layerOffset;//150;
scene.add( text );
// make line shape ( N.B. edge view remains visible )
var holeShapes = [];
for ( var i = 0; i < shapes.length; i ++ ) {
var shape = shapes[ i ];
if ( shape.holes && shape.holes.length > 0 ) {
for ( var j = 0; j < shape.holes.length; j ++ ) {
var hole = shape.holes[ j ];
holeShapes.push( hole );
}
}
}
shapes.push.apply( shapes, holeShapes );
var lineText = new THREE.Object3D();
for ( var i = 0; i < shapes.length; i ++ ) {
var shape = shapes[ i ];
var lineGeometry = shape.createPointsGeometry();
lineGeometry.translate( xMid, 0, 0 );
//var lineMesh = new THREE.Line( lineGeometry, matDark );
//lineText.add( lineMesh );
}
scene.add( lineText );
} ); //end load function



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

Expand Down Expand Up @@ -181,8 +317,14 @@
}
renderer.render( scene, camera );
}



</script>
</div>
</td>
<td>two</td>
</tr></table>
<div id="south">south</div>
</body>
</html>

0 comments on commit b88806e

Please sign in to comment.