three.js - lineyka Cat

by mmalex

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body {
  overflow: hidden;
  padding: 0;
  margin: 0;
}

JavaScript

var renderer;
var camera;
var controls;
var scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(54, window.innerWidth / window.innerHeight, 1, 5000);
renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(new THREE.Color(0xffffff));
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);
camera.position.x = 1;
camera.position.y = 100;
camera.position.z = 10;
camera.lookAt(0, 0, 0);
controls = new THREE.OrbitControls(camera);
var size = 10;
var divisions = 10;
var gridHelper = new THREE.GridHelper(size, divisions);
scene.add(gridHelper);

$.ajax({
  type: "GET",
  url: "http://mbnsay.com/rayys/assets/5c98eea89539723dd159f061.svg",
  dataType: "xml",
  success: function(xmlDoc) {
    let xml = $(xmlDoc);

    let node = new THREE.Object3D();
    let bbox;

    xml.find("path").each(function() {
      let pathText = $(this).attr('d');

      // console.log(pathText);
      let shape = transformSVGPath(pathText);

      // hmm, what to do here?!
      //let line = createLine(shape.currentPath, 0xff0000);
      // node.add(line);

      //line.geometry.computeBoundingBox();
      //if (!bbox) {
      //  bbox = line.geometry.boundingBox.clone();
      //} else {
      //  bbox.expandByObject(line);
      //}

      if (shape.subPaths) {
        for (let i = 0; i < shape.subPaths.length; i++) {

          for (let c = 0; c < shape.subPaths[i].curves.length; c++) {
            let curve = shape.subPaths[i].curves[c];
            if (curve.type === "LineCurve") {
            	console.log(curve);
            } else if (curve.type === "CubicBezierCurve") {
            	console.log(curve);
            }
          }

          let line = createLine(shape.subPaths[i], 0x000000);
          line.geometry.computeBoundingBox();
          node.add(line);
          if (!bbox) {
            bbox = line.geometry.boundingBox.clone();
          } else...