首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >浏览器WebGL Three.js中未出现OBJ文件

浏览器WebGL Three.js中未出现OBJ文件
EN

Stack Overflow用户
提问于 2014-08-12 20:18:01
回答 2查看 2.7K关注 0票数 1

我有一个obj文件,我想尝试使用Three.js加载。我一直试图从网上获得尽可能多的关于如何实现这一点的信息,我的研究已经引导我使用了下面的脚本,但我看到的只是一个没有错误信息的黑色屏幕。

实际上,控制台中唯一的输出是来自LoaderManager,它似乎在说,成功加载的对象。(见下文:)

LoadingManager输出:

代码语言:javascript
运行
复制
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文件:

代码语言:javascript
运行
复制
            //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文件的轮廓输出到窗口。我很感谢你的帮助。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-08-13 13:04:58

如果您的屏幕是黑色的,并且您没有看到加载的模型,那么您可以尝试以下几种方法:

  1. 移动灯的位置。有时光线会在模型内部结束。可以使用*LightHelper()查看您的灯在哪里。
  2. 删除任何纹理赋值。有时,如果纹理加载不正确,这就是失败的地方。
  3. 如果您有纹理,请确保模型具有纹理(UV)坐标。
  4. 缩小模型。它可能太大了,相机就在里面。
  5. 把摄像机移开。通常只在一个轴(选择z轴)就够了.
  6. 计算加载模型的边界框(geometry.computeBoundingBox()或THREE.BoundingBoxHelper()),并试图找出它是否离开屏幕(通常是当其中心不在0,0,0)时。
票数 1
EN

Stack Overflow用户

发布于 2014-08-30 01:23:44

你的.obj型号有多大?如果文件大小太大,它将不会在浏览器中加载。您可以尝试使用meshlab (http://meshlab.sourceforge.net/)来减少模型的文件大小。关于如何在shapeway的网站(meshlab)上这样做,有一个很好的教程。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/25273356

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档