Front_End/.svn/pristine/26/2622f39d1c7a5bd69f517c7bbed1b7ed1db5bb4c.svn-base

import * as THREE from 'three'
global.THREE = THREE
require('three/examples/js/controls/OrbitControls')



var dom = document.querySelector('#test')
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, dom.offsetWidth / dom.offsetHeight, 0.1, 1000);
camera.position.z = 150;
var controls = new THREE.OrbitControls(camera, dom);

var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(dom.offsetWidth, dom.offsetHeight);
dom.appendChild(renderer.domElement);


var f = null
var loader = new THREE.FontLoader();
loader.load('http://localhost:3000/helvetiker_regular.typeface.json', function (font) {
  var boxGeometry = new THREE.BoxBufferGeometry(50, 50, 50);
  var y = getMaxHeight(boxGeometry.attributes.position.array) + 40
  var material = new THREE.MeshBasicMaterial({ color: 0x000000 })
  
  var geometry = new THREE.TextBufferGeometry('Hello three.js!', {
    font: font,
    size: 12,
    height: 1
  });
  f = new THREE.Mesh(geometry, material)
  f.position.set(
    -getWidth(geometry.attributes.position.array) / 2,
    y, 
    0
  )
  scene.add(f)
  scene.add(
    new THREE.Mesh(boxGeometry, material)
  )
});


function getMaxHeight(verticesBuffArrays) {
  let maxHeight = verticesBuffArrays[2]
  let len = verticesBuffArrays.length

  for (let i = 3; i < len; i += 3) {
    if (maxHeight < verticesBuffArrays[i + 2]) {
      maxHeight = verticesBuffArrays[i + 2]
    }
  }

  return maxHeight
}

function getWidth(verticesBuffArrays) {
  let args = {
    minWidth: verticesBuffArrays[0],
    maxWidth: verticesBuffArrays[0]
  }
  let len = verticesBuffArrays.length

  for (let i = 3; i < len; i += 3) {
    if (args.maxWidth < verticesBuffArrays[i]) {
      args.maxWidth = verticesBuffArrays[i]
    }

    if (args.minWidth > verticesBuffArrays[i]) {
      args.minWidth = verticesBuffArrays[i]
    }
  }

  return args.maxWidth - args.minWidth
}


renderer.setClearColor(0xffffff)
function animate() {
  controls.update();
  // console.log(f && f.quaternion)

  f && f.quaternion.copy(camera.quaternion)
  // console.log(camera.quaternion)
  f && f.scale.copy(camera.scale)
  // f && f.scale.copy(camera.scale)
  // up
  f && f.rotation.copy(camera.rotation)

  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();