0

我正在尝试使用 Three.js 显示从搅拌机导入的网格。具体来说，我正在尝试显示文本图形。

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

我首先制作我的文本对象，然后在 Blender 中将其转换为网格，因为我只能找到使用 Three.js 从 Blender 加载网格对象的示例。然后我使用 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，所以我可以看到一些东西。

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

4

1 回答 1

2

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

于 2013-07-15T03:50:34.423 回答