Question

我是ThreeJS的新手并且有一个简单的问题。我有以下代码可以正常工作，但我无法为我的.obj添加颜色。它的简短之处在于我在Solidworks 2012中设计了一个游戏控制器，然后我将CAD文件导出为.stl。然后我使用MeshLab将.stl导出为.obj。现在我在ThreeJS中使用.obj并且它可以工作，但我不能为我的生活添加颜色添加到.obj。这是代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>three.js webgl - loaders - vtk loader</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style>
            body {
                font-family: Monospace;
                background-color: #000;
                color: #fff;
                margin: 0px;
                overflow: hidden;
            }
            #info {
                color: #fff;
                position: absolute;
                top: 10px;
                width: 100%;
                text-align: center;
                z-index: 100;
                display:block;
            }
            #info a, .button { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
        </style>
    </head>

    <body>
        <div id="info">
        <a href="" target="_blank">three.js</a> -
        vtk format loader test -
        model from <a href="" target="_blank">The GeorgiaTech Lagre Geometric Model Archive</a>,
        </div>

        <script src="three.min.js"></script>

        <script src="TrackballControls.js"></script>

        <script src="OBJLoader.js"></script>
        <script src="BinaryLoader.js"></script>
        <script src="Detector.js"></script>
        <script src="stats.min.js"></script>

        <script>

            if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

            var container, stats;

            var camera, controls, scene, renderer;

            var cross;

            init();
            animate();

            function init() {

                camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 1e10 );
                camera.position.z = 200;
                camera.position.y = 200;

                controls = new THREE.TrackballControls( camera );

                controls.rotateSpeed = 5.0;
                controls.zoomSpeed = 5;
                controls.panSpeed = 2;

                controls.noZoom = false;
                controls.noPan = false;

                controls.staticMoving = true;
                controls.dynamicDampingFactor = 0.3;

                scene = new THREE.Scene();

                scene.add( camera );

                // light

                var dirLight = new THREE.DirectionalLight( 0xffffff );
                dirLight.position.set( 20, 20, 100 ).normalize();

                camera.add( dirLight );
                camera.add( dirLight.target );

                // texture

                var manager = new THREE.LoadingManager();
                manager.onProgress = function ( item, loaded, total ) {

                    console.log( item, loaded, total );

                };

                var texture = new THREE.Texture();

                var loader = new THREE.ImageLoader( manager );
                loader.load( 'bigthumbnail.jpg', function ( image ) {

                    texture.image = image;
                    texture.needsUpdate = true;

                } );

                var loader = new THREE.OBJLoader()
                loader.load( 'Gamepad.obj', function ( object ) {

                    object.position.y = 0;
                    scene.add( object );                

                } );
                // renderer

                renderer = new THREE.WebGLRenderer( { antialias: false } );
                renderer.setSize( window.innerWidth, window.innerHeight );

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

                stats = new Stats();
                stats.domElement.style.position = 'absolute';
                stats.domElement.style.top = '0px';
                container.appendChild( stats.domElement );

                //

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

            }

            function onWindowResize() {

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

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

                controls.handleResize();

            }

            function animate() {

                requestAnimationFrame( animate );

                controls.update();
                renderer.render( scene, camera );

                stats.update();

            }

        </script>

    </body>
</html>

我已经浏览了threejs.org网站并查看了大多数示例。所有使用复杂颜色的示例都使用.bin文件或.js文件。所以我下载了Python 2.7.6，安装它并运行convert_obj_three.py。这会生成一个.js文件，但我不确定它的格式是否正确。不幸的是，convert_obj_three.py给我的输出太大而无法发布。我的第二个问题是哪种文件格式最适合复杂的着色，比如镀铬蓝？ .bin，.js还是可以使用.obj？如果使用.js是最好的方法，那么我如何可靠地将.obj文件转换为.js？顺便说一下，我尝试使用convert_obj_three.py创建的.js，但网页一直是空白的。似乎我无法使用THREE.JSONLoader（）加载.js。

提前致谢。

Answer 1

执行loader.load函数后，您将获得一个threejs Object3D对象。其中包含对象的网格。

因此您需要遍历它们以更改材质的颜色。代码将是这样的。

var loader = new THREE.OBJLoader()
                loader.load( 'Gamepad.obj', function ( object ) {

                   object.traverse( function ( child ) {
                             if ( child instanceof THREE.Mesh ) {
                                  child.material.ambient.setHex(0xFF0000);
                                  child.material.color.setHex(0x00FF00);
                                 }
                             } );

                    object.position.y = 0;
                    scene.add( object );                
            } );

现在，对象的材质有两个属性决定了它的颜色，正如您在代码ambient和color中看到的那样。

所以这就是说，如果在场景中你有白色AmbientLight，该对象将显示为红色（因为环境属性设置为＃FF0000）

如果对象由pointlight或directionalLight等其他类型的光照亮（如上例所示），则对象将显示为绿色（因为color设置为＃00FF00 ）。

现在是最后一种情况，如果你说场景中有一个白色AmbientLight和一个DirectionalLight，那么该对象将显示为黄色material.ambient和{{1两者都将发挥作用，红色+绿色将呈现为黄色。希望这会有所帮助。

在Three JS中为.obj添加颜色

1 个答案: