Javascript ThreeJS纹理在平面上未正确渲染_Javascript_Three.js

Javascript ThreeJS纹理在平面上未正确渲染

javascript three.js

Javascript ThreeJS纹理在平面上未正确渲染,javascript,three.js,Javascript,Three.js,我正在尝试在3J中使用方形草纹理对方形平面进行纹理处理。每个单独的平面应该有一个草纹理的迭代。但是，每个平面都渲染为不同的纯色。似乎出于某种原因，ThreeJS在每个单独的平面上一次渲染1个像素，而不是在每个平面上渲染整个纹理这是我的密码： <!DOCTYPE html> <html> <head> <title>Neighbor</title> <style> html, body { m

我正在尝试在3J中使用方形草纹理对方形平面进行纹理处理。每个单独的平面应该有一个草纹理的迭代。但是，每个平面都渲染为不同的纯色。似乎出于某种原因，ThreeJS在每个单独的平面上一次渲染1个像素，而不是在每个平面上渲染整个纹理

这是我的密码：

<!DOCTYPE html>
<html>
  <head>
    <title>Neighbor</title>
    <style>
      html, body { margin: 0; padding: 0; overflow: hidden; }
    </style>
  </head>
  <body>
    <script src="third_party/three.min.js"></script>
    <script>
      var scene = new THREE.Scene();

var aspect = window.innerWidth / window.innerHeight;


var camera = new THREE.PerspectiveCamera( 95, aspect, 0.1, 1000 );
//var camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 1, 1000 );        

camera.position.y = 20;
camera.position.z = 20;

var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );      

var geometry = new THREE.PlaneGeometry( 1, 1 );


// instantiate a loader
var loader = new THREE.TextureLoader();
loader.crossOrigin = true;
var material;
// load a resource
loader.load(
    // resource URL
    'grass2.png',
    // Function when resource is loaded
    function ( texture ) {
        // do something with the texture
        material = new THREE.MeshBasicMaterial( {
            map: texture
         } );
    },
    // Function called when download progresses
    function ( xhr ) {
        console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
    },
    // Function called when download errors
    function ( xhr ) {
        console.log( 'An error happened' );
    }
);

//var material = new THREE.MeshBasicMaterial( {color: 0x81D67E} );
var plane = [];
for(var j=0;j<100;j++){
for(var i=0;i<100;i++){
    plane[i] = new THREE.Mesh( geometry, material );
    plane[i].rotation.x = -(Math.PI / 2);
    plane[i].position.z = -(i * 1);
    plane[i].position.x = (j * 1);
    scene.add( plane[i] );
}
}
for(j=1;j<100;j++){
for(i=0;i<100;i++){
    plane[i] = new THREE.Mesh( geometry, material );
    plane[i].rotation.x = -(Math.PI / 2);
    plane[i].position.z = -(i * 1);
    plane[i].position.x = -(j * 1);
    scene.add( plane[i] );
}
}


var render = function () {
    requestAnimationFrame( render );

    renderer.render( scene, camera );
};

render();
    </script>
  </body>
</html>


邻居
html，正文{边距：0；填充：0；溢出：隐藏；}
var scene=new THREE.scene（）；
var aspect=window.innerWidth/window.innerHeight；
var摄像机=新的三视角摄像机（95，纵横比，0.11000）；
//var camera=新的三个正交摄影机（window.innerWidth/-2，window.innerWidth/2，window.innerHeight/2，window.innerHeight/-2，1，1000）；
摄像机位置y=20；
摄像机位置z=20；
var renderer=new THREE.WebGLRenderer（{antialas:true}）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
var几何=新的三个平面几何（1，1）；
//实例化加载程序
var loader=new THREE.TextureLoader（）；
loader.crossOrigin=true；
var材料；
//加载资源
装载机(
//资源URL
“grass2.png”，
//加载资源时的函数
功能（纹理）{
//对纹理做点什么
材料=新的三种。网状基本材料（{
贴图：纹理
} );
},
//下载过程中调用的函数
函数（xhr）{
log（（xhr.loaded/xhr.total*100）+'%loaded'）；
},
//下载错误时调用的函数
函数（xhr）{
log（'发生错误'）；
}
);
//var material=新的三个.MeshBasicMaterial（{color:0x81D67E}）；
var平面=[]；
对于（var j=0；j您应该在加载回调的外部创建材质。

例如
你为什么要制作这么多平面而不是在一个大平面上重复纹理？

例如
您的平面几何体尺寸如此之小是有原因的吗？在实施您的解决方案后，所有平面现在都是纯白色。我实施单独的平面，因为它们都需要能够单独选择。没关系，这只是Google Chrome中的跨域请求问题，在Firefo中工作十,。
// instantiate a loader
var loader = new THREE.TextureLoader();
loader.crossOrigin = true;
var material = new THREE.MeshBasicMaterial();
// load a resource
loader.load(
    // resource URL
    'grass2.png',
    // Function when resource is loaded
    function ( texture ) {
        // do something with the texture
        material.map = texture;
        material.needsUpdate = true;
    },
    // Function called when download progresses
    function ( xhr ) {
        console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
    },
    // Function called when download errors
    function ( xhr ) {
        console.log( 'An error happened' );
    }
);

texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 100, 100 );