Three.js r71 在尝试加载 json 对象时显示黑屏 [英] Three.js r71 is showing black screen when trying to load json object

问题描述

我将列举到目前为止我所做的:

i will enumerate what i did until now:

1. 我使用 convert_obj_three.py 脚本将文件pre.obj"转换为pre.js"
   pre.obj"使用pre.mtl"，因为它有图像specular.jpg"的素材

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" 和 "specular.jpg" 可以分别看这里

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

xportfit.com/threejs/pre.obj

xsportfit.com/threejs/pre.obj

xsportfit.com/threejs/pre.mtl

xsportfit.com/threejs/pre.mtl

xsportfit.com/threejs/specular.jpg

xsportfit.com/threejs/specular.jpg

我尝试使用three.js库以这种方式加载pre.js"文件:

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

就像你在这里看到的 http://xsportfit.com/threejs/ 什么都没有显示，我我在控制台中收到这些警告:

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 扩展.Three.js:11611 THREE.Loader:透明度已重命名为不透明度

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!

推荐答案

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

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

一种选择是这样做:

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

three.js r.71

three.js r.71

这篇关于Three.js r71 在尝试加载 json 对象时显示黑屏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！