0

我使用带有 Three.js 的 r59 的画布渲染器创建了一个立方体。立方体在不同的侧面有不同的纹理。这渲染得很好。我也可以对这个立方体的位置和旋转进行补间，所以没问题。

这就是我想要做的： A）立方体的正面有一个图像纹理。B）我将这个立方体移出相机的视野。C）我改变了立方体上的图像纹理。D）我将立方体移回其原始坐标，使其再次可见。

到目前为止，步骤 A、B 和 D 正在运行。但是当我尝试执行步骤 C 时，它停止工作。以下是相关的代码部分......

<body>
    <script src="build/three.min.js"></script>
    <script src="js/libs/tween.min.js"></script>
    <script>
        var container;
        var camera, scene, renderer, group, particle;
        var cubeMesh;
        var MatCollection = [];
        var Materials = [];

        init();
        animate();

        function init() {
            container = document.createElement( 'div' );
            document.body.appendChild( container );
            camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 3000 );
            camera.position.z = 1000;
            scene = new THREE.Scene();

            var cubeGeometry = new THREE.CubeGeometry(800, 600, 30, 8, 8, 8);
            cubeGeometry.dynamic = true;

            // creating three textures

            var neheTextureSMALL = new THREE.ImageUtils.loadTexture("test3.jpg");
            var neheTextureBIG1 = new THREE.ImageUtils.loadTexture("break01.jpg");
            var neheTextureBIG2 = new THREE.ImageUtils.loadTexture("break02.jpg");


            // putting two different sets of Materials to a material collection array

            Materials = [
                new THREE.MeshBasicMaterial({
                    map:neheTextureBIG1,
                    side: THREE.DoubleSide
                }),
                new THREE.MeshBasicMaterial({
                    map:neheTextureSMALL,
                    side: THREE.DoubleSide
                }),
                new THREE.MeshBasicMaterial({
                    map:neheTextureSMALL,
                    side: THREE.DoubleSide
                }),
                new THREE.MeshBasicMaterial({
                    map:neheTextureSMALL,
                    side: THREE.DoubleSide
                }),
                new THREE.MeshBasicMaterial({
                    map:neheTextureBIG1,
                    side: THREE.DoubleSide
                }),
                new THREE.MeshBasicMaterial({
                    map:neheTextureBIG1,
                    side: THREE.DoubleSide
                })
            ];

            MatCollection.push( Materials );

            Materials = [
                new THREE.MeshBasicMaterial({
                    map:neheTextureBIG2,
                    side: THREE.DoubleSide
                }),
                new THREE.MeshBasicMaterial({
                    map:neheTextureSMALL,
                    side: THREE.DoubleSide
                }),
                new THREE.MeshBasicMaterial({
                    map:neheTextureSMALL,
                    side: THREE.DoubleSide
                }),
                new THREE.MeshBasicMaterial({
                    map:neheTextureSMALL,
                    side: THREE.DoubleSide
                }),
                new THREE.MeshBasicMaterial({
                    map:neheTextureBIG2,
                    side: THREE.DoubleSide
                }),
                new THREE.MeshBasicMaterial({
                    map:neheTextureBIG2,
                    side: THREE.DoubleSide
                })
            ];

            MatCollection.push( Materials );
            cubeMesh = new THREE.Mesh(cubeGeometry, new THREE.MeshFaceMaterial( MatCollection[0] ));
            cubeMesh.dynamic = true;
            cubeMesh.position.set(0, 0, 500);

            // Applying the first set of materials on cubeMesh creation works good

            renderer = new THREE.CanvasRenderer();
            renderer.setClearColor(0x000000, 1);
            renderer.setSize( window.innerWidth, window.innerHeight );
            container.appendChild( renderer.domElement );
        }
        function animate() {
            requestAnimationFrame( animate );
            render();
        }
        function render() {
            TWEEN.update();
            camera.lookAt( scene.position );

            // rotate the cube - dropped value manipulation

            cubeMesh.rotation.set(xRotation, yRotation, zRotation);

            renderer.render( scene, camera );
        }

        // this is NOT WORKING

        function changetexture() {
            currentMat++;
            if (currentMat >= MatCollection.length) {
                currentMat = 0;
            }
            cubeMesh.material = MatCollection[currentMat];
            cubeMesh.material.needsUpdate = true;

        }
    </script>
</body>

在我的项目中，我正在做更多的 TWEENING（移动和旋转很多对象），我正在从那里调用 changetexture() ......

离开线路时...

            cubeMesh.material = MatCollection[currentMat];

从该功能开始，一切正常。立方体移出并返回视图，始终显示相同的纹理。

我应该改变什么？

提前感谢您分享您的专业知识。

奥利弗

4

1 回答 1

1

完毕。

我没有尝试将材质预加载到材质数组中，而是创建了一个名为 MyTextures 的单独纹理数组，并将新创建的材质（使用 MyTextures 数组中的纹理）应用到立方体网格的每一侧。

  ...
        var MyTextures = [];
  ... then, in the init() function:
            neheTextureSMALL = new THREE.ImageUtils.loadTexture("test3.jpg");
            MyTextures.push( neheTextureSMALL );

            for (var myy = 0; myy<imgNameArray.length;myy++) {
                neheTexture = new THREE.ImageUtils.loadTexture(imgNameArray[myy]);
                MyTextures.push( neheTexture );
            }

  ... then in the changetexture() function:

            cubeMesh.material.materials[0] = new THREE.MeshBasicMaterial({map: MyTextures[currentMat+1], side: THREE.DoubleSide });
            cubeMesh.material.materials[1] = new THREE.MeshBasicMaterial({map: MyTextures[0], side: THREE.DoubleSide });
            cubeMesh.material.materials[2] = new THREE.MeshBasicMaterial({map: MyTextures[0], side: THREE.DoubleSide });
            cubeMesh.material.materials[3] = new THREE.MeshBasicMaterial({map: MyTextures[0], side: THREE.DoubleSide });
            cubeMesh.material.materials[4] = new THREE.MeshBasicMaterial({map: MyTextures[currentMat+1], side: THREE.DoubleSide });
            cubeMesh.material.materials[5] = new THREE.MeshBasicMaterial({map: MyTextures[currentMat+1], side: THREE.DoubleSide });

这很好用。但它看起来不太好（图像似乎被分成许多三角形，这是另一个问题......）。:-(

于 2013-08-02T09:33:53.550 回答