无法理解为什么我的THREE.js对象部分透明

时间:2014-10-03 12:02:53

标签: javascript three.js

我在blender中创建了一个实体(不透明)对象,并使用three.js blender插件导出它以获取json数据。

现在,当我将它添加到three.js时,对象的透明区域,我无法理解为什么我需要它完全稳固。

对此有任何帮助。

以下是javascript代码:

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。 这是http://jsbin.com/koxicuqavejo/1/

的jsbin代码

1 个答案:

答案 0 :(得分:3)

您需要将材料设置为THREE.DoubleSide

krystal.material.side = THREE.DoubleSide;