2016-01-04 2 views
0

Эй, ребята, я попытался загрузить файл 3D OBJ с загрузчиком, и консоль говорит, что 3D-модель и текстура загружены, но на экране ничего не отображается. Я вытащил 3D-модель и текстуру из файлов three.js. Я понятия не имею, что я делаю неправильно. Вот файл почтового индекса, если это помогает любому: https://www.dropbox.com/s/mzimqhbl7vnw7or/newShoeVr.zip?dl=0Модель OBJ модели 3.Js не отображается

var container; 

var camera, scene, renderer; 

var mouseX = 0, mouseY = 0; 

var windowHalfX = window.innerWidth/2; 
var windowHalfY = window.innerHeight/2; 

init(); 
animate(); 

function init(){ 

    container = document.createElement('div'); 
    document.body.appendChild(container); 

    camera = new THREE.PerspectiveCamera(45, window.innerWidth/ window.innerHeight, 1, 2000); 
camera.position.z = 100; 

//Scene 
scene = new THREE.Scene(); 

//Light 
var ambient = new THREE.AmbientLight(0x101030); 
scene.add(ambient); 

var directionalLight = new THREE.DirectionalLight(0xffeedd); 
directionalLight.position.set(0,0,1); 
scene.add(directionalLight); 

//Texture 
var manager = new THREE.LoadingManager(); 
manager.onProgress = function(item, loaded, total){ 
    console.log(item, loaded, total); 
}; 

var texture = new THREE.Texture(); 

var onProgress = function(xhr){ 
    if(xhr.lengthComputable){ 
     var percentComplete = xhr.loaded/xhr.total * 100; 
     console.log(Math.round(percentComplete, 2) + '% downloaded'); 
    } 
}; 

var onError = function(xhr){}; 

var loader = new THREE.ImageLoader(manager); 
loader.load('textures/brick_diffuse.jpg', function(image){ 
    texture.image = image; 
    texture.needUpdate = true; 
}); 

//Model 
var loader = new THREE.OBJLoader(manager); 
loader.load('models/tree.obj', function(object){ 
    object.traverse(function(child){ 
     if(child instanceof THREE.Mesh){ 
      child.material.map = texture; 
     } 
    }); 

    object.position.y = -80; 
    object.scale.set(5,5,5); 
    scene.add(object); 
}, onProgress, onError); 

//Model 
var loader = new THREE.OBJLoader(manager); 
loader.load('models/tree.obj', function(object){ 
    object.traverse(function(child){ 
     if(child instanceof THREE.Mesh){ 
      child.material.map = texture; 
     } 
    }); 

    //object.position.y = -80; 
    object.scale.set(5,5,5); 
    scene.add(object); 
}, onProgress, onError); 

renderer = new THREE.WebGLRenderer(); 
renderer.setPixelRatio(window.devicePixelRatio); 
renderer.setSize(window.innerWidth, window.innerHeight); 
container.appendChild(renderer.domElement); 

document.addEventListener('resize', onWindowResize, false); 

} 

function onWindowResize(){ 
    windowHalfX = window.innerWidth/2; 
    windowHalfY = window.innerHeight/2; 

    camera.aspect = window.innerWidth/window.innerHeight; 
    camera.updateProjectMatrix(); 

    renderer.setSize(window.innerWidth, window.innerHeight); 
} 

function onDocumentMouseMove(event){ 
    mouseX = (event.clientX - windowHalfX)/2; 
    mouseY = (event.clientY - windowHalfY)/2; 
} 

function animate(){ 
    requestAnimationFrame(animate); 
    render(); 
} 

function render(){ 
    camera.position.x += (mouseX - camera.position.x) * .05; 
    camera.position.y += (- mouseY - camera.position.y) * .05; 

    camera.lookAt(scene.position); 

    renderer.render(scene, camera); 
} 
+0

Где вы строите материал? – 2pha

+0

Код мудрый или программный? FYI Я исправил это как-то, не знаю, как это работает. – rikuto148

+0

Я имел в виду код мудрый, где-то вам понадобится 'material = new THREE.MeshBasicMaterial()' или аналогичный. – 2pha

ответ

1

При экспорте .obj файл из C4D убедитесь, что масштаб устанавливается в 1. Если Вы хотите более крупного объекта, либо масштабировать его в C4D или три .js. Я также предлагаю изменить ваши единицы от cm до ft.

Смежные вопросы