使用Three.js对球体进行纹理处理无法在智能手机上使用

杰里米

我在使用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都存在问题。

盖伊·古德(GuyGood)

作为转贴:通过使用两个纹理大小的幂解决了该问题。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用相机在Android智能手机上进行心率监测

来自分类Dev

智能手机上的位置服务-它使用哪个物理网络?

来自分类Dev

使用libGDX访问智能手机的相机

来自分类Dev

使用JS计算智能手机的基本方向

来自分类Dev

如何使用Convertigo将jQueryMobile项目安装到智能手机中?

来自分类Dev

对Rhomobile(跨平台使用Ruby构建智能手机)有何反馈?

来自分类Dev

使用智能手机摄像头识别字母

来自分类Dev

使用Android Samsung Galaxy智能手机获取邻近细胞信息

来自分类Dev

如何使用JavaScript启用或禁用智能手机的GPS服务?

来自分类Dev

对Rhomobile(跨平台使用Ruby构建智能手机)有何反馈?

来自分类Dev

Android / WiFi Direct-如何使用智能手机查找PC并建立连接

来自分类Dev

使用智能手机作为拨号调制解调器?

来自分类Dev

使用android三星galaxy智能手机获取邻近细胞信息

来自分类Dev

如何使用Javascript发现智能手机或平板电脑的型号?

来自分类Dev

智能手机外壳中使用的磁铁会损坏设备吗?

来自分类Dev

如何使用智能手机从VirtualBox访问localhost?

来自分类Dev

如何使用智能手机作为安装媒体来安装Ubuntu?

来自分类Dev

如何使用USB电缆通过android智能手机访问dslr

来自分类Dev

使用 Android 智能手机捕捉大动作

来自分类Dev

从网页使用智能手机摄像头扫描条形码

来自分类Dev

Ionic 1 公共 api 保护只能由安卓智能手机使用

来自分类Dev

是否可以使用Tensoflow Lite /或智能手机上的任何其他框架来训练神经网络模型?

来自分类Dev

如何在Windows计算机上安装所有智能手机驱动程序以与adb一起使用

来自分类Dev

在智能手机和平板电脑中使用header()使用PHP强制下载图像

来自分类Dev

如何使用SPAN [智能手机自组织网络]框架建立网状网络?

来自分类Dev

如何使用引导程序(台式机/智能手机)切换列的位置?

来自分类Dev

使用Three.js进行纹理喷涂

来自分类Dev

适用于Android的网站:如何使用低设备像素像素比率设备:平板电脑,智能手机等?

来自分类Dev

为智能手机设计时,可以在CSS中使用表格和表格单元格显示吗?

Related 相关文章

  1. 1

    使用相机在Android智能手机上进行心率监测

  2. 2

    智能手机上的位置服务-它使用哪个物理网络?

  3. 3

    使用libGDX访问智能手机的相机

  4. 4

    使用JS计算智能手机的基本方向

  5. 5

    如何使用Convertigo将jQueryMobile项目安装到智能手机中?

  6. 6

    对Rhomobile(跨平台使用Ruby构建智能手机)有何反馈?

  7. 7

    使用智能手机摄像头识别字母

  8. 8

    使用Android Samsung Galaxy智能手机获取邻近细胞信息

  9. 9

    如何使用JavaScript启用或禁用智能手机的GPS服务?

  10. 10

    对Rhomobile(跨平台使用Ruby构建智能手机)有何反馈?

  11. 11

    Android / WiFi Direct-如何使用智能手机查找PC并建立连接

  12. 12

    使用智能手机作为拨号调制解调器?

  13. 13

    使用android三星galaxy智能手机获取邻近细胞信息

  14. 14

    如何使用Javascript发现智能手机或平板电脑的型号?

  15. 15

    智能手机外壳中使用的磁铁会损坏设备吗?

  16. 16

    如何使用智能手机从VirtualBox访问localhost?

  17. 17

    如何使用智能手机作为安装媒体来安装Ubuntu?

  18. 18

    如何使用USB电缆通过android智能手机访问dslr

  19. 19

    使用 Android 智能手机捕捉大动作

  20. 20

    从网页使用智能手机摄像头扫描条形码

  21. 21

    Ionic 1 公共 api 保护只能由安卓智能手机使用

  22. 22

    是否可以使用Tensoflow Lite /或智能手机上的任何其他框架来训练神经网络模型?

  23. 23

    如何在Windows计算机上安装所有智能手机驱动程序以与adb一起使用

  24. 24

    在智能手机和平板电脑中使用header()使用PHP强制下载图像

  25. 25

    如何使用SPAN [智能手机自组织网络]框架建立网状网络?

  26. 26

    如何使用引导程序(台式机/智能手机)切换列的位置?

  27. 27

    使用Three.js进行纹理喷涂

  28. 28

    适用于Android的网站:如何使用低设备像素像素比率设备:平板电脑,智能手机等?

  29. 29

    为智能手机设计时,可以在CSS中使用表格和表格单元格显示吗?

热门标签

归档