Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <html>
  <head>
  </head>
  <body>
      <div> Three <div>
      <div id="div"></div>
  </body>
</html>
              
            
!

CSS

              
                div {
  background: #ccc;
  height: 400px;
  width: 400px;
}
              
            
!

JS

              
                /*
NJ Namju Lee
Email: nj.namju@gmail.com
Website: www.njstudio.co.kr
Linkedin: https://www.linkedin.com/in/nj-namju-lee-926b3252/

Materials(Eng)
youtube(eng): https://www.youtube.com/channel/UCP4q3a4ogJN1-SbJclJR3Ww
Medium: https://medium.com/@nj.namju

Materials(KR)
youtube(kr): https://www.youtube.com/channel/UC3Z42uoe9C7Et39h5cLK1dw?view_as=subscriber
Daum Brunch: https://brunch.co.kr/@njnamju
  Data & Design Computaional Design : https://brunch.co.kr/@njnamju/64
Naver Blog: https://blog.naver.com/designju
*/

// Rhino Grasshopper 
// https://www.dropbox.com/s/rgbr586ihs0lkou/05%20Three%20mesh%20from%20Rhino3d.gh?dl=0

// data json:
// https://www.dropbox.com/s/6xzyl8zo9p7sf92/mesh.json?dl=0

const data = { 
  "metadata": [ 
{"name":"mesh"},
{"version": 4}, 
 {"type": "geometry"}, 
 {"generator": "GeometryExporter"} 
 ],
 "v" : [ 
[-3.710221,-12.68742,0],[-3.710221,-12.68742,10.29715],[2.659035,-12.68742,0],[2.659035,-12.68742,10.29715],[-1.587136,-12.68742,0],[0.5359498,-12.68742,0],[2.659035,-12.68742,5.148576],[-0.525593,-12.68742,10.29715],[-3.710221,-12.68742,5.148576],[2.659035,-12.68742,0],[2.659035,-12.68742,10.29715],[2.659035,-6.278077,0],[2.659035,-6.278077,10.29715],[2.659035,-12.68742,5.148576],[2.659035,-10.55097,0],[2.659035,-8.414524,0],[2.659035,-6.278077,5.148576],[2.659035,-9.482748,10.29715],[2.659035,-6.278077,0],[2.659035,-6.278077,10.29715],[-3.710221,-6.278077,0],[-3.710221,-6.278077,10.29715],[2.659035,-6.278077,5.148576],[0.5359498,-6.278077,0],[-1.587136,-6.278077,0],[-3.710221,-6.278077,5.148576],[-0.525593,-6.278077,10.29715],[-3.710221,-6.278077,0],[-3.710221,-6.278077,10.29715],[-3.710221,-12.68742,0],[-3.710221,-12.68742,10.29715],[-3.710221,-12.68742,5.148576],[-3.710221,-6.278077,5.148576],[-3.710221,-8.414524,0],[-3.710221,-10.55097,0],[-3.710221,-9.482748,10.29715],[-3.710221,-12.68742,10.29715],[-3.710221,-6.278077,10.29715],[2.659035,-12.68742,10.29715],[2.659035,-6.278077,10.29715],[-0.525593,-12.68742,10.29715],[2.659035,-9.482748,10.29715],[-0.525593,-6.278077,10.29715],[-3.710221,-9.482748,10.29715],[-4.088495,-0.594566,0],[-4.088495,-0.594566,1.956633],[6.774523,-0.594566,0],[6.774523,-0.594566,1.956633],[-1.37274,-0.594566,0],[1.343014,-0.594566,0],[4.058769,-0.594566,0],[1.343014,-0.594566,1.956633],[6.774523,-0.594566,0],[6.774523,-0.594566,1.956633],[6.774523,5.229262,0],[6.774523,5.229262,1.956633],[6.774523,1.34671,0],[6.774523,3.287986,0],[6.774523,2.317348,1.956633],[6.774523,5.229262,0],[6.774523,5.229262,1.956633],[-4.088495,5.229262,0],[-4.088495,5.229262,1.956633],[1.343014,5.229262,1.956633],[1.343014,5.229262,0],[4.058769,5.229262,0],[-1.37274,5.229262,0],[-4.088495,5.229262,0],[-4.088495,5.229262,1.956633],[-4.088495,-0.594566,0],[-4.088495,-0.594566,1.956633],[-4.088495,3.287986,0],[-4.088495,1.34671,0],[-4.088495,2.317348,1.956633],[-4.088495,-0.594566,1.956633],[-4.088495,5.229262,1.956633],[6.774523,-0.594566,1.956633],[6.774523,5.229262,1.956633],[1.343014,-0.594566,1.956633],[6.774523,2.317348,1.956633],[1.343014,5.229262,1.956633],[-4.088495,2.317348,1.956633],[-18.68096,-10.54203,0],[-18.68096,-10.54203,6.532892],[-12.29664,-10.54203,0],[-12.29664,-10.54203,6.532892],[-16.55285,-10.54203,0],[-14.42475,-10.54203,0],[-15.4888,-10.54203,6.532892],[-12.29664,-10.54203,3.266446],[-18.68096,-10.54203,3.266446],[-12.29664,-10.54203,0],[-12.29664,-10.54203,6.532892],[-12.29664,0.3112943,0],[-12.29664,0.3112943,6.532892],[-12.29664,-10.54203,3.266446],[-12.29664,-7.828701,0],[-12.29664,-5.115369,0],[-12.29664,-2.402037,0],[-12.29664,-5.115369,6.532892],[-12.29664,0.3112943,3.266446],[-12.29664,0.3112943,0],[-12.29664,0.3112943,6.532892],[-18.68096,0.3112943,0],[-18.68096,0.3112943,6.532892],[-12.29664,0.3112943,3.266446],[-14.42475,0.3112943,0],[-16.55285,0.3112943,0],[-15.4888,0.3112943,6.532892],[-18.68096,0.3112943,3.266446],[-18.68096,0.3112943,0],[-18.68096,0.3112943,6.532892],[-18.68096,-10.54203,0],[-18.68096,-10.54203,6.532892],[-18.68096,-10.54203,3.266446],[-18.68096,0.3112943,3.266446],[-18.68096,-2.402037,0],[-18.68096,-5.115369,0],[-18.68096,-7.828701,0],[-18.68096,-5.115369,6.532892],[-18.68096,-10.54203,6.532892],[-18.68096,0.3112943,6.532892],[-12.29664,-10.54203,6.532892],[-12.29664,0.3112943,6.532892],[-15.4888,-10.54203,6.532892],[-12.29664,-5.115369,6.532892],[-15.4888,0.3112943,6.532892],[-18.68096,-5.115369,6.532892],[-0.3871712,16.85632,0],[-0.3871712,16.85632,6.152751],[6.906771,16.85632,0],[6.906771,16.85632,6.152751],[2.044143,16.85632,0],[4.475457,16.85632,0],[6.906771,16.85632,3.076376],[3.2598,16.85632,6.152751],[-0.3871712,16.85632,3.076376],[6.906771,16.85632,0],[6.906771,16.85632,6.152751],[6.906771,24.81677,0],[6.906771,24.81677,6.152751],[6.906771,16.85632,3.076376],[6.906771,19.5098,0],[6.906771,22.16328,0],[6.906771,24.81677,3.076376],[6.906771,20.83654,6.152751],[6.906771,24.81677,0],[6.906771,24.81677,6.152751],[-0.3871712,24.81677,0],[-0.3871712,24.81677,6.152751],[6.906771,24.81677,3.076376],[4.475457,24.81677,0],[2.044143,24.81677,0],[-0.3871712,24.81677,3.076376],[3.2598,24.81677,6.152751],[-0.3871712,24.81677,0],[-0.3871712,24.81677,6.152751],[-0.3871712,16.85632,0],[-0.3871712,16.85632,6.152751],[-0.3871712,16.85632,3.076376],[-0.3871712,24.81677,3.076376],[-0.3871712,22.16328,0],[-0.3871712,19.5098,0],[-0.3871712,20.83654,6.152751],[-0.3871712,16.85632,6.152751],[-0.3871712,24.81677,6.152751],[6.906771,16.85632,6.152751],[6.906771,24.81677,6.152751],[3.2598,16.85632,6.152751],[6.906771,20.83654,6.152751],[3.2598,24.81677,6.152751],[-0.3871712,20.83654,6.152751],[-14.04327,12.93689,0],[-14.04327,12.93689,16.25596],[-7.217904,12.93689,0],[-7.217904,12.93689,16.25596],[-11.76815,12.93689,0],[-9.493028,12.93689,0],[-10.63059,12.93689,16.25596],[-7.217904,12.93689,8.127978],[-14.04327,12.93689,8.127978],[-7.217904,12.93689,0],[-7.217904,12.93689,16.25596],[-7.217904,18.753,0],[-7.217904,18.753,16.25596],[-7.217904,12.93689,8.127978],[-7.217904,14.87559,0],[-7.217904,16.81429,0],[-7.217904,15.84494,16.25596],[-7.217904,15.84494,8.127978],[-7.217904,15.84494,4.063989],[-7.217904,14.39092,8.127978],[-7.217904,14.39092,4.063989],[-7.217904,17.29897,8.127978],[-7.217904,17.29897,4.063989],[-7.217904,18.753,8.127978],[-7.217904,18.753,0],[-7.217904,18.753,16.25596],[-14.04327,18.753,0],[-14.04327,18.753,16.25596],[-7.217904,18.753,8.127978],[-9.493028,18.753,0],[-11.76815,18.753,0],[-10.63059,18.753,16.25596],[-14.04327,18.753,8.127978],[-14.04327,18.753,0],[-14.04327,18.753,16.25596],[-14.04327,12.93689,0],[-14.04327,12.93689,16.25596],[-14.04327,12.93689,8.127978],[-14.04327,18.753,8.127978],[-14.04327,16.81429,0],[-14.04327,14.87559,0],[-14.04327,15.84494,16.25596],[-14.04327,15.84494,8.127978],[-14.04327,15.84494,4.063989],[-14.04327,17.29897,8.127978],[-14.04327,17.29897,4.063989],[-14.04327,14.39092,8.127978],[-14.04327,14.39092,4.063989],[-14.04327,12.93689,16.25596],[-14.04327,18.753,16.25596],[-7.217904,12.93689,16.25596],[-7.217904,18.753,16.25596],[-10.63059,12.93689,16.25596],[-7.217904,15.84494,16.25596],[-10.63059,18.753,16.25596],[-14.04327,15.84494,16.25596],[-22.54915,-14.96184,0],[-22.54915,-14.96184,-1.456856],[-22.54915,8.006766,0],[-22.54915,8.006766,-1.456856],[-22.54915,30.97538,0],[-22.54915,30.97538,-1.456856],[-22.54915,-12.09077,0],[-22.54915,-9.21969,0],[-22.54915,-6.348615,0],[-22.54915,-3.477538,0],[-22.54915,-0.606462,0],[-22.54915,2.264614,0],[-22.54915,5.135691,0],[-22.54915,10.87784,0],[-22.54915,13.74892,0],[-22.54915,16.62,0],[-22.54915,19.49107,0],[-22.54915,22.36215,0],[-22.54915,25.23322,0],[-22.54915,28.1043,0],[-22.54915,25.23322,-1.456856],[-22.54915,19.49107,-1.456856],[-22.54915,13.74892,-1.456856],[-22.54915,2.264614,-1.456856],[-22.54915,-3.477538,-1.456856],[-22.54915,-9.21969,-1.456856],[-22.54915,30.97538,0],[-22.54915,30.97538,-1.456856],[-14.16856,30.97538,0],[-5.787982,30.97538,0],[-5.787982,30.97538,-1.456856],[2.592601,30.97538,0],[10.97318,30.97538,0],[10.97318,30.97538,-1.456856],[-19.75562,30.97538,0],[-16.96209,30.97538,0],[-11.37504,30.97538,0],[-8.581509,30.97538,0],[-2.994454,30.97538,0],[-0.2009263,30.97538,0],[5.386129,30.97538,0],[8.179656,30.97538,0],[5.386129,30.97538,-1.456856],[-0.2009263,30.97538,-1.456856],[-11.37504,30.97538,-1.456856],[-16.96209,30.97538,-1.456856],[10.97318,30.97538,0],[10.97318,30.97538,-1.456856],[10.97318,8.006766,0],[10.97318,8.006766,-1.456856],[10.97318,-14.96184,0],[10.97318,-14.96184,-1.456856],[10.97318,28.1043,0],[10.97318,25.23322,0],[10.97318,22.36215,0],[10.97318,19.49107,0],[10.97318,16.62,0],[10.97318,13.74892,0],[10.97318,10.87784,0],[10.97318,5.135691,0],[10.97318,2.264614,0],[10.97318,-0.606462,0],[10.97318,-3.477538,0],[10.97318,-6.348615,0],[10.97318,-9.21969,0],[10.97318,-12.09077,0],[10.97318,-9.21969,-1.456856],[10.97318,-3.477538,-1.456856],[10.97318,2.264614,-1.456856],[10.97318,13.74892,-1.456856],[10.97318,19.49107,-1.456856],[10.97318,25.23322,-1.456856],[10.97318,-14.96184,0],[10.97318,-14.96184,-1.456856],[2.592601,-14.96184,0],[-5.787982,-14.96184,0],[-5.787982,-14.96184,-1.456856],[-14.16856,-14.96184,0],[-22.54915,-14.96184,0],[-22.54915,-14.96184,-1.456856],[8.179656,-14.96184,0],[5.386129,-14.96184,0],[-0.2009263,-14.96184,0],[-2.994454,-14.96184,0],[-8.581509,-14.96184,0],[-11.37504,-14.96184,0],[-16.96209,-14.96184,0],[-19.75562,-14.96184,0],[-16.96209,-14.96184,-1.456856],[-11.37504,-14.96184,-1.456856],[-0.2009263,-14.96184,-1.456856],[5.386129,-14.96184,-1.456856],[-22.54915,-14.96184,0],[10.97318,-14.96184,0],[-22.54915,-3.477538,0],[10.97318,-3.477538,0],[-7.650333,0.3505634,0],[-18.82444,4.178665,0],[-15.09974,4.178665,0],[-11.37504,4.178665,0],[-7.650333,4.178665,0],[-22.54915,8.006766,0],[-18.82444,8.006766,0],[-15.09974,8.006766,0],[-11.37504,8.006766,0],[-7.650333,8.006766,0],[-3.92563,8.006766,0],[-0.2009263,8.006766,0],[3.523777,8.006766,0],[7.248481,8.006766,0],[10.97318,8.006766,0],[-18.82444,11.83487,0],[-15.09974,11.83487,0],[-11.37504,11.83487,0],[-7.650333,11.83487,0],[-3.92563,11.83487,0],[-0.2009263,11.83487,0],[3.523777,11.83487,0],[7.248481,11.83487,0],[-18.82444,15.66297,0],[-15.09974,15.66297,0],[-3.92563,15.66297,0],[-0.2009263,15.66297,0],[3.523777,15.66297,0],[7.248481,15.66297,0],[-22.54915,19.49107,0],[-18.82444,19.49107,0],[-15.09974,19.49107,0],[-3.92563,19.49107,0],[10.97318,19.49107,0],[-18.82444,23.31917,0],[-15.09974,23.31917,0],[-11.37504,23.31917,0],[-7.650333,23.31917,0],[-3.92563,23.31917,0],[-18.82444,27.14727,0],[-15.09974,27.14727,0],[-11.37504,27.14727,0],[-7.650333,27.14727,0],[-3.92563,27.14727,0],[-22.54915,30.97538,0],[10.97318,30.97538,0],[-3.710221,-12.68742,0],[-1.587136,-12.68742,0],[0.5359498,-12.68742,0],[2.659035,-12.68742,0],[2.659035,-10.55097,0],[2.659035,-8.414524,0],[2.659035,-6.278077,0],[0.5359498,-6.278077,0],[-1.587136,-6.278077,0],[-3.710221,-6.278077,0],[-3.710221,-8.414524,0],[-3.710221,-10.55097,0],[-4.088495,-0.594566,0],[-1.37274,-0.594566,0],[1.343014,-0.594566,0],[4.058769,-0.594566,0],[6.774523,-0.594566,0],[6.774523,1.34671,0],[6.774523,3.287986,0],[6.774523,5.229262,0],[4.058769,5.229262,0],[1.343014,5.229262,0],[-1.37274,5.229262,0],[-4.088495,5.229262,0],[-4.088495,3.287986,0],[-4.088495,1.34671,0],[-18.68096,-10.54203,0],[-16.55285,-10.54203,0],[-14.42475,-10.54203,0],[-12.29664,-10.54203,0],[-12.29664,-7.828701,0],[-12.29664,-5.115369,0],[-12.29664,-2.402037,0],[-12.29664,0.3112943,0],[-14.42475,0.3112943,0],[-16.55285,0.3112943,0],[-18.68096,0.3112943,0],[-18.68096,-2.402037,0],[-18.68096,-5.115369,0],[-18.68096,-7.828701,0],[-0.3871712,16.85632,0],[2.044143,16.85632,0],[4.475457,16.85632,0],[6.906771,16.85632,0],[6.906771,19.5098,0],[6.906771,22.16328,0],[6.906771,24.81677,0],[4.475457,24.81677,0],[2.044143,24.81677,0],[-0.3871712,24.81677,0],[-0.3871712,22.16328,0],[-0.3871712,19.5098,0],[-14.04327,12.93689,0],[-11.76815,12.93689,0],[-9.493028,12.93689,0],[-7.217904,12.93689,0],[-7.217904,14.87559,0],[-7.217904,16.81429,0],[-7.217904,18.753,0],[-9.493028,18.753,0],[-11.76815,18.753,0],[-14.04327,18.753,0],[-14.04327,16.81429,0],[-14.04327,14.87559,0],[-22.54915,-12.09077,0],[-22.54915,-9.21969,0],[-22.54915,-6.348615,0],[-22.54915,-0.606462,0],[-22.54915,2.264614,0],[-22.54915,5.135691,0],[-22.54915,10.87784,0],[-22.54915,13.74892,0],[-22.54915,16.62,0],[-22.54915,22.36215,0],[-22.54915,25.23322,0],[-22.54915,28.1043,0],[-19.75562,30.97538,0],[-16.96209,30.97538,0],[-14.16856,30.97538,0],[-11.37504,30.97538,0],[-8.581509,30.97538,0],[-5.787982,30.97538,0],[-2.994454,30.97538,0],[-0.2009263,30.97538,0],[2.592601,30.97538,0],[5.386129,30.97538,0],[8.179656,30.97538,0],[10.97318,28.1043,0],[10.97318,25.23322,0],[10.97318,22.36215,0],[10.97318,16.62,0],[10.97318,13.74892,0],[10.97318,10.87784,0],[10.97318,5.135691,0],[10.97318,2.264614,0],[10.97318,-0.606462,0],[10.97318,-6.348615,0],[10.97318,-9.21969,0],[10.97318,-12.09077,0],[8.179656,-14.96184,0],[5.386129,-14.96184,0],[2.592601,-14.96184,0],[-0.2009263,-14.96184,0],[-2.994454,-14.96184,0],[-5.787982,-14.96184,0],[-8.581509,-14.96184,0],[-11.37504,-14.96184,0],[-14.16856,-14.96184,0],[-16.96209,-14.96184,0],[-19.75562,-14.96184,0],[-18.82444,-11.13374,0],[-18.82444,-3.477538,0],[-11.37504,-11.13374,0],[-7.650333,-11.13374,0],[-11.37504,-3.477538,0],[-7.650333,-3.477538,0],[-18.82444,0.3505634,0],[-11.37504,0.3505634,0],[-0.2009263,-3.477538,0],[7.248481,-11.13374,0],[7.248481,-3.477538,0],[3.523777,-3.477538,0],[7.248481,0.3505634,0],[7.248481,4.178665,0],[7.248481,23.31917,0],[3.523777,27.14727,0],[7.248481,27.14727,0],[-22.54915,-14.96184,-1.456856],[10.97318,-14.96184,-1.456856],[-22.54915,30.97538,-1.456856],[10.97318,30.97538,-1.456856],[-22.54915,-9.21969,-1.456856],[-22.54915,-3.477538,-1.456856],[-22.54915,2.264614,-1.456856],[-22.54915,8.006766,-1.456856],[-22.54915,13.74892,-1.456856],[-22.54915,19.49107,-1.456856],[-22.54915,25.23322,-1.456856],[-5.787982,30.97538,-1.456856],[10.97318,8.006766,-1.456856],[-5.787982,8.006766,-1.456856],[-14.16856,8.006766,-1.456856],[-5.787982,-3.477538,-1.456856],[-14.16856,-3.477538,-1.456856],[-5.787982,19.49107,-1.456856],[-14.16856,19.49107,-1.456856],[-16.96209,30.97538,-1.456856],[-11.37504,30.97538,-1.456856],[-0.2009263,30.97538,-1.456856],[5.386129,30.97538,-1.456856],[10.97318,19.49107,-1.456856],[2.592601,8.006766,-1.456856],[2.592601,19.49107,-1.456856],[10.97318,25.23322,-1.456856],[10.97318,13.74892,-1.456856],[10.97318,2.264614,-1.456856],[10.97318,-3.477538,-1.456856],[10.97318,-9.21969,-1.456856],[2.592601,-3.477538,-1.456856],[5.386129,-14.96184,-1.456856],[-0.2009263,-14.96184,-1.456856],[-5.787982,-14.96184,-1.456856],[-11.37504,-14.96184,-1.456856],[-16.96209,-14.96184,-1.456856]
 ], 
 "vc" : [ 
[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100],[100,100,100]
 ] 
 , 
 "f" : [ 
[8,0,4],[8,7,1],[5,8,4],[6,5,2],[3,7,6],[6,7,8],[5,6,8],[13,9,14],[13,17,10],[15,13,14],[16,15,11],[12,17,16],[16,17,13],[15,16,13],[22,18,23],[22,26,19],[25,22,23],[25,24,20],[21,26,25],[25,26,22],[32,27,33],[32,35,28],[34,32,33],[31,34,29],[30,35,31],[31,35,32],[34,31,32],[43,36,40],[43,42,37],[41,43,40],[43,41,42],[41,39,42],[38,41,40],[45,44,48],[49,51,48],[45,48,51],[47,50,46],[50,47,51],[49,50,51],[52,56,53],[55,57,54],[57,55,58],[56,57,58],[60,59,65],[64,63,65],[60,65,63],[62,66,61],[66,62,63],[64,66,63],[67,71,68],[70,72,69],[72,70,73],[71,72,73],[81,74,78],[81,80,75],[80,81,78],[78,79,80],[79,77,80],[76,79,78],[90,82,86],[90,88,83],[87,90,86],[89,87,84],[85,88,89],[89,88,90],[87,89,90],[95,91,96],[99,92,95],[96,97,95],[97,99,95],[100,98,93],[94,99,100],[100,99,97],[98,100,97],[105,101,106],[105,108,102],[107,105,106],[109,107,103],[104,108,109],[109,108,105],[107,109,105],[115,110,116],[119,111,115],[116,117,115],[117,114,115],[114,118,112],[113,119,114],[114,119,115],[118,114,117],[125,126,127],[127,126,121],[124,127,120],[125,124,122],[125,123,126],[124,125,127],[136,128,132],[136,135,129],[133,136,132],[134,133,130],[131,135,134],[134,135,136],[133,134,136],[141,137,142],[141,145,138],[143,141,142],[144,143,139],[140,145,144],[144,145,141],[143,144,141],[150,146,151],[150,154,147],[153,150,151],[153,152,148],[149,154,153],[153,154,150],[160,155,161],[160,163,156],[162,160,161],[159,162,157],[158,163,159],[159,163,160],[162,159,160],[168,170,171],[171,170,165],[168,171,164],[169,168,166],[169,167,170],[168,169,170],[180,172,176],[180,178,173],[179,180,176],[179,177,174],[175,178,179],[179,178,180],[189,191,192],[193,189,190],[192,181,186],[190,192,186],[185,181,192],[191,182,185],[188,182,191],[192,191,185],[190,186,187],[183,194,187],[194,183,195],[193,194,195],[191,189,188],[193,188,189],[188,193,184],[195,184,193],[187,194,190],[200,196,201],[200,203,197],[202,200,201],[204,202,198],[199,203,204],[204,203,200],[202,204,200],[214,216,217],[218,214,215],[217,205,211],[215,217,211],[210,205,217],[216,206,210],[213,206,216],[217,216,210],[211,212,215],[207,219,212],[219,207,209],[218,219,209],[216,214,213],[218,213,214],[213,218,208],[209,208,218],[227,225,226],[227,226,221],[224,227,220],[225,224,222],[224,225,227],[229,228,234],[253,234,235],[252,236,237],[252,237,238],[253,235,236],[253,229,234],[252,253,236],[251,239,240],[230,231,240],[251,240,231],[238,251,252],[239,251,238],[250,241,242],[250,242,243],[249,244,245],[248,245,246],[249,243,244],[250,231,241],[249,250,243],[233,247,232],[247,233,248],[245,248,249],[247,248,246],[230,241,231],[255,254,262],[273,263,256],[272,256,264],[273,262,263],[273,255,262],[258,272,265],[256,272,273],[264,265,272],[271,266,267],[270,259,268],[270,268,269],[271,267,259],[271,258,266],[270,269,261],[259,270,271],[260,261,269],[257,266,258],[275,274,280],[299,280,281],[298,282,283],[298,283,284],[299,281,282],[299,275,280],[298,299,282],[297,285,286],[276,277,286],[297,286,277],[284,297,298],[285,297,284],[296,287,288],[296,288,289],[295,290,291],[294,291,292],[295,289,290],[296,277,287],[295,296,289],[279,293,278],[279,294,293],[291,294,295],[301,300,308],[319,309,302],[318,302,310],[319,308,309],[319,301,308],[304,318,311],[302,318,319],[310,311,318],[317,312,313],[316,305,314],[316,314,315],[317,313,305],[317,304,312],[316,315,307],[305,316,317],[306,307,315],[303,312,304],[327,324,328],[331,330,325],[332,331,326],[333,332,327],[340,339,330],[341,340,331],[342,341,332],[343,342,333],[344,343,334],[345,344,335],[346,345,336],[348,347,339],[350,349,343],[351,350,344],[352,351,345],[355,354,347],[359,358,354],[361,356,362],[364,363,358],[365,364,359],[366,365,360],[367,366,361],[479,434,320],[478,480,479],[434,479,480],[398,397,480],[480,435,434],[481,322,436],[396,480,397],[409,480,396],[480,409,481],[481,436,480],[482,477,476],[483,475,474],[475,483,482],[480,478,477],[480,482,398],[399,482,400],[483,485,484],[400,484,401],[400,482,484],[482,399,398],[483,474,370],[408,407,481],[486,437,481],[406,486,407],[438,486,325],[437,486,438],[439,438,325],[325,406,405],[404,326,405],[486,406,325],[487,403,402],[485,324,487],[324,485,382],[483,380,379],[402,401,484],[487,327,403],[403,327,326],[324,395,328],[327,487,324],[382,395,324],[333,328,393],[488,383,382],[371,370,473],[474,473,370],[372,371,472],[473,472,371],[471,373,372],[380,483,381],[488,379,378],[488,378,377],[370,381,483],[470,373,471],[470,469,489],[469,321,468],[373,470,489],[375,374,489],[469,468,489],[489,467,466],[489,468,467],[375,489,376],[374,373,489],[384,383,488],[379,488,485],[488,377,376],[491,385,384],[490,491,376],[328,394,393],[392,335,334],[336,391,390],[391,335,392],[490,386,385],[490,492,386],[465,492,490],[464,492,465],[492,387,386],[490,466,323],[493,388,387],[493,389,388],[463,493,464],[493,492,464],[337,389,493],[493,463,337],[389,337,390],[376,489,490],[330,329,439],[329,330,440],[339,441,440],[347,442,441],[340,422,348],[348,432,355],[441,339,347],[341,423,422],[424,423,341],[424,341,342],[425,424,342],[348,433,432],[349,426,425],[349,427,426],[425,342,343],[354,353,442],[353,354,443],[355,431,360],[358,444,443],[363,445,444],[446,368,445],[447,446,363],[445,363,446],[358,363,444],[364,448,447],[431,430,360],[359,355,360],[360,430,429],[365,449,448],[366,450,365],[451,450,366],[361,429,428],[391,336,335],[343,349,425],[349,410,356],[350,410,349],[356,361,428],[350,411,410],[420,362,356],[356,428,427],[411,350,351],[337,338,462],[346,462,461],[461,352,346],[352,413,412],[411,351,412],[414,494,415],[414,413,352],[460,357,352],[461,460,352],[419,362,420],[495,419,418],[495,418,417],[419,367,362],[452,451,367],[453,452,367],[454,453,495],[495,367,419],[495,417,496],[453,367,495],[454,495,455],[494,352,357],[494,459,458],[459,494,357],[496,416,494],[416,415,494],[414,352,494],[456,455,496],[457,456,496],[496,458,457],[456,457,369],[496,494,458],[455,495,496],[367,451,366],[393,334,333],[522,521,510],[521,528,512],[510,512,513],[514,510,511],[533,497,501],[533,513,532],[513,533,501],[513,502,503],[513,503,511],[504,511,503],[505,511,504],[513,512,532],[501,502,513],[512,530,531],[527,498,529],[529,530,528],[529,528,527],[528,526,527],[528,525,526],[525,528,521],[512,528,530],[515,505,506],[514,515,517],[515,506,507],[516,507,499],[516,517,515],[516,515,507],[518,514,508],[524,521,522],[521,524,509],[524,522,520],[525,521,509],[519,523,522],[523,520,522],[519,500,523],[518,519,522],[522,514,518],[505,515,511],[25,23,24],[56,58,53],[71,73,68],[153,151,152],[179,176,177],[189,192,190],[193,190,194],[214,217,215],[218,215,219],[212,219,215],[225,223,226],[258,265,257],[277,276,287],[294,292,293],[304,311,303],[331,325,326],[332,326,327],[333,327,328],[340,330,331],[341,331,332],[342,332,333],[343,333,334],[344,334,335],[345,335,336],[346,336,337],[348,339,340],[350,343,344],[351,344,345],[352,345,346],[355,347,348],[359,354,355],[364,358,359],[365,359,360],[366,360,361],[367,361,362],[409,408,481],[436,435,480],[475,482,476],[480,477,482],[483,484,482],[437,322,481],[486,481,407],[325,405,326],[487,402,484],[485,487,484],[483,379,485],[403,326,404],[395,394,328],[488,382,485],[471,372,472],[489,466,490],[488,376,491],[491,384,488],[392,334,393],[490,385,491],[465,490,323],[493,387,492],[463,338,337],[337,336,390],[330,439,325],[330,339,440],[422,433,348],[432,431,355],[341,422,340],[354,442,347],[354,358,443],[364,447,363],[360,429,361],[365,448,364],[450,449,365],[410,421,356],[420,356,421],[356,427,349],[337,462,346],[352,412,351],[417,416,496],[522,510,514],[521,512,510],[510,513,511],[514,511,515],[512,531,532],[514,517,508]
 ] 
 };



