Question

我使用画布渲染器创建了一个立方体，其中r59为Three.js。立方体在不同侧面具有不同的纹理。这样就可以了。我也可以TWEEN这个立方体的位置和旋转，所以没关系。

这就是我想要做的事情： 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];

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

我应该改变什么？

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

奥利弗

Answer 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 });

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

Three.js：没有运气用r59在运行时更新立方体纹理

1 个答案: