Javascript 纹理问题和光线太弱

我尝试显示此模型：

问题是纹理不是它应该在的地方，光线异常微弱。只有当我放置10个左右的环境光时，它才会显示得很好

（在第一个屏幕截图上，我们看不到纹理。这是因为只有一个方向的灯光，如下图所示）

你能帮我吗

代码：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

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

var geometry = new THREE.BoxGeometry( 10, 10, 0.1 );
var material = new THREE.MeshBasicMaterial( { color: 0xffffff } );
var cube = new THREE.Mesh( geometry, material );

cube.position.z = -2
scene.add( cube );

var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath( 'spriteModel/' );
var url = "SpriteBottle.mtl";
mtlLoader.load( url, function( materials ) {
    materials.preload();
    var objLoader = new THREE.OBJLoader();
    objLoader.setMaterials( materials );
    objLoader.setPath( 'spriteModel/' );
    objLoader.load( 'SpriteBottle.obj', function ( object ) {
        scene.add( object );
    }, function() {}, function() {} );
});

camera.position.z = 5;
var axisHelper = new THREE.AxisHelper( 5 );
scene.add( axisHelper );
var render = function () {
    requestAnimationFrame( render );
        camera.rotation.z += 0.01;
    renderer.render(scene, camera);
};

render();

---

尝试添加环境光。“材质”对象来自mtl。如果你想改变你的外观，请编辑mtl文件。同时尝试添加环境光。“材质”对象来自mtl。如果要更改外观，请编辑mtl文件。