const div = document.getElementById('div');
const scene = new THREE.Scene();

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.setSize( div.clientWidth, div.clientHeight );
renderer.setClearColor( 0xffffff );
div.appendChild( renderer.domElement );

// Field of view , Aspect ratio , Near clipping pane, Far clipping pane
const camera = new THREE.PerspectiveCamera( 65, div.clientWidth / div.clientHeight, 0.1, 100);
camera.position.set(15,15,0);
camera.lookAt(new THREE.Vector3(0,0,0));
renderer.render(scene, camera);
renderer.shadowMap.enabled = true;
renderer.outputEncoding = THREE.sRGBEncoding;

const controls = new THREE.OrbitControls( camera, renderer.domElement );

const hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.6);
hemiLight.color.setHSL(0.6, 1, 0.6);
hemiLight.groundColor.setHSL(0.095, 1, 0.75);
hemiLight.position.set(0, 50, 0);
scene.add(hemiLight);

const dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
dirLight.color.setHSL( 1, 1, 1 );
dirLight.position.set( - 1, 1.75, 1 );
dirLight.position.multiplyScalar( 30 );
dirLight.castShadow = true;

const val = 10; // for quality of the shawdow in the scene
dirLight.shadow.camera.left = - val;
dirLight.shadow.camera.right = val;
dirLight.shadow.camera.top = val;
dirLight.shadow.camera.bottom = - val;

