three.js：如何在WebGL中渲染纹理映射 OBJ文件？

Question

three.js：如何在WebGL中渲染纹理映射 OBJ文件？

我是 Three.JS 和 WebGL 的新手。我有一个3D扫描仪，可以生成纹理映射的OBJ文件，我想创建一个简单的WebGL查看器，允许用户从任何方向查看3D模型。

我进行了网络搜索，找到了如何执行此操作的示例，并按照 将3D图形移植到网络上的说明 - WebGL简介第2部分 （< em> http://dev.opera.com/articles/view/porting-3d-graphics-to-the-web-webgl-intro-part-2/ ）由 Luz Caballero（@gerbile）创建一个页面来执行此操作。说明书写得很好，但只有在 Darryl_Lehman 在另一个StackOverflow页面上提出一些建议后，才能将材料对象添加到 loader 和 CreateScene 函数调用，我最终能够获得代码来渲染我的模型。不幸的是，修改后的代码现在将我的模型全部呈现为单色，这与包含纹理贴图的Luz Caballero的示例不同。

感谢来自 @WestLangley 和 @mddoob 的其他一些建议，我终于能够使纹理映射正常工作了。

这解决了我的问题。我包含了适合我的代码，以防其他人需要一个例子：

工作代码：

<body>
    <div>
        <h2>SoundFit 3D Model Viewer</h2>
        <!-- p>by Scott L. McGregor, SoundFit</p -->
        <!-- p>adapted from the <a href="https://github.com/mrdoob/three.js">Three.js</a> example webgl_objconvert_test.html</p -->
        <!-- p>and based on <a href="http://dev.opera.com/articles/view/porting-3d-graphics-to-the-web-webgl-intro-part-2/"> 
        Porting 3D graphics to the web — WebGL intro part 2</a> by 
        <href="http://dev.opera.com/author/dropoutwannabe">Luz Caballero.</a>
        With additional help from WestLangley and Darrel_Lehman on StackOverflow.
        </p --> 
</div>

<script src="three.js-master/build/three.js"></script>
    <script src="three.js-master/examples/js/Detector.js"></script>
    <script src="js/RequestAnimationFrame.js"></script>
    <script>
        if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

        var SCREEN_WIDTH = window.innerWidth;
        var SCREEN_HEIGHT = window.innerHeight;
        var FLOOR = 0;

        var container;

        var camera, scene;
        var webglRenderer;

        var zmesh, geometry;

        var mouseX = 0, mouseY = 0;

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

        document.addEventListener( 'mousemove', onDocumentMouseMove, false );
        init();

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

            // camera
            camera = new THREE.PerspectiveCamera( 50, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
            camera.position.z = 25;
            camera.position.y = 15;
            camera.position.x = 0;  

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

            // lights
            var ambient = new THREE.AmbientLight( 0x777777 ); // median lighting levels
            scene.add( ambient );

            // more lights
            var directionalLight = new THREE.DirectionalLight( 0xffeedd );
            directionalLight.position.set( 0, -70, 100 ).normalize();
            scene.add( directionalLight );
        }

        // renderer
        webglRenderer = new THREE.WebGLRenderer();
        webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
        webglRenderer.domElement.style.position = "relative";
        container.appendChild( webglRenderer.domElement );

        // loader
        var loader = new THREE.JSONLoader(),
        callbackModel = function(geometry, materials) { createScene( geometry, materials, 90, FLOOR, -50, 105 ) };

        loader.load( "obj/mesh.js", callbackModel );
        function createScene( geometry, materials, x, y, z, b ) {
            zmesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );

            zmesh.material.materials[ 0 ].side = THREE.DoubleSide; 
            zmesh.material.materials[ 1 ].side = THREE.DoubleSide; 
            zmesh.rotation.set( - Math.PI / 2, 0, 0 ); 

            zmesh.position.set( 0, 16, 0 );
            zmesh.scale.set( 1, 1, 1 );
            scene.add( zmesh );
        }

        animate();  

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

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

        function render() {
            zmesh.rotation.set(-mouseY/500 + 1, -mouseX/200, 0);
            webglRenderer.render( scene, camera );
        }
    </script>

</body>

three.js如何在WebGL中渲染纹理映射的OBJ文件？

three.js：如何在WebGL中渲染纹理映射 OBJ文件？

工作代码：

0 个答案: