纹理问题和光太弱

时间:2017-01-31 05:02:04

标签: javascript 3d three.js

我尝试显示此模型:http://tf3dm.com/3d-model/sprite-bottle-91563.html

问题在于纹理不在应有的位置,光线太弱了。如果我像10 AmbientLight一样放置它,它只能显示出来。

What it looks like / What it should look like(在第一张截图中,我们看不到纹理。那是因为那里只有一个方向灯,如下所示)

你能帮帮我吗?

代码:

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

0 个答案:

没有答案