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

我想添加纹理到我的3D狗JSON模型，我从clara.io导出。我已经使用Ojectloader加载3D模型，然后尝试使用纹理加载器来加载纹理，但纹理似乎无法加载到模型上。添加纹理到json对象 - three.js

也许我的代码错了，或者是在错误的地方。我试图看看人们如何做到这一点但没有得到好运的其他例子。正如我所说的问题是纹理似乎不会将图像加载到模型上。此外，在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>

来源

2016-12-23 shaneo

MeshNormalMaterial可能不是您想要的材料类型。
尝试MeshBasicMaterial或MeshPhongMaterial。 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类搜索示例。

来源

2016-12-23 19:38:46 2pha

你好，谢谢你的回复。我正在试验的材料。但是，我尝试了两种方法，没有任何东西对模型产生影响。 – shaneo

，因为模型具有默认材质，您在纹理加载器回调中创建的材质永远不会添加到您的模型中 – 2pha

我刚刚使用了纹理加载器文档中的示例，我将如何去做。 – shaneo

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

回答

相关问题