个人中心
gpt4 book ai didi

cross-browser - Three.js:平铺纹理、缓冲和浏览器兼容性

转载 作者：行者123 更新时间：2023-12-04 05:46:04 26 4
gpt4 key购买 nike

我正在使用 html 5 Canvas 开发一个项目。为此，我使用 three.js 库以简单橱柜的形状绘制了一些简单的立方体。我已经添加了环境照明、抗锯齿和纹理。如果一切顺利，它会渲染橱柜，您可以使用鼠标移动它。

目前的问题:

var textureMap = map: THREE.ImageUtils.loadTexture("wood1.jpg")
textureMap.wrapS = THREE.RepeatWrapping;
textureMap.wrapT = THREE.RepeatWrapping;
textureMap.repeat.x = 100;
textureMap.repeat.y = 100;
material = new THREE.MeshLambertMaterial(textureMap);
  • 纹理当前在每个表面上拉伸(stretch)。我更喜欢平铺，但似乎无法让它工作。上面的代码是我根据我在网站上找到的内容得出的最佳猜测(抱歉，无法与我当前的声誉分享更多链接)。它被注释掉了，因为它完全停止了脚本的运行。
  • 我曾经有一些滞后问题。快速搜索后，我找到了一个站点(抱歉，无法与我当前的声誉共享更多链接)，它告诉我必须在主循环中设置一个超时，并且我应该使用第二个 Canvas 进行缓冲。添加超时就像一个魅力，但我仍然对缓冲 Canvas 很好奇。我不确定如何处理这个问题，因为我正在处理渲染器和 Canvas 。我什至不知道我是否还应该使用缓冲区，因为它现在似乎工作得很好，尽管将来当我尝试一次渲染更多网格时这可能会改变。
  • 我的代码目前只为我在 Firefox 中运行。 Chrome 和 Internet Explorer 都只是显示一个空白屏幕。有什么想法我需要改变才能解决这个问题吗？
  • 当我在 Firefox 中运行代码时，橱柜起初完全是黑色的。当我(完全)移动它时，它会立即变为纹理。有任何想法吗？我可以想出一个肮脏的修复方法，在设置中将相机上下移动 1 个像素，但我宁愿不这样做。

    • 我尝试将代码上传到 jsfiddle (从 tinypic 导入 texture)但这并不顺利。当我使用外部图片时，要么我错误地导入了纹理，要么 jsfiddle 不喜欢它。但是，如果您下载纹理并将其放在与代码相同的文件夹中，您应该能够在 firefox 中打开它(仅适用于 firefox(参见问题 4))。因此，如果您想查看发生了什么:将代码复制到 .html 文件中并下载纹理。 
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Canvas demo</title>
    <script type="text/javascript" src="http://www.html5canvastutorials.com/libraries/Three.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    </head> 
    <body>  
    <script type="text/javascript">

    //three.js vars
    var camera;
    var scene;
    var renderer;
    var material;
    var directionalLight;

    //input vars
    var lastX = 0;
    var lastY = 450;
    var clickX;
    var clickY;
    var mousedown;


    function rerender(){
        //draw
        renderer.render(scene, camera); 
        //redraw after 25 ms (the 25 ms delay reduces lag)
        setTimeOut( requestAnimFrame(function(){rerender()}), 25);    
    }

    $(document).ready(function() {  
        //initialize renderer
        renderer = new THREE.WebGLRenderer({antialias : true});
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.domElement.id = "visiblecanvas";
        document.body.appendChild(renderer.domElement); 

        //camera
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
        camera.position.y = -450;
        camera.position.z = 400;
        camera.rotation.x = 45.2;

        //scene
        scene = new THREE.Scene();

        //material

        //non-working tiled texture
        /*
        var textureMap = map: THREE.ImageUtils.loadTexture("wood1.jpg")
        textureMap.wrapS = THREE.RepeatWrapping;
        textureMap.wrapT = THREE.RepeatWrapping;
        textureMap.repeat.x = 100;
        textureMap.repeat.y = 100;
        */

        //workingg stretched texture
        material = new THREE.MeshLambertMaterial({map: THREE.ImageUtils.loadTexture("wood1.jpg")});

        //the cupboard

        //cube
        var cube1 = new THREE.Mesh(new THREE.CubeGeometry(300,50,10), material);
        cube1.overdraw = true;
        scene.add(cube1);

        //cube
        var cube2 = new THREE.Mesh(new THREE.CubeGeometry(300,10,300), material);
        cube2.overdraw = true;
        cube2.position.z += 150;
        cube2.position.y += 20;
        scene.add(cube2);   

        //cube
        var cube3 = new THREE.Mesh(new THREE.CubeGeometry(10,50,300), material);
        cube3.overdraw = true;
        cube3.position.z += 150;
        cube3.position.x += 145;
        scene.add(cube3);   

        //cube
        var cube4 = new THREE.Mesh(new THREE.CubeGeometry(10,50,300), material);
        cube4.overdraw = true;
        cube4.position.z += 150;    
        cube4.position.x -= 145;
        scene.add(cube4);   

        //cube
        var cube5 = new THREE.Mesh(new THREE.CubeGeometry(300,50,10), material);
        cube5.overdraw = true;
        cube5.position.z += 300;
        scene.add(cube5);

        // add subtle ambient lighting
        var ambientLight = new THREE.AmbientLight(0x555555);
        scene.add(ambientLight);

        // add directional light source
        directionalLight = new THREE.DirectionalLight(0xffffff);
        directionalLight.position.set(1, 1, 1).normalize();
        scene.add(directionalLight);

        //mousedown event
        $('#visiblecanvas').mousedown(function(e){
          clickX = e.pageX - this.offsetLeft + lastX;    
          clickY = e.pageY - this.offsetLeft + lastY;
          mousedown = true;
        });

        //mousemove event, act if mousedown
        $('#visiblecanvas').mousemove(function(e){
            if(mousedown) {
                var xDiff = e.pageX - this.offsetLeft - clickX;
                var yDiff = e.pageY - this.offsetLeft - clickY;

                lastX = -xDiff;
                lastY = -yDiff;

                camera.position.x = lastX;
                camera.position.y = -lastY;

                rerender();
            }
            delay(5);
        });

        //mouseup event
        $('#visiblecanvas').mouseup(function(e){
          mousedown = false;
        });

        //mouseleave event (mouse leaves canvas, stop moving cupboard)
        $('#visiblecanvas').mouseleave(function(e){
          mousedown = false;
        });        
        rerender();
    });

    //request new frame
    window.requestAnimFrame = (function (callback){
            return window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function(callback){
                window.setTimeout(callback, 1000 / 60);
            };
    })();

    </script>
    </body>
    </html>

    谢谢参观!希望你能回答我的任何问题。

    最佳答案

    1) 使用 JavaScript 控制台调试代码。

    2) jsfiddle 缺少 jQuery。

    3)这一行:

    var textureMap = map: THREE.ImageUtils.loadTexture("wood1.jpg")

    一定是: 
    var textureMap = THREE.ImageUtils.loadTexture("wood1.jpg");

    见额外 map:和丢失的分号。

    4) repeat纹理参数太大。默认值为 1，重复纹理一次。尝试将该值更改为 2、3、... 等等。

    5) delay函数未定义，删除它

    6) setTimeOut函数未定义( setTimeout？，JavaScript 区分大小写)

    7) 重写 rendererer功能: 
    function rerender(){
        requestAnimFrame(rerender);

        renderer.render(scene, camera); 
    }

    看看这个: http://paulirish.com/2011/requestanimationframe-for-smart-animating/

    8) 删除对 rerender 的调用 mousemove 中的函数事件

    9) IE 和 WebGL？

    关于cross-browser - Three.js:平铺纹理、缓冲和浏览器兼容性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10674563/

    26 4 0
    文章推荐： java - FontMetrics setFont？
    文章推荐： google-app-engine - 寻址后端
    文章推荐： php - 标准表单元素，MVC 架构中代码的放置位置
    文章推荐： asp.net - 在下拉列表 "--select--"上制作第一项
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com