dirLight.shadow.camera.far = 100;
dirLight.shadow.bias = - 0.00001;
dirLight.shadow.mapSize.width = 2048;
dirLight.shadow.mapSize.height = 2048;
scene.add( dirLight );


// hemiLight.shadow.mapSize.width = 2048 * 2;
// hemiLight.shadow.mapSize.height = 2048 * 2;



// ................................................................................
// your code goes here

const geometry = new THREE.Geometry();
// tslint:disable-next-line:no-string-literal
for (let v of data['v']) {
  geometry.vertices.push(new THREE.Vector3(v[0], v[1], v[2]));
}
// tslint:disable-next-line:no-string-literal
for (let v of data['f']) {
  geometry.faces.push(new THREE.Face3(v[0], v[1], v[2]));
}
// tslint:disable-next-line:no-string-literal
for (let v of data['vc']) {
  geometry.colors.push(new THREE.Color(v[0], v[1], v[2]));
}

geometry.applyMatrix(new THREE.Matrix4().makeRotationX(- Math.PI / 2));
geometry.applyMatrix(new THREE.Matrix4().makeScale(0.3, 0.3, 0.3));
geometry.computeBoundingSphere();
geometry.computeVertexNormals();
geometry.computeFaceNormals();
geometry.computeBoundingBox();
const mat = new THREE.MeshLambertMaterial({ color: 0xefefef });

const mesh = new THREE.Mesh(this.geometry, mat);
mesh.castShadow = true;
mesh.receiveShadow = true;

scene.add(mesh);

const loop = () => {
  requestAnimationFrame(loop);
  controls.update();
  renderer.render(scene, camera);
}

// ................................................................................ 
loop(); // init render loop
              
            
!
999px

Console