使用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 但是我有不同/更多胶合的立方体。

我在Blender中创建了上面的3d对象，然后使用Three.js .js导出器导出了网格。

这是 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]]
}

javascript加载网格并显示

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();

然而，在浏览器中，形状被确定;但颜色是白色的。

我在这里缺少什么？

提前非常感谢你。

Answer 1

修改

我使用最新版本的three.js更新了Plunker，它现在可以使用上面未经编辑的json - http://plnkr.co/edit/RwkgzrvfqzYlWtShhpjt?p=preview

还使用我自己的，更复杂的模型 - http://plnkr.co/edit/SWXv1GyKIGryORiNYlgx?p=preview

成功进行了测试

问题是由使用较早版本的three.js引起的。我最初使用您链接的网站提供的版本进行了测试。我怀疑你可能会在结果上做同样的事情。

在版本70的某处，他们将导出器更改为不再导出colorAmbient属性，并且Three.js的旧版本需要它。