Question

我正在尝试使用Three.js创建一个非常逼真的场景。到目前为止，我已经实现了鼠标控件，从Maya加载模型，我开始应用纹理。然而，代码可以正常工作，因为在下面的图像中可以看到纹理没有像人们期望的那样填充框。我假设问题是因为模型的每个面都是单独填充的，当我在线框模式下显示模型时，这种情况发生在我身上。

我的紫外线值如下所示：

[[0.375,0,0.625,0,0.375,0.25,0.625,0.25,0.375,0.5,0.625,0.5,0.375,0.75,0.625,0.75,0.375,1,0.625,1,0.875,0,0.875 ，0.25,0.125,0,0.125,0.25]

function init() {

        // renderer

        renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
        renderer.setSize(window.innerWidth, window.innerHeight);

        container = document.getElementById('container');
        container.appendChild(renderer.domElement);

        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 10000 );
        camera.position.z = 5;

        cameraControls = new THREE.TrackballControls(camera, renderer.domElement);
        cameraControls.target.set(0, 0, 0);

        scene = new THREE.Scene();

        light = new THREE.AmbientLight( 0xffffff );
        scene.add( light );

        material = new THREE.MeshPhongMaterial( { 
            map: THREE.ImageUtils.loadTexture('images/box_texture.jpg') 
        } );       

        group = new THREE.Object3D();

        var loader = new THREE.JSONLoader();
        loader.load('models/cube_1.js', modelLoadedCallback);

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

}

function modelLoadedCallback(geometry) {

        mesh = new THREE.Mesh( geometry, material );
        group.add(mesh);
    //     scene.add (new THREE.Mesh (geometry,
    // new THREE.MeshBasicMaterial ({ color: 0x000000, wireframe: true })));
        scene.add (new THREE.Mesh (geometry, material));
        scene.add( group );

}

function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize( window.innerWidth, window.innerHeight );

        render();

}

function animate() {

        var delta = clock.getDelta();

        requestAnimationFrame(animate);

        cameraControls.update(delta);

        renderer.render(scene, camera);

}

Answer 1

这可能会有所帮助

var texture = THREE.ImageUtils.loadTexture('images/box_texture.jpg') ;

并添加：

texture.flipY = false;

Three.js无法正确渲染外部模型上的纹理

1 个答案: