无法使用Three.js显示Blender导入的网格物体

时间:2013-07-15 03:35:21

标签: json three.js blender mesh

我正在尝试使用Three.js显示从blender导入的网格物体。具体来说,我试图显示文本图形。

我正在使用Three.js修订版58和Blender 2.67。

我开始制作文本对象,然后将其转换为Blender中的网格,因为我只能找到从Blender加载网格对象和Three.js的示例。然后我使用Three.js .js导出器导出网格。这是导出的网格(带有“...”的字段用数字填充):

test_text.json

{

"metadata" :
{
    "formatVersion" : 3.1,
    "generatedBy"   : "Blender 2.66 Exporter",
    "vertices"      : 2000,
    "faces"         : 1488,
    "normals"       : 431,
    "colors"        : 0,
    "uvs"           : [],
    "materials"     : 1,
    "morphTargets"  : 0,
    "bones"         : 0
},

"scale" : 1.000000,

"materials" : [ {
    "DbgColor" : 15658734,
    "DbgIndex" : 0,
    "DbgName" : "Material.002",
    "blending" : "NormalBlending",
    "colorAmbient" : [1.0, 0.215860515832901, 0.0],
    "colorDiffuse" : [1.0, 0.215860515832901, 0.0],
    "colorSpecular" : [0.5, 0.5, 0.5],
    "depthTest" : true,
    "depthWrite" : true,
    "shading" : "Lambert",
    "specularCoef" : 50,
    "transparency" : 1.0,
    "transparent" : false,
    "vertexColors" : false
}],

"vertices" : [ ... ],

"morphTargets" : [],

"normals" : [ ... ],

"colors" : [],

"uvs" : [],

"faces" : [ ... ],

"bones" : [],

"skinIndices" : [],

"skinWeights" : [],

"animation" : {}

}

我将从.js结尾的文件重命名为.json,因为当我不这样做时,我会在Three.js第204行收到有关意外分号的错误。

这是我的javascipt应该加载网格并显示它:

test_script.js

var canvasHeight = $('#container').height(),
    canvasWidth = $('#container').width();

var aspect = canvasWidth / canvasHeight,
    near = 0.01,
    far = 10000;    

// get the HTML element to use as the canvas
var $container = $('#container');

// create the renderer, camera, and scene
var renderer = new THREE.WebGLRenderer();
var camera = new THREE.PerspectiveCamera(
    view_angle,
    aspect,
    near,
    far );
var scene = new THREE.Scene();

renderer.setSize(width, height);

// attach the DOM elemect
$container.append(renderer.domElement);

scene.add(camera);   

var loader = new THREE.JSONLoader();

function createMesh( geometry, material ){
  var mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(
        material ) );
  mesh.position.x = 0;
  mesh.position.y = 0;
  mesh.position.z = 0;
  mesh.scale.set( 700, 700, 700);
  mesh.overdraw = true;
  scene.add( mesh );

};

loader.load( "assets/test_text.json", createMesh );

var pointLight = new THREE.PointLight(0xFFFFFF);

pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 130;

scene.add(pointLight);

camera.position.z = 300;

renderer.render(scene, camera);

我将看到的只是白色,而不是我所期望的,这是一个带有橙色3D文字的白色背景,上面写着“文字”。

我还没有找到成功将相机指向预期方向的方法,使用camera.lookAt()和camera.target的示例不起作用。但是,默认摄像机方向将显示位于(0,0,0)的球体,与我的文本应该出现的位置相同,因此摄像机方向不应该是个问题。我想强调一下,我已经能够查看设置为(0,0,0)的球体,所以我不相信这是我的一般渲染和场景设置的问题,但是有一些特殊的显示网格。

我还尝试了各种网格材质(例如MeshLambertMaterial,MeshBasicMaterial)来查看材质类型是否存在问题。

我尝试了各种mesh.scale设置,有和没有mesh.overdraw,我也尝试过设置mesh.color,所以我只能看到一些东西。

看来我错过了让网格实际可见的一些关键步骤,但我不知道是什么。我试过更改我的脚本以更接近我在网上找到的几个例子,但没有任何效果。任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:2)

JSONLoader.load()是异步调用,您可能在加载完成之前调用render()。添加render()作为加载器回调函数的最后一行,或者添加动画循环,如示例所示。