我正在尝试使用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,所以我只能看到一些东西。
看来我错过了让网格实际可见的一些关键步骤,但我不知道是什么。我试过更改我的脚本以更接近我在网上找到的几个例子,但没有任何效果。任何帮助将不胜感激。
答案 0 :(得分:2)
JSONLoader.load()
是异步调用,您可能在加载完成之前调用render()。添加render()作为加载器回调函数的最后一行,或者添加动画循环,如示例所示。