Three.js r71 尝试加载 json 对象时显示黑屏

Question

我将列举我到目前为止所做的事情：

1. 我有一个文件“pre.obj”使用 convert_obj_three.py 脚本转换为“pre.js”
   “pre.obj”使用“pre.mtl”，因为它具有图像“specular.jpg”的材料

   “pre.obj”、“pre.mtl”和“specular.jpg”可以分别看这里

   xsportfit.com/threejs/pre.obj

   xsportfit.com/threejs/pre.mtl

   xsportfit.com/threejs/specular.jpg

2. 我曾尝试以这种方式使用three.js 库加载“pre.js”文件：

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

就像您在这里看到的 http://xsportfit.com/threejs/ 没有显示任何内容，我在控制台中收到这些警告：

THREE.WebGLRenderer：不支持 OES_texture_float_linear 扩展。 three.js:11611 THREE.Loader：透明度已重命名为不透明度

任何帮助都会很棒，谢谢！

Answer 1

您的materials 数组包含MeshLambertMaterial 的一个实例。 MeshLambertMaterial 需要场景中的灯光。

一种选择是这样做：

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

three.js r.71