json - particulas - three js effects

utilizando three.js JSONLoader

Question

Simplemente no puede ver los modelos importados en la escena three.js. La geometría se ve bien, pero el modelo no se muestra sin importar qué material aplique.

Soy nuevo en WebGL, así que es difícil para mí diagnosticarlo, pero supongo que algo va mal durante la devolución de llamada de JSONLoader.

Gracias por toda la ayuda.

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 );
}

Answer 1

Pensé que esto podría ayudar a cualquiera que busque una respuesta más precisa:

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

También para ver la referencia completa del cargador, consulte aquí:

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

espero que esto ayude.

Answer 2

Usted está agregando la malla a la escena antes de que el modelo termine de cargarse.

Mueve la linea

scene.add( mesh );

en la función de devolución de llamada del cargador.

Answer 3

animate() también debe estar en la función de devolución de llamada, para eliminar los errores de la consola.