Three.jsを使用して表示されるBlenderのインポートされたメッシュで色を取得する問題

Question

Three.jsを使用して、ブレンダーからインポートした接着キューブを表示しようとしています。

最新バージョンのThree.jsとBlender 2.78aを使用しています。

私は私のキューブ・オブジェクトを作ることによって始め、ちょうどこのように： https://www.jonathan-petitcolas.com/2015/07/27/importing-blender-modelized-mesh-in-threejs.html しかし、私は別の/より接着されたキューブを持っています。

IはThree.jsの.jsエクスポータを使用してメッシュをエクスポートそして、Blenderの3Dオブジェクト上に作成しました。

ここにはmarmelab.jsonファイルがあります。

{ 
    "metadata":{ 
     "generator":"io_three", 
     "faces":6, 
     "type":"Geometry", 
     "version":3, 
     "materials":1, 
     "normals":6, 
     "vertices":24, 
     "uvs":1 
    }, 
    "faces":[43,8,10,12,14,0,0,1,2,3,0,0,0,0,43,16,18,20,22,0,3,0,1,2,1,1,1,1,43,9,15,19,17,0,3,0,1,2,2,2,2,2,43,1,13,21,5,0,3,0,1,2,3,3,3,3,43,3,11,23,7,0,3,0,1,2,4,4,4,4,43,2,0,4,6,0,3,0,1,2,5,5,5,5], 
    "materials":[{ 
     "DbgIndex":0, 
     "blending":"NormalBlending", 
     "opacity":1, 
     "depthWrite":true, 
     "visible":true, 
     "transparent":false, 
     "colorEmissive":[0,0,0], 
     "colorDiffuse":[0.8,0.432941,0], 
     "wireframe":false, 
     "DbgName":"01 - Default", 
     "specularCoef":11, 
     "colorSpecular":[0.18,0.18,0.18], 
     "DbgColor":15658734, 
     "depthTest":true, 
     "shading":"phong" 
    }], 
    "normals":[0,0,1,0,0,-1,0,1,-0,1,0,-0,0,-1,-0,-1,0,-0], 
    "name":"Untitled.001Geometry.1", 
    "vertices":[-0.307576,-0,-0.433258,-0.002776,-0,-0.433258,-0.307576,-0,-0.738058,-0.002776,-0,-0.738058,-0.307576,0.3048,-0.433258,-0.002776,0.3048,-0.433258,-0.307576,0.3048,-0.738058,-0.002776,0.3048,-0.738058,-0.307576,-0,-0.433258,-0.307576,-0,-0.433258,-0.307576,-0,-0.738058,-0.307576,-0,-0.738058,-0.002776,-0,-0.738058,-0.002776,-0,-0.738058,-0.002776,-0,-0.433258,-0.002776,-0,-0.433258,-0.307576,0.3048,-0.433258,-0.307576,0.3048,-0.433258,-0.002776,0.3048,-0.433258,-0.002776,0.3048,-0.433258,-0.002776,0.3048,-0.738058,-0.002776,0.3048,-0.738058,-0.307576,0.3048,-0.738058,-0.307576,0.3048,-0.738058], 
    "uvs":[[1,0,1,1,0,1,0,0]] 
} 

形状がrtainedされるブラウザでしかしメッシュ表示

var scene, camera, renderer; 

var WIDTH = window.innerWidth; 
var HEIGHT = window.innerHeight; 

var SPEED = 0.01; 

function init() { 
    scene = new THREE.Scene(); 

    initMesh(); 
    initCamera(); 
    initLights(); 
    initRenderer(); 

    document.body.appendChild(renderer.domElement); 
} 

function initCamera() { 
    camera = new THREE.PerspectiveCamera(70, WIDTH/HEIGHT, 1, 10); 
    camera.position.set(0, 3.5, 5); 
    camera.lookAt(scene.position); 
} 


function initRenderer() { 
    renderer = new THREE.WebGLRenderer({ antialias: true }); 
    renderer.setSize(WIDTH, HEIGHT); 
} 

function initLights() { 
    var light = new THREE.AmbientLight(0xffffff); 
    scene.add(light); 
} 

var mesh = null; 
function initMesh() { 
    var loader = new THREE.JSONLoader(); 
    loader.load('./marmelab.json', function(geometry, materials) { 
     mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials)); 
     mesh.scale.x = mesh.scale.y = mesh.scale.z = 0.75; 
     mesh.translation = THREE.GeometryUtils.center(geometry); 
     scene.add(mesh); 
    }); 
} 

function rotateMesh() { 
    if (!mesh) { 
     return; 
    } 

    mesh.rotation.x -= SPEED * 2; 
    mesh.rotation.y -= SPEED; 
    mesh.rotation.z -= SPEED * 3; 
} 

function render() { 
    requestAnimationFrame(render); 
    rotateMesh(); 
    renderer.render(scene, camera); 
} 

init(); 
render(); 

をロードするためのJavaScript。色は白です。

私はここで何が欠けていますか？

ありがとうございます。

Answer 1

EDIT

私はthree.jsの最新バージョンでPlunkerを更新し、それが今、上記のあなたの未編集のJSONで動作します - http://plnkr.co/edit/RwkgzrvfqzYlWtShhpjt?p=preview

も成功自分でテストし、より複雑な、モデル - http://plnkr.co/edit/SWXv1GyKIGryORiNYlgx?p=preview

この問題は、古いバージョンのthree.js。私はもともとあなたがリンクしたウェブサイトによって提供されるバージョンを使ってテストしました。私はあなたが同じ結果を与えたかもしれないと思う。

リビジョン70のどこかで、輸出者はcolorAmbientプロパティをエクスポートしなくなり、古いバージョンのThree.jsが必要になりました。