Three.js r71 is showing black screen when trying t

问题:

i will enumerate what i did until now:

1. I have a file "pre.obj" converted to "pre.js" using convert_obj_three.py script
   "pre.obj" uses "pre.mtl" because it has material of image "specular.jpg"

   "pre.obj" ,"pre.mtl" and "specular.jpg" can be looked at here respectivily

   xsportfit.com/threejs/pre.obj

   xsportfit.com/threejs/pre.mtl

   xsportfit.com/threejs/specular.jpg

2. I have tried to load "pre.js" file using three.js library of this way:

   var scene = new THREE.Scene();
   var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100);
   camera.position.z = 3;
   var renderer = new THREE.WebGLRenderer();
   renderer.setSize(window.innerWidth, window.innerHeight);
   document.body.appendChild(renderer.domElement);
   var jsonLoader = new THREE.JSONLoader();
   var mesh;
   jsonLoader.load('pre.js',function (geometry, materials) {
                       var material = new THREE.MeshFaceMaterial(materials);
                       mesh = new THREE.Mesh(geometry, material);
                       scene.add(mesh);
                   }
           );
   
   var render = function () {
   requestAnimationFrame(render);
   renderer.render(scene, camera);
   };
   
   render();
   

Like you can see here http://xsportfit.com/threejs/ nothing is being showed, I am getting these warnings in console:

THREE.WebGLRenderer: OES_texture_float_linear extension not supported. three.js:11611 THREE.Loader: transparency has been renamed to opacity

Any help would be great, thanks!

回答1:

Your materials array contains an instance of MeshLambertMaterial. MeshLambertMaterial requires lights in the scene.

One option is to do this:

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

three.js r.71