Question

我是three.js和WebGL的新手，所以请耐心等待我：）

使用http://mrdoob.github.com/three.js/examples/webgl_geometry_hierarchy.html作为起点，我能够将6个图像映射到立方体的每个面。然后复制此立方体，创建如下所示的效果：

http://assemblylondon.com/clients/dmsr/ss16/1/

我想要做的是拥有一定数量的x个图像（假设为12个），并将这12个图像中的每一个随机应用到每个立方体的每个面上。在对该主题进行了广泛的研究后，我不确定这是否可行，但希望进一步澄清或确认。

这是我的代码atm：

var camera, scene, renderer;

        var geometry, group;

        var mouseX = 0, mouseY = 0;

        var windowHalfX = window.innerWidth / 2;
        var windowHalfY = window.innerHeight / 2;

        document.addEventListener( 'mousemove', onDocumentMouseMove, false );

        init();
        animate();

        function init() {

            container = document.createElement( 'div' );
            document.body.appendChild( container );

            camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
            camera.position.z = 500;

            scene = new THREE.Scene();

            var geometry = new THREE.BoxGeometry( 100, 100, 100 );
            var material = new THREE.MeshFaceMaterial( [
                new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( '1.jpg' ) } ),
                new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( '2.jpg' ) } ),
                new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( '3.jpg' ) } ),
                new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( '4.jpg' ) } ),
                new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( '5.jpg' ) } ),
                new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( '6.jpg' ) } )
                ] );

            group = new THREE.Group();

            for ( var i = 0; i < 60; i ++ ) {

                var mesh = new THREE.Mesh( geometry, material );
                mesh.position.x = Math.random() * 1000 - 500;
                mesh.position.y = Math.random() * 1000 - 500;
                mesh.position.z = Math.random() * 1000 - 500;

                mesh.rotation.x = Math.random() * 2 * Math.PI;
                mesh.rotation.y = Math.random() * 2 * Math.PI;

                mesh.matrixAutoUpdate = false;
                mesh.updateMatrix();

                group.add( mesh );

            }

            scene.add( group );

            renderer = new THREE.WebGLRenderer( { alpha: true } );
            renderer.setClearColor( 0x000000, 0 );
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            renderer.sortObjects = false;

            container.appendChild( renderer.domElement );



    //

    window.addEventListener( 'resize', onWindowResize, false );

}

function onWindowResize() {

    windowHalfX = window.innerWidth / 2;
    windowHalfY = window.innerHeight / 2;

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );

}

function onDocumentMouseMove(event) {

    mouseX = ( event.clientX - windowHalfX ) * 1;
    mouseY = ( event.clientY - windowHalfY ) * 1;

}

    //

    function animate() {

        requestAnimationFrame( animate );

        render();


    }

    function render() {

        var time = Date.now() * 0.001;

        var rx = Math.sin( time * 0.7 ) * 0.5,
        ry = Math.sin( time * 0.3 ) * 0.5,
        rz = Math.sin( time * 0.2 ) * 0.5;

        camera.position.x += ( mouseX - camera.position.x ) * .05;
        camera.position.y += ( - mouseY - camera.position.y ) * .05;

        camera.lookAt( scene.position );

        group.rotation.x = rx;
        group.rotation.y = ry;
        group.rotation.z = rz;

        renderer.render( scene, camera );

    }

提前谢谢！

Answer 1

所以你只想随机化图像？

// create Array of basic image materials.  
var images = [
  new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( '1.jpg' ) } ),
  new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( '2.jpg' ) } ),
  new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( '3.jpg' ) } ),
  new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( '4.jpg' ) } ),
  new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( '5.jpg' ) } ),
  new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( '6.jpg' ) } ),
  new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( '7.jpg' ) } ),
  new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( '8.jpg' ) } )
];
group = new THREE.Group();
for ( var i = 0; i < 60; i ++ ) {
  // clone the array so we can splice some out, this way an image wont be applied twice to the same cube.
  var clone = images.splice(0);
  var newArray = [];
  for(var j = 0, j < 6, j++){
    newArray[j] = clone.splice(Math.floor(Math.random() * clone.length-1), 1);
  }
  // create material.
  var material = new THREE.MeshFaceMaterial(newArray);
  var mesh = new THREE.Mesh( geometry, material );
  mesh.position.x = Math.random() * 1000 - 500;
  mesh.position.y = Math.random() * 1000 - 500;
  mesh.position.z = Math.random() * 1000 - 500;
  mesh.rotation.x = Math.random() * 2 * Math.PI;
  mesh.rotation.y = Math.random() * 2 * Math.PI;
  mesh.matrixAutoUpdate = false;
  mesh.updateMatrix(); 
  group.add( mesh );
}
scene.add( group );

这是未经测试的，但你明白了。

Three.js将随机图像应用于一组多维数据集

1 个答案: