Question

我使用Three.js时遇到了一些麻烦。我想在球体上应用纹理（图像）。我的代码没有任何问题......直到我在智能手机上试用它。我试图用Firefox及其远程调试器来查找错误，但我没有找到问题。这是我的代码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>Test</title>
        <meta name="viewport" content="initial-scale=1.0" />
        <script src="./three.min.js"></script>
        <script src="./sphere.js"></script>
        <style>
            html, body, #container {
                margin: 0;
                overflow: hidden;
            }
        </style>
    </head>

    <body>
        <div id="container" style="width: 300px; height: 200px;"></div>

        <script>
            init();
        </script>
    </body>

</html>

和：

var renderer, scene, camera, mesh;

function init() {
    var container = document.getElementById('container');
    var width = container.offsetWidth;
    var height = container.offsetHeight;

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);
    container.appendChild(renderer.domElement);

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(90, width/height, 1, 1000);
    camera.position.set(0, 0, 300);
    scene.add(camera);

    var geometry = new THREE.SphereGeometry(200, 16, 16);

    var texture = new THREE.Texture();
    var loader = new THREE.ImageLoader();
    var f = function(img) {
        texture.needsUpdate = true;
        texture.image = img;

        var material = new THREE.MeshBasicMaterial({map: texture, overdraw: true});
        mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);
        render();
        animate();
    }
    loader.load('sphere.jpg', f);
}

function animate() {
    requestAnimationFrame(animate);
    mesh.rotation.y += 0.003;
    render();
}

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

我做错了什么？

如果您想查看代码，请执行here。请注意，问题在于WebGLRenderer和CanvasRenderer。

Answer 1

作为转贴：通过使用两种纹理大小的力量来解决问题。

用Three.js纹理球体确实可以在智能手机上使用

1 个答案: