chandlerprall / Physijs

Physics plugin for Three.js
MIT License
2.75k stars 455 forks source link

MeshFaceMaterial difficulties with Physijs and three.js R73 #259

Closed vlady2009 closed 8 years ago

vlady2009 commented 8 years ago

Using three.js R73 with downloaded physijs/ammo as at 16 Jan 2016. The following works fine in producing a "bouncing" cube' with a single material (the "scene" has been previously defined with .setGravity and a rigid plane with "0" mass etc).

        materialSad = Physijs.createMaterial(
            new THREE.MeshLambertMaterial({ map: loader.load( 'sad.png' ) }),
            .2, // medium friction
            .9 // low restitution
        );
        materialSad.map.wrapS = materialSad.map.wrapT = THREE.RepeatWrapping;
        materialSad.map.repeat.set( 1, 1 ); 
        var box_geometry = new THREE.BoxGeometry( 15, 15, 15);
        var box = new Physijs.BoxMesh(box_geometry, materialSad);
        box.collisions = 0; 
        Math.seedrandom();      
        box.position.set(Math.random() *15-(diceNumber*15),50,Math.random()*15 -(diceNumber*15));
        Math.seedrandom();          
        box.rotation.set(Math.random() * Math.PI,Math.random() * Math.PI,Math.random() * Math.PI);
        box.castShadow = true;
        box.addEventListener( 'collision', handleCollision );
        scene.add( box );           

However, when trying to use a cube with six different textures (images for each face), the cube display's with the required images on each face, but doesn't "bounce" within the scene, ie., react with "physics". The code is as follows. If necessary I can upload the full file.

var materials = [
   new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture('redNum1.png') }),
   new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture('redNum2.png') }),
   new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture('redNum3.png') }),
   new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('redNum4.png') }),
   new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('redNum5.png') }),
   new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture('redNum6.png') })
];  
materialSmilie = Physijs.createMaterial(
    new THREE.MeshFaceMaterial( materials ),
    .2, // friction
    .9 // restitution
);
var box_geometry = new THREE.BoxGeometry( 15, 15, 15);
var box = new Physijs.BoxMesh(box_geometry, materialSmilie);
box.castShadow = true;
box.addEventListener( 'collision', handleCollision );
scene.add( box );

Any advice would be appreciated.

PS: I know THREE.ImageUtils.loadTexture is being deprecated and should use THREE.TextureLoader() instead, but THREE.TextureLoader() doesn't appear to work properly in three.js R73 (only gives a solid coloured cube instead of the images on each face) let alone inconjunction with physijs.

chandlerprall commented 8 years ago

If you haven't gotten very far on your project I'd recommend trying the v2 branch - it has a slightly different API (check the example) but should work just fine with MeshFaceMaterial.

vlady2009 commented 8 years ago

@chandlerprall the v2 branch version works fine with the MeshFaceMaterial - thanks for the advise.

For what's it's worth to somebody perhaps, I've attached the test I did (based on the physijs "ball pit" example).

@chandlerprall - thanks again for maintaining this project, answering issues etc.

bounceCube.zip