three particulas learn how ejemplos descargar con javascript three.js

javascript - particulas - Three.js y colladaloader



three js effects (4)

Soy nuevo en Three.JS y estoy tratando de cargar un modelo Sketchup muy simple (un solo cubo) en Three.JS a través del ColladaLoader, no aparece ningún error, pero no se muestra nada:

var renderer = new THREE.WebGLRenderer(); var loader = new THREE.ColladaLoader(); var scene = new THREE.Scene(); var camera = new THREE.Camera(); loader.load(''Test.dae'', function (result) { scene.add(result.scene); }); camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 10000 ); camera.position.set(0, 0, 5); scene.add(camera); renderer.render(scene,camera);

¿Alguien puede detectar cualquier error inmediato? Gracias


Fijo. Mientras que yo había declarado el procesador, no lo había adjuntado al documento. El siguiente código funciona:

var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 1000); var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); camera.position.set(0, 0, 4); var loader = new THREE.ColladaLoader(); loader.load("test.dae", function (result) { scene.add(result.scene); }); function render() { requestAnimationFrame(render); renderer.render(scene, camera); } render();


Necesita volver a enviar la escena después de que se cargue la collada. Algo como

loader.load(''Test.dae'', function (result) { scene.add(result.scene); renderer.render(scene,camera); });

Adicionalmente:

  • La cámara podría estar dentro de tu geometría. Las caras son unilaterales por defecto, son invisibles cuando se mira desde atrás / adentro. Podría intentar cambiar la ubicación de la cámara o el objeto y / o establecer material.side = TRREE.DoubleSide para que las caras sean visibles tanto desde el frente como desde atrás.
  • La escala del modelo puede estar muy lejos, por lo que puede ser demasiado pequeño o grande para mostrar. Pruebe diferentes posiciones de la cámara (por ejemplo, z = -1000, -100, -10, -1, 1, 10, 100, 1000) y use lookAt () para apuntar a 0,0,0 o, creo que colladaloader tiene una ajuste de escala hoy en día, no estoy seguro.
  • El cargador se coloca por defecto en la posición 0,0,0, por lo que es el centro del mundo / escena. Eso no significa necesariamente centro de la pantalla, depende de la cámara. En algunos casos, el modelo de Collada puede ser tal que el centro esté alejado de objetos visibles, por lo que cuando se coloca en la escena puede ser efectivamente "descentrado". Sin embargo, eso es bastante improbable.
  • No tienes luces en la escena.

loader.load(''test.dae'', function colladaReady(collada) { localObject = collada.scene; localObject.scale.x = localObject.scale.y = localObject.scale.z = 2; localObject.updateMatrix(); scene.add(localObject);

Creo que necesita agregar el objeto en la escena de la collada, o puede haber un problema con la escala del objeto que está agregando, escalarlo y luego actualizar la matriz del objeto.


Si todavía tienes problemas, es posible que algunas versiones de IE te impidan descargar archivos locales (tu Test.dae) por lo que puede valer la pena probarlo usando Firefox o poner tu código en un servidor.