我尝试显示此模型: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();