I am having library erros while setting up PhysiJS for basic physics in my new web game , these errors are coming from – physijs_worker.js’ , screenshot and code is giver below …
<style>
body {
margin:0;
padding:0;
overflow:hidden;
}
<?php header("Access-Control-Allow-Header: *") ?>
<div id="container"></div>
<script src="Javascript/three.js-master/build/three.js"></script>
<script src="Physijs-master/Physijs-master/physi.js"></script>
<script type="module">
import Stats from './Javascript/three.js-master/examples/jsm/libs/stats.module.js';
import { GUI } from './Javascript/three.js-master/examples/jsm/libs/dat.gui.module.js';
import { OrbitControls } from './Javascript/three.js-master/examples/jsm/controls/OrbitControls.js';
import { Water } from "./Javascript/three.js-master/examples/jsm/objects/Water.js";
import { Sky } from './Javascript/three.js-master/examples/jsm/objects/Sky.js';
var container, stats;
var camera, scene, renderer, light;
var controls, water, sphere;
var texture = new THREE.TextureLoader()
Physijs.scripts.worker = "Physijs-master/Physijs-master/physijs_worker.js";
Physijs.scripts.ammo = "Physijs-master/Physijs-master/examples/js/ammo.js";
init();
animate();
function init() {
container = document.getElementById( 'container' );
//
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
//
scene = new Physijs.Scene();
scene.setGravity(new THREE.Vector3(0,-10,0))
//
camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 1, 20000 );
camera.position.set( 30, 30, 100 );
//
light = new THREE.DirectionalLight( 0xffffff, 0.8 );
scene.add( light );
// Water
var waterGeometry = new THREE.PlaneBufferGeometry( 10000, 10000 );
water = new Water(
waterGeometry,
{
textureWidth: 512,
textureHeight: 512,
waterNormals: new THREE.TextureLoader().load( 'media/waternormals.jpg', function ( texture ) {
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
} ),
alpha: 1.0,
sunDirection: light.position.clone().normalize(),
sunColor: 0xffffff,
waterColor: 0x001e0f,
distortionScale: 3.7,
fog: scene.fog !== undefined
}
);
water.rotation.x = - Math.PI / 2;
scene.add( water );
// Skybox
var sky = new Sky();
var uniforms = sky.material.uniforms;
uniforms[ 'turbidity' ].value = 10;
uniforms[ 'rayleigh' ].value = 2;
uniforms[ 'luminance' ].value = 1;
uniforms[ 'mieCoefficient' ].value = 0.005;
uniforms[ 'mieDirectionalG' ].value = 0.8;
var parameters = {
distance: 400,
inclination: 0.49,
azimuth: 0.205
};
var cubeCamera = new THREE.CubeCamera( 0.1, 1, 512 );
cubeCamera.renderTarget.texture.generateMipmaps = true;
cubeCamera.renderTarget.texture.minFilter = THREE.LinearMipmapLinearFilter;
scene.background = cubeCamera.renderTarget;
function updateSun() {
var theta = Math.PI * ( parameters.inclination - 0.5 );
var phi = 2 * Math.PI * ( parameters.azimuth - 0.5 );
light.position.x = parameters.distance * Math.cos( phi );
light.position.y = parameters.distance * Math.sin( phi ) * Math.sin( theta );
light.position.z = parameters.distance * Math.sin( phi ) * Math.cos( theta );
sky.material.uniforms[ 'sunPosition' ].value = light.position.copy( light.position );
water.material.uniforms[ 'sunDirection' ].value.copy( light.position ).normalize();
cubeCamera.update( renderer, sky );
}
updateSun();
//
//
controls = new OrbitControls( camera, renderer.domElement );
controls.maxPolarAngle = Math.PI * 0.495;
controls.target.set( 0, 10, 0 );
controls.minDistance = 40.0;
controls.maxDistance = 200.0;
controls.update();
//
stats = new Stats();
container.appendChild( stats.dom );
// GUI
var gui = new GUI();
var folder = gui.addFolder( 'Sky' );
folder.add( parameters, 'inclination', 0, 0.5, 0.0001 ).onChange( updateSun );
folder.add( parameters, 'azimuth', 0, 1, 0.0001 ).onChange( updateSun );
folder.open();
var uniforms = water.material.uniforms;
var folder = gui.addFolder( 'Water' );
folder.add( uniforms.distortionScale, 'value', 0, 8, 0.1 ).name( 'distortionScale' );
folder.add( uniforms.size, 'value', 0.1, 10, 0.1 ).name( 'size' );
folder.add( uniforms.alpha, 'value', 0.9, 1, .001 ).name( 'alpha' );
folder.open();
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
var time = performance.now() * 0.001;
water.material.uniforms[ 'time' ].value += 1.0 / 60.0;
renderer.render( scene, camera );
}
function physics() {
scene.simulate()
requestAnimationFrame(physics)
}
var me = new Physijs.BoxMesh(
new THREE.BoxGeometry(10,10,10),
Physijs.createMaterial(new THREE.MeshStandardMaterial({color:'red'}),53,232),
.5,
4
)
scene.add(me)
var you = new Physijs.BoxMesh(
new THREE.BoxGeometry(10,10,10),
Physijs.createMaterial(new THREE.MeshStandardMaterial({color:'yellow'}),15,212),
.5,4
)
you.position.set(10,0,10)
scene.add(you)
var relative_velocity = 0.5 , relative_rotation = .7 , contact_normal = 1
me.addEventListener( 'collision', function( you , relative_velocity , relative_rotation , contact_normal ) {
alert('dfasd')
// `this` has collided with `other_object` with an impact speed of `relative_velocity` and a rotational force of `relative_rotation` and at normal `contact_normal`
});
var forward , backward , left , right , speed = 0.1
me.addEventListener('collision',(you,relative_velocity,relative_rotation,contact_normal) => {
alert('collided')
})
document.onkeydown = (e) => {
switch(e.which) {
case 87 :
forward = true
break
case 65 :
left = true
break
case 83 :
backward = true
break
case 68 :
right = true
break
case 66 :
b.position.set(2,0,2)
}
}
document.onkeyup = (e) => {
switch(e.which) {
case 87 :
forward = false
break
case 65 :
left = false
break
case 83 :
backward = false
break
case 68 :
right = false
break
}
}
setInterval(()=>{
if ( forward )
me.position.z -= speed
if ( backward )
me.position.z += speed
if ( left )
me.position.x -= speed
if ( right )
me.position.x += speed
//if ( ( b.position.z < 5 && b.position.z > 0 ) && ( b.position.x < 5 && b.position.x > 0 ) )
//alert("this works !!!")
},1)
</script>