Example #1
0
 setCountdown(n) {
   const geometry = new TextGeometry(n, {
     font: this.font,
     size: FONT_SIZE,
     height: 0.001,
     curveSegments: 3,
   });
   geometry.computeBoundingBox();
   this.countdown.geometry = geometry;
   this.countdown.position.x = -geometry.boundingBox.max.x / 2;
   this.countdown.position.y = this.config.tableHeight + 0.4;
 }
Example #2
0
export function generateTextPoints(text, size, pointCount){
  if(!pointCount){
    pointCount = size * size / 2 // use half of all points per default
  }
  let font = new THREE.Font(JSON.parse(fontDef.substring(65, fontDef.length - 2)));

  var textGeo = new THREE.TextGeometry( text, {
    size: 1,
    height: 0.5,
    curveSegments: 0,

    font: font,
    weight: "bold",
    style: "normal",

    bevelThickness: 2,
    bevelSize: 5,
    bevelEnabled: false

  });

  textGeo.center();
  textGeo.applyMatrix( new THREE.Matrix4().makeTranslation( 0, 1, 0 ) ); //move up a little

  var data = generateRandomPoints(size * size, defaultPointGenerator(0));//assign 0 to w so that the pass  through shader discard the position and uses the old one isntead

  var points = THREE.GeometryUtils.randomPointsInGeometry( textGeo, pointCount );

  for ( var i = 0, j = 0, l = Math.min(points.length, data.length ); j < l; i += 4, j += 1 ) {

    data[ i ] = points[ j ].x;
    data[ i + 1 ] = points[ j ].y;
    data[ i + 2 ] = points[ j ].z;
    data[ i + 3 ] = 1.0;

  }




  var texture = new THREE.DataTexture( data, size, size, THREE.RGBAFormat, THREE.FloatType ); // was RGB format. changed to RGBA format. see discussion in #8415 / #8450
  texture.needsUpdate = true;

  return texture;
}
Example #3
0
  constructor(scene, config, font) {
    this.scene = scene;
    this.font = font;
    this.config = config;

    const material = new MeshBasicMaterial({
      color: 0xffffff,
      transparent: true,
    });
    const geometry = new TextGeometry('5', {
      font: this.font,
      size: FONT_SIZE,
      height: 0.001,
      curveSegments: 3,
    });
    geometry.computeBoundingBox();
    this.countdown = new Mesh(geometry, material);
    this.countdown.position.x = -geometry.boundingBox.max.x / 2;
    this.countdown.position.y = this.config.tableHeight + 0.2;
    this.countdown.position.z = this.config.tablePositionZ + 0.5;
    this.scene.add(this.countdown);
  }
Example #4
0
loader.load('../helvetiker_regular.typeface.js', function(font) {

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var isDragging = false;
var previousMousePosition = {
  x: 0,
  y: 0
};

var textMaterial = new THREE.MeshBasicMaterial({color: 0xb0bca7, overdraw: true})
var textGeometry = new THREE.TextGeometry("Patrick Sullivan", {
  font: font,
  size: 40,
  height: 15
});
var textGeometry2 = new THREE.TextGeometry("Web Development Intern", {
  font: font,
  size: 20,
  height: 10
});
textGeometry.computeBoundingBox();
textGeometry2.computeBoundingBox();
var textWidth = textGeometry.boundingBox.max.x-textGeometry.boundingBox.min.x;
var textWidth2 = textGeometry2.boundingBox.max.x-textGeometry2.boundingBox.min.x;
var textHeight2 = textGeometry.boundingBox.max.y-textGeometry.boundingBox.min.y;

var textMesh = new THREE.Mesh(textGeometry, textMaterial);
var textMesh2 = new THREE.Mesh(textGeometry2, textMaterial);
textMesh.position.set(-0.5*textWidth,0,0);
textMesh2.position.set(-0.5*textWidth2,-0.6*textHeight2,0);

var meshGroup = [textMesh, textMesh2]
var pivot = new THREE.Object3D();
for (var i = 0; i < meshGroup.length; i++) {
  pivot.add(meshGroup[i]);
}
scene.add(pivot);

camera.position.set(-600,0,200);
camera.lookAt(textMesh.position);

$(renderer.domElement)
.on('mousedown',
    function(e) {
      isDragging = true;
    }).on('mousemove', function(e) {
      var deltaMove = {
        x: e.offsetX - previousMousePosition.x,
        y: e.offsetY - previousMousePosition.y
      };

      if(isDragging) {
        var deltaRotationQuaternion = new THREE.Quaternion()
        .setFromEuler(new THREE.Euler(
          0,
          toRadians(deltaMove.x * 1),
          0,
          'XYZ'
        ));

        pivot.quaternion.multiplyQuaternions(deltaRotationQuaternion, pivot.quaternion);
      }

      previousMousePosition = {
        x: e.offsetX,
        y: previousMousePosition.y
      };
    });

    $(document).on('mouseup', function(e) {
      isDragging = false;
    })

    var render = function() {
      requestAnimationFrame(render);
      renderer.render(scene, camera);
    }
    render();

    function toRadians(angle) {
      return angle * (Math.PI / 180);
    }

});