Three.js：拼贴纹理，缓冲和浏览器兼容性

我正在使用html 5 canvas的项目。为此，我使用three.js库以简单橱柜的形式绘制一些简单的立方体。我已经添加了环境照明，消除锯齿和纹理。如果一切顺利，它会呈现橱柜，您可以使用鼠标移动它。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);

纹理目前伸过来的每个面。我更喜欢平铺，但似乎无法得到它的工作。上面的代码是我根据我在网站上找到的内容推出的最佳猜测（对不起，无法与我当前的声望共享更多链接）。它被注释掉了，因为它会停止脚本运行。
我曾经有一些滞后问题。快速搜索后，我发现一个网站（抱歉，无法与我当前的声望共享更多链接）告诉我，我必须在主循环中放置一个超时，并且我应该使用第二个画布进行缓冲。增加超时功能就像一个魅力，但我仍然对缓冲画布感到好奇。因为我正在处理渲染器和画布，所以我不确定如何处理这个问题。我甚至不知道是否应该继续使用缓冲区，因为它似乎现在工作得很好，尽管在将来我尝试渲染更多网格时，这可能会发生变化。
我的代码目前只能在Firefox中运行。 Chrome和Internet Explorer都显示空白屏幕。任何想法，我需要改变以解决这个问题？
当我在firefox中运行代码时，橱柜首先是完全黑色的。当我移动它（完全）时，它立即变为纹理。有任何想法吗？我可以想出一个肮脏的修复方法，可以使相机在设置中上下移动1个像素，但我宁愿不要。

我试着上传代码jsfiddle（进口texture从tinypic），但是，这并不那么好走。要么导入纹理错误或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>

感谢您的关注！希望你能回答我的任何问题。

来源

2012-05-20 Zypp

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？

来源

2012-05-20 17:44:11

尝试：

function rerender(){ 
    requestAnimFrame(rerender); 

    renderer.render(scene, camera); 
}

来源

2012-10-08 08:10:52 ajay

护理一些评论添加到您的代码？它如何解决OP问题？它是如何工作的？ – Yaroslav

Three.js：拼贴纹理，缓冲和浏览器兼容性

回答

相关问题