From 496b2a58e39379a910425a24c4a56ad90306d74c Mon Sep 17 00:00:00 2001 From: Tyler Hallada Date: Sun, 3 Feb 2019 14:57:29 -0500 Subject: [PATCH] Unsuccessfully subdividing trucacted icosahedron --- package.json | 3 +- src/index.js | 109 ++++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 109 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 5ed6708..6e910bf 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,8 @@ "license": "ISC", "dependencies": { "three": "^0.101.1", - "three-orbit-controls": "^82.1.0" + "three-orbit-controls": "^82.1.0", + "three-subdivision-modifier": "^1.0.5" }, "devDependencies": { "file-loader": "^3.0.1", diff --git a/src/index.js b/src/index.js index 89b61fb..9a87f27 100644 --- a/src/index.js +++ b/src/index.js @@ -1,11 +1,12 @@ import * as THREE from "three"; var OrbitControls = require("three-orbit-controls")(THREE); +var SubdivisionModifier = require("three-subdivision-modifier"); const scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000); -var geometry = new THREE.IcosahedronBufferGeometry(5, 7); +var geometry = new THREE.IcosahedronBufferGeometry(5, 1); var position = geometry.getAttribute("position"); var colors = []; @@ -23,7 +24,111 @@ function disposeArray() { geometry.addAttribute("color", new THREE.Float32BufferAttribute(colors, 3).onUpload(disposeArray)); var material = new THREE.MeshBasicMaterial({ vertexColors: THREE.FaceColors }); var sphere = new THREE.Mesh(geometry, material); -scene.add(sphere); +// scene.add(sphere); + +var polyhedronMesh = new THREE.Object3D(); +var faces; + +function displayPolyhedron(data) +{ + scene.remove(polyhedronMesh); + polyhedronMesh = polyhedronDataToMesh(data); + scene.add(polyhedronMesh); +} + +function polyhedronDataToMesh(data) +{ + var polyhedron = new THREE.Object3D(); + + // convert vertex data to THREE.js vectors + var vertex = []; + for (var i = 0; i < data.vertex.length; i++) + vertex.push( new THREE.Vector3( data.vertex[i][0], data.vertex[i][1], data.vertex[i][2] ).multiplyScalar(100) ); + // var vertexGeometry = new THREE.SphereGeometry( 6, 12, 6 ); + // var vertexMaterial = new THREE.MeshLambertMaterial( { color: 0x222244 } ); + // var vertexSingleMesh = new THREE.Mesh( vertexGeometry ); + // var vertexAmalgam = new THREE.Geometry(); + // for (var i = 0; i < data.vertex.length; i++) + // { + // var vMesh = vertexSingleMesh.clone(); + // vMesh.position = vertex[i]; + // THREE.GeometryUtils.merge( vertexAmalgam, vMesh ); + // } + // var vertexMesh = new THREE.Mesh( vertexAmalgam, vertexMaterial ); + // polyhedron.add( vertexMesh ); + + // // convert edge data to cylinders + // var edgeMaterial = new THREE.MeshLambertMaterial( {color: 0x666666} ); + // var edgeAmalgam = new THREE.Geometry(); + // for (var i = 0; i < data.edge.length; i++) + // { + // var index0 = data.edge[i][0]; + // var index1 = data.edge[i][1]; + // var eMesh = cylinderMesh( vertex[index0], vertex[index1], edgeMaterial ); + // THREE.GeometryUtils.merge( edgeAmalgam, eMesh ); + // } + // var edgeMesh = new THREE.Mesh( edgeAmalgam, edgeMaterial ); + // polyhedron.add( edgeMesh ); + + // convert face data to a single (triangulated) geometry + var faceMaterial = new THREE.MeshBasicMaterial( { color: 0xffffff, vertexColors: THREE.FaceColors, side: THREE.FrontSide, transparent: false, opacity:0.8 } ); + var faceColors = + { + 3: new THREE.Color( 0xcc0000 ), + 4: new THREE.Color( 0x00cc00 ), + 5: new THREE.Color( 0x0000cc ), + 6: new THREE.Color( 0xcccc00 ), + 7: new THREE.Color( 0x999999 ), + 8: new THREE.Color( 0x990099 ), + 9: new THREE.Color( 0xff6600 ), + 10: new THREE.Color( 0x6666ff ) + }; + + var geometry = new THREE.Geometry(); + geometry.vertices = vertex; + var faceIndex = 0; + for (var faceNum = 0; faceNum < data.face.length; faceNum++) + { + for (var i = 0; i < data.face[faceNum].length - 2; i++) + { + geometry.faces[faceIndex] = new THREE.Face3( data.face[faceNum][0], data.face[faceNum][i+1], data.face[faceNum][i+2] ); + geometry.faces[faceIndex].color = faceColors[data.face[faceNum].length]; + faceIndex++; + } + } + + geometry.computeFaceNormals(); + geometry.computeVertexNormals(); + + var modifier = new SubdivisionModifier(5); + modifier.modify(geometry); + + for ( var i = 0; i < geometry.faces.length; i ++ ) { + var face = geometry.faces[ i ]; + for ( var j = 0; j < 3; j ++ ) { + // var vertexIndex = face[ faceIndices[ j ] ]; + // var vertex = geometry.vertices[ vertexIndex ]; + + var hue = Math.random(); + var color = new THREE.Color().setHSL( hue, 1, 0.5 ); + + face.vertexColors[ j ] = color; + } + } + + faces = new THREE.Mesh(geometry, faceMaterial); + faces.scale.multiplyScalar(1.01); + polyhedron.add(faces); + + return polyhedron; +} + +displayPolyhedron({ +"name":"Truncated Icosahedron", +"category":["Archimedean Solid"], +"vertex":[[0,0,1.021],[0.4035482,0,0.9378643],[-0.2274644,0.3333333,0.9378643],[-0.1471226,-0.375774,0.9378643],[0.579632,0.3333333,0.7715933],[0.5058321,-0.375774,0.8033483],[-0.6020514,0.2908927,0.7715933],[-0.05138057,0.6666667,0.7715933],[0.1654988,-0.6080151,0.8033483],[-0.5217096,-0.4182147,0.7715933],[0.8579998,0.2908927,0.4708062],[0.3521676,0.6666667,0.6884578],[0.7841999,-0.4182147,0.5025612],[-0.657475,0.5979962,0.5025612],[-0.749174,-0.08488134,0.6884578],[-0.3171418,0.8302373,0.5025612],[0.1035333,-0.8826969,0.5025612],[-0.5836751,-0.6928964,0.4708062],[0.8025761,0.5979962,0.2017741],[0.9602837,-0.08488134,0.3362902],[0.4899547,0.8302373,0.3362902],[0.7222343,-0.6928964,0.2017741],[-0.8600213,0.5293258,0.1503935],[-0.9517203,-0.1535518,0.3362902],[-0.1793548,0.993808,0.1503935],[0.381901,-0.9251375,0.2017741],[-0.2710537,-0.9251375,0.3362902],[-0.8494363,-0.5293258,0.2017741],[0.8494363,0.5293258,-0.2017741],[1.007144,-0.1535518,-0.06725804],[0.2241935,0.993808,0.06725804],[0.8600213,-0.5293258,-0.1503935],[-0.7222343,0.6928964,-0.2017741],[-1.007144,0.1535518,0.06725804],[-0.381901,0.9251375,-0.2017741],[0.1793548,-0.993808,-0.1503935],[-0.2241935,-0.993808,-0.06725804],[-0.8025761,-0.5979962,-0.2017741],[0.5836751,0.6928964,-0.4708062],[0.9517203,0.1535518,-0.3362902],[0.2710537,0.9251375,-0.3362902],[0.657475,-0.5979962,-0.5025612],[-0.7841999,0.4182147,-0.5025612],[-0.9602837,0.08488134,-0.3362902],[-0.1035333,0.8826969,-0.5025612],[0.3171418,-0.8302373,-0.5025612],[-0.4899547,-0.8302373,-0.3362902],[-0.8579998,-0.2908927,-0.4708062],[0.5217096,0.4182147,-0.7715933],[0.749174,0.08488134,-0.6884578],[0.6020514,-0.2908927,-0.7715933],[-0.5058321,0.375774,-0.8033483],[-0.1654988,0.6080151,-0.8033483],[0.05138057,-0.6666667,-0.7715933],[-0.3521676,-0.6666667,-0.6884578],[-0.579632,-0.3333333,-0.7715933],[0.1471226,0.375774,-0.9378643],[0.2274644,-0.3333333,-0.9378643],[-0.4035482,0,-0.9378643],[0,0,-1.021]], +"edge":[[0,3],[3,8],[8,5],[5,1],[1,0],[2,7],[7,15],[15,13],[13,6],[6,2],[4,10],[10,18],[18,20],[20,11],[11,4],[9,14],[14,23],[23,27],[27,17],[17,9],[12,21],[21,31],[31,29],[29,19],[19,12],[16,26],[26,36],[36,35],[35,25],[25,16],[22,32],[32,42],[42,43],[43,33],[33,22],[24,30],[30,40],[40,44],[44,34],[34,24],[28,39],[39,49],[49,48],[48,38],[38,28],[37,47],[47,55],[55,54],[54,46],[46,37],[41,45],[45,53],[53,57],[57,50],[50,41],[51,52],[52,56],[56,59],[59,58],[58,51],[1,4],[11,7],[2,0],[6,14],[9,3],[5,12],[19,10],[17,26],[16,8],[25,21],[13,22],[33,23],[20,30],[24,15],[29,39],[28,18],[34,32],[27,37],[46,36],[38,40],[35,45],[41,31],[43,47],[50,49],[44,52],[51,42],[54,53],[48,56],[58,55],[57,59]], +"face":[[0,3,8,5,1],[2,7,15,13,6],[4,10,18,20,11],[9,14,23,27,17],[12,21,31,29,19],[16,26,36,35,25],[22,32,42,43,33],[24,30,40,44,34],[28,39,49,48,38],[37,47,55,54,46],[41,45,53,57,50],[51,52,56,59,58],[0,1,4,11,7,2],[0,2,6,14,9,3],[1,5,12,19,10,4],[3,9,17,26,16,8],[5,8,16,25,21,12],[6,13,22,33,23,14],[7,11,20,30,24,15],[10,19,29,39,28,18],[13,15,24,34,32,22],[17,27,37,46,36,26],[18,28,38,40,30,20],[21,25,35,45,41,31],[23,33,43,47,37,27],[29,31,41,50,49,39],[32,34,44,52,51,42],[35,36,46,54,53,45],[38,48,56,52,44,40],[42,51,58,55,47,43],[48,49,50,57,59,56],[53,54,55,58,59,57]]}); var controls = new OrbitControls(camera);