texture de l'image three.js rendue comme couleur (chargée avec ColladaLoader)

Question

Je suis un newbie three.js. J'ai commencé à apprendre il y a 2 jours.

J'ai dessiné une boîte sur SketchUp, exportée en tant que fichier collada (.dae), chargé dans une scène avec trois.js.

Maintenant, j'essaie de coller l'objet avec texture (s), mais j'ai échoué.

Essayer de tuile cette texture:

Obtenir ce lieu:

Et mon code est:

if (! Detector.webgl) Detector.addGetWebGLMessage(); 
var container, stats; 
var camera, scene, renderer, controls; 

init(); 
animate(); 

function init() { 
    camera = new THREE.PerspectiveCamera(10, window.innerWidth/window.innerHeight, 0.1, 500); 
    camera.position.set(-6,1,-3); 
    scene = new THREE.Scene(); 
    // collada 

    var loader = new THREE.ColladaLoader(); 
    loader.options.convertUpAxis = true; 
    loader.load('kutu.dae', function(collada) { 
     var object = collada.scene; 
     //object.scale.set(2, 2, 2); 
     object.position.set(.18, 0, -.70); 

     //var material = new THREE.MeshLambertMaterial({color: 0xff00ff}); 
     var texture = new THREE.TextureLoader().load("desen.jpg"); 
     texture.wrapS = texture.wrapT = THREE.RepeatWrapping; 
     texture.repeat.set(2, 2); 
     texture.minFilter = THREE.LinearFilter; 

     var material = new THREE.MeshPhongMaterial({ 
      map: texture, 
      transparent: false 
     }); 

     console.log(material); 

     object.traverse(function (child) { 

      if (child instanceof THREE.Mesh) { 
       //if(Math.random() < 0.5) 
       // child.material = material; 
       //else 
        child.material = material; 
      } 
     }); 

     scene.add(object); 
    }); 

    // 

    //var gridHelper = new THREE.GridHelper(10, 20); 
    //scene.add(gridHelper); 

    // 

    var ambientLight = new THREE.AmbientLight(0xcccccc); 
    scene.add(ambientLight); 
    var directionalLight = new THREE.DirectionalLight(0xffffff); 
    directionalLight.position.set(0, 1, -1).normalize(); 
    scene.add(directionalLight); 

    // 

    renderer = new THREE.WebGLRenderer(); 
    renderer.setPixelRatio(window.devicePixelRatio); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
    document.body.appendChild(renderer.domElement); 

    // 

    controls = new THREE.OrbitControls(camera, renderer.domElement); 
    controls.enableZoom = false; 
    controls.enablePan = false; 

    // 

    stats = new Stats(); 
    document.body.appendChild(stats.dom); 

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

function onWindowResize() { 
    camera.aspect = window.innerWidth/window.innerHeight; 
    camera.updateProjectionMatrix(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
} 
function animate() { 
    requestAnimationFrame(animate); 
    render(); 
    stats.update(); 
} 

function render() { 
    renderer.render(scene, camera); 
} 

S'il vous plaît aider ...

Answer 1

Très bien, après avoir discuté dans les commentaires ci-dessus, j'ai décidé d'ajouter ma propre réponse/solution.

Je vous recommande fortement de lire les commentaires de la question d'abord.

Le problème est qu'aucune information UV n'est fournie/jointe dans le fichier de modèle exporté.

Vous devez le définir vous-même en utilisant un programme de modélisation 3D (3ds max, Maya, Blender etc.) ou utiliser le plugin SketchUV.