Can't understand why my THREE.js object is partly transparent

Question

I've created a solid (not transparent) object in blender and exported it with three.js blender plugin to get json data.

And now when I'm adding it to three.js there are transparent areas of the object and I can't understand why cause I need it fully solid.

Will appreciate any help with this.

Here is javascript code:

window.kristal_json =
  "metadata" :
    "formatVersion" : 3.1
    "generatedBy"   : "Blender 2.7 Exporter"
    "vertices"      : 12
    "faces"         : 30
    "normals"       : 12
    "colors"        : 0
    "uvs"           : [10]
    "materials"     : 1
    "morphTargets"  : 0
    "bones"         : 0
  "scale" : 1.000000
  "materials" : [
    "DbgColor" : 15658734
    "DbgIndex" : 0
    "DbgName" : "Mat"
    "blending" : "NormalBlending"
    "colorAmbient" : [0.1694117690535153, 0.3545098119156034, 0.6400000190734865]
    "colorDiffuse" : [0.1694117690535153, 0.3545098119156034, 0.6400000190734865]
    "colorEmissive" : [0.0, 0.0, 0.0]
    "colorSpecular" : [0.5, 0.5, 0.5]
    "depthTest" : true
    "depthWrite" : true
    "shading" : "Lambert"
    "specularCoef" : 255
    "transparency" : 1.0
    "transparent" : false
    "vertexColors" : false
  ]
  "vertices" : [-1.0049,-0.55688,0.0199999,-0.904313,0.307844,0.02,-0.147116,-0.146545,0.952514,0.371123,0.528552,0.745001,0.364565,1.01051,0.0200001,0.957999,0.476094,0.0200001,0.78775,-0.343567,0.4682,-0.209197,-1.09765,0.0199999,0.882591,-0.615694,0.0199999,-0.147116,-0.146545,-0.912514,0.371123,0.528552,-0.705001,0.78775,-0.343567,-0.4282]
  "morphTargets" : []
  "normals" : [-0.880306,-0.47438,0,0.462844,0.88641,0,-0.271249,-0.962493,0,-0.965972,0.258553,0,0.184973,0.982727,0,0.685232,0.728294,0,0.798334,-0.202094,-0.567248,0.798334,-0.202094,0.567248,0.218329,-0.76101,0.610859,0.261696,0.636799,0.725242,0.218329,-0.76101,-0.610859,0.261696,0.636799,-0.725242]
  "colors" : []
  "uvs" : [[0.256514,1,0.228616,0.038417,0,0.594628,0.666692,0.948754,1,0.302325,0.746501,0,0.357698,0.026725,1,0,1,1,0,1]]
  "faces" : [42,0,8,7,0,0,1,2,0,1,2,42,0,1,4,0,0,3,4,0,3,4,42,4,5,6,0,4,5,6,4,5,6,42,0,6,8,0,0,6,1,0,6,1,42,0,4,6,0,0,4,6,0,4,6,42,8,0,7,0,1,0,2,1,0,2,42,8,11,0,0,1,6,0,1,7,0,42,4,1,0,0,4,3,0,4,3,0,42,11,5,4,0,6,5,4,7,5,4,42,11,4,0,0,6,4,0,7,4,0,42,2,1,0,0,7,8,9,8,3,0,42,1,3,2,0,7,8,9,3,9,8,42,3,4,1,0,7,8,9,9,4,3,42,5,4,3,0,7,8,9,5,4,9,42,5,6,3,0,7,8,9,5,6,9,42,3,2,6,0,7,8,9,9,8,6,42,0,7,2,0,7,8,9,0,2,8,42,6,2,7,0,7,8,9,6,8,2,42,8,7,6,0,7,8,9,1,2,6,42,5,6,8,0,7,8,9,5,6,1,42,1,9,0,0,8,7,9,3,10,0,42,10,1,9,0,8,7,9,11,3,10,42,4,10,1,0,8,7,9,4,11,3,42,4,5,10,0,8,7,9,4,5,11,42,11,5,10,0,8,7,9,7,5,11,42,9,10,11,0,8,7,9,10,11,7,42,7,0,9,0,8,7,9,2,0,10,42,9,11,7,0,8,7,9,10,7,2,42,7,8,11,0,8,7,9,2,1,7,42,11,5,8,0,8,7,9,7,5,1]
  "bones" : []
  "skinIndices" : []
  "skinWeights" : []
  "animations" : []


initThreeJS = ->
  div = $('#canvas-scene')


  window.scene = new THREE.Scene()
  window.camera = new THREE.PerspectiveCamera(75, div.width()/div.height(), 0.1, 1000)
  camera.position.y = 2.5
  camera.position.x = 1.5

  window.renderer = new THREE.CanvasRenderer()

  renderer.setClearColor( '#F6FAFC' );
  renderer.setSize(div.width(), div.height())
  div.append(renderer.domElement)

  camera.position.z = 10

  loader = new THREE.JSONLoader(true)
  parsed = loader.parse(kristal_json)
  kristal = new THREE.Mesh( parsed.geometry, new THREE.MeshLambertMaterial( { color: 0xF5FCFE, ambient: 0xF1F9FC, emissive: 0xDDEDF7} ) )
  kristal.position.set(0,2,-1)
  kristal.scale.set(4,4,4)
  scene.add(kristal)


  window.light1 = new THREE.PointLight(0xffffff, 0.1)
  light1.position.set(-9.5, 7, 7)
  scene.add light1

  render = ->
    requestAnimationFrame render

    if kristal
      kristal.rotation.y += 0.01

    renderer.render scene, camera

  render()


$ ->
  initThreeJS()

P.S. Here is jsbin code of this http://jsbin.com/koxicuqavejo/1/

Answer 1

You need to set your material to THREE.DoubleSide

krystal.material.side = THREE.DoubleSide;