Compare commits
1 Commits
master
...
subdivisio
Author | SHA1 | Date | |
---|---|---|---|
496b2a58e3 |
@ -12,7 +12,8 @@
|
|||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"three": "^0.101.1",
|
"three": "^0.101.1",
|
||||||
"three-orbit-controls": "^82.1.0"
|
"three-orbit-controls": "^82.1.0",
|
||||||
|
"three-subdivision-modifier": "^1.0.5"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"file-loader": "^3.0.1",
|
"file-loader": "^3.0.1",
|
||||||
|
109
src/index.js
109
src/index.js
@ -1,11 +1,12 @@
|
|||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
|
|
||||||
var OrbitControls = require("three-orbit-controls")(THREE);
|
var OrbitControls = require("three-orbit-controls")(THREE);
|
||||||
|
var SubdivisionModifier = require("three-subdivision-modifier");
|
||||||
|
|
||||||
const scene = new THREE.Scene();
|
const scene = new THREE.Scene();
|
||||||
var camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000);
|
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 position = geometry.getAttribute("position");
|
||||||
var colors = [];
|
var colors = [];
|
||||||
@ -23,7 +24,111 @@ function disposeArray() {
|
|||||||
geometry.addAttribute("color", new THREE.Float32BufferAttribute(colors, 3).onUpload(disposeArray));
|
geometry.addAttribute("color", new THREE.Float32BufferAttribute(colors, 3).onUpload(disposeArray));
|
||||||
var material = new THREE.MeshBasicMaterial({ vertexColors: THREE.FaceColors });
|
var material = new THREE.MeshBasicMaterial({ vertexColors: THREE.FaceColors });
|
||||||
var sphere = new THREE.Mesh(geometry, material);
|
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);
|
var controls = new OrbitControls(camera);
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user