简体   繁体   English

Three.js 加载单个 .obj 模型,如何显示顶点颜色

[英]Three.js load a single .obj model , how to show vertex colors

I am new to Three.js (3D) and have a simple question.我是 Three.js (3D) 的新手,有一个简单的问题。 I have the following code that will work properly, but I think the result lost their colors because I open the test.obj file whith 3D Buidler(WIN10), there are lots of colors on ther surface of model.我有以下代码可以正常工作,但我认为结果丢失了颜色,因为我打开了带有 3D Buidler(WIN10)的 test.obj 文件,模型表面有很多颜色。 why?为什么?

The Code守则

var loader = new THREE.OBJLoader()
loader.load( 'test.obj', function ( object ) {
    object.position.y = 0;
    scene.add( object );                
} );

I think it's vertex color, How to show it's vertex color?我认为它是顶点颜色,如何显示它的顶点颜色?

var loader = new THREE.OBJLoader2()
loader.load( 'test.obj', function ( object ) {
    object.position.y = 0;
    scene.add( object );                
} );

I have tryed OBJLoader2.js , but it doesn't work, need some settings?我已经尝试过 OBJLoader2.js ,但它不起作用,需要一些设置吗?

The result loaded by Three.js: Three.js加载的结果:

Three.js加载的结果

The result loaded by 3D Builder: 3D Builder 加载的结果:

3D Builder 加载的结果

The obj file .obj 文件

use the .mtl file along with the .obj file.将 .mtl 文件与 .obj 文件一起使用。

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 ) { };

            THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );

            //Car model
            var mtlLoader = new THREE.MTLLoader();
            mtlLoader.setPath( '../materials/car/' );
            mtlLoader.load( 'car.mtl', function( materials ) {

                materials.preload();

                var objLoader = new THREE.OBJLoader();
                objLoader.setMaterials( materials );
                objLoader.setPath( '../materials/car/' );
                objLoader.load( 'car.obj', carObject, onProgress, onError );

            });

            function carObject(object){
                object.rotation.y = 1.55;
                object.position.z = 105;
                object.position.y = 1.15;

                object.scale.x = object.scale.y = object.scale.z = 0.15;
                    //object.rotation.x = 6.5;
                    //object.position.z = 50;

                scene.add( object );
            }
            //end car model

最后我发现了:我将 OBJLoader2.js 的版本更改为 1.3.0。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM