使用three.js JSONLoader

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/13655092/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-09-03 18:38:41  来源:igfitidea点击:

using three.js JSONLoader

jsonimportthree.jsloader

提问by rob-gordon

Just can't see models imported into three.js scene. The geometry looks fine but the model isn't displaying no matter what material I apply to it.

就是看不到导入到three.js场景中的模型。几何看起来不错,但无论我应用什么材料,模型都没有显示。

I'm new to WebGL so it's hard for me to diagnose, but my guess is that something is going wrong during the JSONLoader callback.

我是 WebGL 的新手,所以我很难诊断,但我的猜测是在 JSONLoader 回调期间出现问题。

Thanks for all help.

感谢所有帮助。

var camera, scene, renderer, mesh, loader;

init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.z = 1000;

    scene = new THREE.Scene();

    loader = new THREE.JSONLoader();

    loader.load( "scripts/model.js", function( geometry ) {
        mesh = new THREE.Mesh( geometry, new THREE.MeshNormalMaterial() );
        mesh.scale.set( 10, 10, 10 );
        mesh.position.y = 150;
        mesh.position.x = 0;
    } );

    scene.add( mesh );

    var ambientLight = new THREE.AmbientLight(0x555555);
    scene.add(ambientLight);

    var directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set(1, 1, 1).normalize();
    scene.add(directionalLight);

    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );

    document.body.appendChild( renderer.domElement );

}

function animate() {

    requestAnimationFrame( animate );

    mesh.rotation.x += 0.05;

    renderer.render( scene, camera );
}

回答by WestLangley

You are adding the mesh to the scene before the model finishes loading.

您在模型完成加载之前将网格添加到场景中。

Move the line

移动线

scene.add( mesh );

into the loader callback function.

进入加载器回调函数。

回答by ProllyGeek

thought this might help anyone who searches for a more accurate answer :

认为这可能有助于任何寻找更准确答案的人:

loader.onLoadComplete=function(){scene.add( mesh )} 

also for complete Loader refrence , please refer to here :

还有完整的加载程序参考,请参考这里:

https://threejs.org/docs/index.html#api/loaders/Loader

https://threejs.org/docs/index.html#api/loaders/Loader

hope this helps.

希望这可以帮助。

回答by Damjan Pavlica

animate()should also be in the callback function, to remove console errors.

animate()也应该在回调函数中,以消除控制台错误。