使用Three.js对球体进行纹理处理;不能在智能手机上工作

Texturing a sphere with Three.js does'nt work on smartphones

本文关键字：不能 处理 智能手机 工作 纹理 js Three 使用      更新时间：2023-09-26

我在使用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);
}

我做错了什么？

如果您想查看代码的运行情况，可以访问此处。请注意，WebGLRenderer和CanvasRenderer都存在问题。

作为转发：使用两个纹理大小的幂来解决问题。

相关文章：