添加紋理到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

回答

相關問題