我正在尝试向场景添加多个纹理平面，每个纹理来自不同的远程 url 图像，并且它位于由位置数组定义的精确点上。
图像由火力基地异步调用提供。
我的问题是每次加载场景时，图像都放置在不同的位置或重复。
我做错了什么？
这是我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - effects - stereo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
background:#0000ff;
padding:0;
margin:0;
font-weight: bold;
overflow:hidden;
}
</style>
</head>
<body>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-database.js"></script>
<script src="js/three.js"></script>
<script src="js/DeviceOrientationControls.js"></script>
<script src="js/StereoEffect.js"></script>
<script src="js/Detector.js"></script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container;
var camera, scene, renderer, effect, controls;
var SCALE = 3;
var loader = new THREE.TextureLoader();
//allow cross origin loading
loader.crossOrigin = '';
var lastTweet;
var feedTwitter = [];
var feedInstagram = [];
var positions =[
[4, 0, 0],
[4, 5, -5],
[4, 5, 5],
[4, 0, -5],
[4, 0, 5],
[4, -5, -5],
[4, -5, 5],
[-3, 5, -5],
[-3, 0, -5],
[-3, -5, -5],
[-3, 5, 5],
[-3, 0, 5],
[-3, -5, 5]
]
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
asyncronous.on("value", function(snapshot){
var data = snapshot.val()
var geometry = new THREE.PlaneGeometry(1.5 * SCALE, 1 * SCALE);
var texture = loader.load(data[0]);
var material = new THREE.MeshBasicMaterial({map: texture});
var plane = new THREE.Mesh(geometry, material);
plane.position.x = positions[0][0]
plane.position.y = positions[0][1]
plane.position.z = positions[0][2]
plane.lookAt(camera.position);
scene.add(plane)
lastTweet = plane;
});
asyncronous2.on("value", function(snapshot){
var dataTweet = snapshot.val()
console.log("TWITT" + JSON.stringify(dataTweet));
for(var i = 0; i < dataTweet.length; i++){
var geometry = new THREE.PlaneGeometry(1.5 * SCALE, 1 * SCALE);
var texture = loader.load(dataTweet[i]);
var material = new THREE.MeshBasicMaterial({map: texture});
var plane = new THREE.Mesh(geometry, material);
plane.position.x = positions[i + 1][0]
plane.position.y = positions[i + 1][1]
plane.position.z = positions[i + 1][2]
plane.lookAt(camera.position);
scene.add(plane)
feedTwitter.push(plane);
}
});
asyncronous3.on("value", function(snapshot){
var dataInsta = snapshot.val()
console.log("INSTA" + JSON.stringify(dataInsta));
for(var i = 0; i < dataInsta.length; i++){
var geometry = new THREE.PlaneGeometry(1.5 * SCALE, 1 * SCALE);
var texture = loader.load(dataInsta[i]);
var material = new THREE.MeshBasicMaterial({map: texture});
var plane = new THREE.Mesh(geometry, material);
plane.position.x = positions[i + 7][0]
plane.position.y = positions[i + 7][1]
plane.position.z = positions[i + 7][2]
plane.lookAt(camera.position);
scene.add(plane)
feedInstagram.push(plane);
}
}
});
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 100000 );
/*camera.position.x= 0
camera.position.y= 0
camera.position.z= 0*/
controls = new THREE.DeviceOrientationControls( camera );
scene = new THREE.Scene();
scene.background = new THREE.CubeTextureLoader()
.setPath( 'textures/cube/demo/' )
.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );
renderer = new THREE.WebGLRenderer()
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
effect = new THREE.StereoEffect( renderer );
effect.setSize( window.innerWidth, window.innerHeight );
effect.separation = 0.6;
console.log("finish init")
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
effect.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
controls.update();
render();
}
function render() {
effect.render( scene, camera );/*
console.log("finish render")*/
}
</script>
</body>
</html>
The：
for(var i = 0; i < dataInsta.length; i++){
for(var i = 0; i < dataInsta.length; i++){
看起来很可疑...