json 개체에 텍스처 추가 - three.js

clara.io에서 내 보낸 3D Dog JSON 모델에 텍스처를 추가하려고합니다. Ojectloader를 사용하여 3D 모델을로드 한 다음 Textureloader를 사용하여 텍스처를로드하려고 시도했지만 텍스처가 모델에로드되지 않는 것 같습니다.json 개체에 텍스처 추가 - three.js

내 코드가 잘못되었거나 잘못된 위치에있을 수 있습니다. 나는 사람들이이 일을 어떻게했는지에 대한 다른 예를 보려고했지만 많은 행운을 얻지 못했습니다. 문제는 질감이 모델에 이미지를로드하지 않는 것입니다. 또한 크롬에서도 콘솔에 오류가 없습니다.

아무도 도움이 될 수 있으면 감사드립니다.

<!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의

설명 here

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

방금 textureloader 설명서의 예제를 사용했는데 어떻게됩니까? – shaneo

json 개체에 텍스처 추가 - three.js

답변

관련 문제