我的模型没有用ThreeJS显示它的纹理

时间:2017-01-31 02:21:16

标签: javascript 3d three.js

我从TF3DM下载了以下模型:http://tf3dm.com/3d-model/sprite-bottle-91563.html

我正试着用threeJS在场景中显示它。

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( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

var mtlLoader = new THREE.MTLLoader();
// mtlLoader.setBaseUrl( '' );
mtlLoader.setPath( './' );
var url = "SpriteBottle.mtl";
mtlLoader.load( url, function( materials ) {

    materials.preload();

    var objLoader = new THREE.OBJLoader();
    objLoader.setMaterials( materials );
    objLoader.setPath( './' );
    objLoader.load( 'SpriteBottle.obj', function ( object ) {

        object.position.y = - 95;
        scene.add( object );

    }, function() {}, function() {} );

});

camera.position.z = 5;

var render = function () {
    requestAnimationFrame( render );

    cube.rotation.x += 0.1;
    cube.rotation.y += 0.1;

    renderer.render(scene, camera);
};

render();

使用此代码,除了多维数据集之外什么都不会出现。我有时设法显示瓶子,但没有设置纹理。

编辑:我还尝试使用python脚本将obj文件转换为JSON,然后在其上应用纹理,它显示但不在正确的位置。

我做错了什么?

0 个答案:

没有答案