在使用 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 但是我有 different/more 个粘立方体。

我在 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 需要它。

在使用 Three.js 显示的 Blender 导入网格中获取颜色的问题

Issue with getting colors in a Blender imported mesh to be shown using Three.js

javascript

json

blender

three.js