Question

我正在尝试将纹理添加到我从clara.io导出的3D Dog JSON模型中。我使用Ojectloader加载3D模型，然后尝试使用Textureloader加载纹理，但纹理似乎没有加载到模型上。

也许我的代码错了，或者是错误的地方。我试着看看人们如何做到这一点的其他例子，但没有得到太多运气。正如我所说的问题是纹理似乎并没有将图像加载到模型上。此外，Chrome中的控制台也没有错误。

如果有人可以提供任何帮助，谢谢。

 <!DOCTYPE html>
    <html lang="en">
        <head>
            <title>three.js webgl - loaders - Clara.io JSON 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>

            <script src="three.js"></script>
            <script src="Detector.js"></script>
            <script src="stats.min.js"></script>
            <script src="UnpackDepthRGBAShader.js"></script>
            <script src="ShadowMapViewer.js"></script>
            <script src="dat.gui.min.js"></script>
            <script src="OrbitControls.js"></script>

            <script>
                var container, stats;
                var camera, scene, renderer;
                var mouseX = 0, mouseY = 0;
                var windowHalfX = window.innerWidth / 2;
                var windowHalfY = window.innerHeight / 2;
                init();
                animate();
                function init() {
                    container = document.createElement( 'div' );
                    document.body.appendChild( container );
                    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
                    camera.position.z = 4;
                    // scene
                    scene = new THREE.Scene();
                    var ambient = new THREE.AmbientLight( 0x444444 );
                    scene.add( ambient );
                    var directionalLight = new THREE.DirectionalLight( 0xffeedd );
                    directionalLight.position.set( 0, 0, 1 ).normalize();
                    scene.add( directionalLight );

                    //new attempt at a texture and object loader
                    var loader = new THREE.TextureLoader();
                    loader.load("dogtexture.jpg", function ( texture ) {
                        var material = new THREE.MeshBasicMaterial({ map: texture });
                        var objectLoader = new THREE.ObjectLoader();
                        objectLoader.load( "blue-dog1.json", function( obj, texture ) {
                            obj.scale.set( .04, .04, .04);
                            scene.add( obj,texture );
                        });
                    });


                    // BEGIN Clara.io JSON loader code
                    //var objectLoader = new THREE.ObjectLoader();
                    //objectLoader.load("blue-dog.json", function ( obj ) {
                    //obj.scale.set( .045, .045, .045);
                     //scene.add( obj );
                    //});

                    //var loader = new THREE.TextureLoader();
                    //loader.load("dogtexture.jpg", function ( texture ) {
                    // do something with the texture
                    //var material = new THREE.MeshNormalMaterial( {    map:          //texture} );
                    //} );

                    // END Clara.io JSON loader code
                    renderer = new THREE.WebGLRenderer();
                    renderer.setPixelRatio( window.devicePixelRatio );
                    renderer.setSize( window.innerWidth, window.innerHeight );
                    container.appendChild( renderer.domElement );

                }

                //
                function animate() {
                    requestAnimationFrame( animate );
                    render();
                }
                function render() {
                    camera.position.x = 400;//vertical camera angle
                    camera.position.y = 300;
                    camera.position.z = 150;

                    camera.lookAt( scene.position );
                    renderer.render( scene, camera );
                }
            </script>

        </body>
    </html>

Answer 1

MeshNormalMaterial可能不是您想要的材料类型试试MeshBasicMaterial或MeshPhongMaterial。

取自here

的MeshNormalMaterial的描述

将法线向量映射到RGB颜色的材质。

向下滚动three.js docs的左侧以查看其他类型的材料。

修改..
你永远不会把材料添加到对象上..

修改..
添加一些示例代码。我会使用ObjectLoader，因为你似乎有这个工作。

// Create material for later use. var material = new THREE.MeshBasicMaterial(); // Create ObjectLoader. var objectLoader = new THREE.ObjectLoader(); // Initiate load of model objectLoader.load("blue-dog1.json", function(obj) { // The documentation for ObjectLoader says it can't load geometries.. confusing (I have never used the ObjectLoader class) // But since you say it is working, we'll run with it. // obj will be an Object3D, so we must traverse it's children and add the material (I think). obj.traverse(function(child) { if(child instanceof THREE.Mesh) { child.material = material; } } // Now the Object is loaded and the material is applied.. // Add it to the scene (maybe do this after the texture is loaded?). scene.add(obj); // Load the texture. var loader = new THREE.TextureLoader(); loader.load("dogtexture.jpg", function(texture) { // Apply texture to material. material.map = texture; // Maybe this is needed. material.needsUpdate = true; } }

此代码未经测试，可能存在一些关闭问题，但它应该让您走上正确的轨道如果你无法使用它，请尝试使用JSONLoader类搜索示例。

将纹理添加到json对象 - three.js

1 个答案: