我有一个obj文件,我想尝试使用Three.js加载。我一直试图从网上获得尽可能多的关于如何实现这一点的信息,我的研究已经引导我使用了下面的脚本,但我看到的只是一个没有错误信息的黑色屏幕。
实际上,控制台中唯一的输出是来自LoaderManager,它似乎在说,成功加载的对象。(见下文:)
LoadingManager输出:
THREE.WebGLRenderer 68 three.min.js:520
Loading: skin.jpg 1 2 app.html:42
Loading: ucd.obj 2 2 app.html:42这是我的app.html文件:
//Variables
var container, stats;
var camera, scene, renderer;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth/2;
var windowHalfY = window.innerHeight/2;
init();
animate();
//Initialisation
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("Loading: " + item, loaded, total );
};
var texture = new THREE.Texture();
var loader = new THREE.ImageLoader(manager);
loader.load('skin.jpg', function(image){
texture.image = image;
texture.needsUpdate = true;
});
//Model
var loader = new THREE.OBJLoader(manager);
loader.load('ucd.obj', function(object){
object.traverse(function(child){
if(child instanceof THREE.Mesh){
child.material.map = texture;
}
});
object.position.y = -80;
scene.add(object);
});
//Renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
//Event Listeners
document.addEventListener('mousemove', onDocumentMouseMove, false);
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize(){
windowHalfX = window.innerWidth/2;
windowHalfY = window.innerHeight/2;
camera.aspect = window.innerWidth/window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function onDocumentMouseMove(event){
mouseX = (event.clientX - windowHalfX)/2;
mouseY = (event.clientY - windowHalfY)/2;
}
//Animation
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);
}基本上,我的问题是为什么上面的脚本没有将我的obj文件的轮廓输出到窗口。我很感谢你的帮助。
发布于 2014-08-13 13:04:58
如果您的屏幕是黑色的,并且您没有看到加载的模型,那么您可以尝试以下几种方法:
发布于 2014-08-30 01:23:44
你的.obj型号有多大?如果文件大小太大,它将不会在浏览器中加载。您可以尝试使用meshlab (http://meshlab.sourceforge.net/)来减少模型的文件大小。关于如何在shapeway的网站(meshlab)上这样做,有一个很好的教程。
https://stackoverflow.com/questions/25273356
复制相似问题