• Resolved robgillth

    (@robgillth)


    hello,
    Loving this plug-in but I have hit a snag with three.js + Physi.js. In short, I cannot get Physi.js to work – nothing shows up on the page in which it is embedded. I have tested some of Three.js and some other helper libraries and they work fine with Code Embed. Below is the code that I have been using – the simplest scene possible consisting of just a single cube. There are a couple of commented out lines that I was experimenting with – I am just learning three.js. I absolutely need some physics and from what I have seen so far physi.js seems like the best.

    
    

    <script type=”text/javascript” charset=”UTF-8″ src=”../libs/three/build/three.js”></script>
    <script type=”text/javascript” charset=”UTF-8″ src=”../libs/other/physijs/physi.js”></script>
    <script>

    Physijs.scripts.worker = ‘../libs/other/physijs/physijs_worker.js’;
    Physijs.scripts.ammo = ‘../libs/other/physijs/ammo.js’;

    var scene = new Physijs.Scene;

    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

    var renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(new THREE.Color(0x000000));
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    var cube = new Physijs.BoxMesh(new THREE.BoxGeometry(4, 4, 4),
    Physijs.createMaterial(new THREE.MeshStandardMaterial({color: 0x0000ff}), 0.4, 0.4));
    cube.castShadow = true;

    cube.position.x = -4;
    cube.position.y = 2;
    cube.position.z = 0;
    scene.add(cube);

    camera.position.x = -30;
    camera.position.y = 40;
    camera.position.z = 30;
    camera.lookAt(scene.position);

    var spotLight = new THREE.SpotLight(0xFFFFFF);
    spotLight.position.set(-40, 40, -15);
    spotLight.castShadow = true;
    spotLight.shadow.mapSize = new THREE.Vector2(1024, 1024);
    spotLight.shadow.camera.far = 130;
    spotLight.shadow.camera.near = 40;

    scene.add(spotLight);

    var ambientLight = new THREE.AmbientLight(0x353535);
    scene.add(ambientLight);

    //document.body.appendChild(renderer.domElement);
    scene.simulate();
    //requestAnimationFrame(render);

    render();
    function render() {
    requestAnimationFrame(render);
    renderer.render(scene, camera);
    scene.simulate(undefined, 1);
    }

    </script>`

    Thank you for this excellent plug-in!

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter robgillth

    (@robgillth)

    I should also note that this code works using a local server. I re-worked the code to remove anything unnecessary:

    <script type="text/javascript" charset="UTF-8" src="../libs/three/build/three.js"></script>
    <script type="text/javascript" charset="UTF-8" src="../libs/other/physijs/physi.js"></script>
      <script>
    
      Physijs.scripts.worker = '../libs/other/physijs/physijs_worker.js';
      Physijs.scripts.ammo = './ammo.js';
    
      var scene = new Physijs.Scene;
    
      var camera = new THREE.PerspectiveCamera(45, window.innerWidth /   window.innerHeight, 0.1, 1000);
    
      var renderer = new THREE.WebGLRenderer();
      renderer.setClearColor(new THREE.Color(0x000000));
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);
    
      var cube = new Physijs.BoxMesh(new THREE.BoxGeometry(4, 4, 4),
            Physijs.createMaterial(new THREE.MeshStandardMaterial({color: 0x0000ff}), 0.4, 0.4));
    
      cube.position.x = -4;
      cube.position.y = 2;
      cube.position.z = 0;
      scene.add(cube);
    
      camera.position.x = -30;
      camera.position.y = 40;
      camera.position.z = 30;
      camera.lookAt(scene.position);
    
      var spotLight = new THREE.SpotLight(0xFFFFFF);
      spotLight.position.set(-40, 40, -15);
      scene.add(spotLight);
    
      var ambientLight = new THREE.AmbientLight(0x353535);
      scene.add(ambientLight);
    
      render();
      function render() {
        requestAnimationFrame(render);
        renderer.render(scene, camera);
        scene.simulate(undefined, 1);
      }
    
      </script>
    • This reply was modified 4 years ago by robgillth.
    • This reply was modified 4 years ago by robgillth.
    • This reply was modified 4 years ago by robgillth.
    Plugin Author David Artiss

    (@dartiss)

    Hi Rob,

    So when you view the page source for the test2 page, does it show the script as you’d entered it into Code Embed, or has it been altered in some way?

    Thread Starter robgillth

    (@robgillth)

    hello David,

    Yes – the code is the same as I entered it.
    I have posted on that page a screenshot of the source and three screenshots of the developer tools (Firefox) (it doesn’t look like I can upload images here).
    The problem seems to be with the physi.js library (?) – I suppose I should be posting to the physi.js github page, but, again, it works in a local server.

    thank you for looking into this

    Plugin Author David Artiss

    (@dartiss)

    In that case Rob, I’m not able to assist you here – the plugin is doing as it should do, which is inserting the code into the site. The fact that the code isn’t working isn’t plugin related but will be down to the script.

    Thread Starter robgillth

    (@robgillth)

    ok fair enough.
    Thank you again

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘three.js + physi.js’ is closed to new replies.