Question

我是一个三个新手。 2天前开始学习。

我在SketchUp上画了一个框，导出为collada文件（.dae），加载到一个带有three.js的场景中。

现在我正在尝试使用纹理平铺对象但是我失败了。

尝试平铺此纹理：

改为：

我的代码是：

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 );
}

请帮忙......

Answer 1

好的，在我们上面的评论中讨论后，我决定添加自己的答案/解决方案。

我强烈建议您先阅读问题的评论。

问题是，导出的模型文件中没有给出/附加的UV信息。

您必须使用3d建模程序（3ds max，Maya，Blender等）自行定义或使用SketchUV插件。

three.js图像纹理呈现为颜色（加载ColladaLoader）

1 个答案: