Question

我正在尝试向场景添加多个纹理平面，每个纹理来自不同的远程网址图像，并且位于由位置数组定义的精确点上。

图像由firebase异步调用提供。

我的问题是，每次加载场景时，图像都会位于不同的位置或重复。

我做错了什么？

这是我的代码：

<!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>

Answer 1

在：

      for(var i = 0; i < dataInsta.length; i++){
          for(var i = 0; i < dataInsta.length; i++){

看起来很可疑......

奇怪的结果在Threejs上添加了多个纹理平面

1 个答案: