I have been utilizing the Physijs library with an older version of three.js and everything was functioning perfectly. However, upon downloading the latest version of three.js, I encountered issues even when attempting to add a simple plane mesh to the scene.
An error message is displayed as follows:
Uncaught TypeError: Class constructor Scene cannot be invoked without 'new' line:391 of:file:///storage /emulated/0/threejs /learning-threejs/libs/physi .jsI am puzzled by the exact reason behind this issue. Here is my code snippet:
<html>
<head>
<title>Example 01.01 - Basic skeleton</title>
<script type="text/javascript" src="../libs/three.min.js"></script>
<script type="text/javascript" src="../libs/dat.gui.js"></script>
<script type="text/javascript" src="../libs/TrackballControls.js"></script>
<script type="text/javascript" src="../libs/physi.js"></script><style>
body {
/* set margin to 0 and overflow to hidden, to
use the complete page */
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>
<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">
// once everything is loaded, we run our Three.js stuff.
function init() {
Physijs.scripts.worker = '../libs/physijs_worker.js';
Physijs.scripts.ammo = '../libs/ammo.js';
//renderer
var renderer=new THREE.WebGLRenderer({antialias:true})
renderer.setSize(innerWidth,innerHeight)
renderer.setPixelRatio=devicePixelRatio
renderer.shadowMap.enabled=true
renderer.setClearColor(new THREE.Color(0xff00ff))
//physijs scene
var scene=new Physijs.Scene
scene.setGravity(new THREE.Vector3(0,-300,-50))
//ground
var groundgeo=new THREE.PlaneGeometry(50,50)
var groundmat=new Physijs.createMaterial(new THREE.MeshBasicMaterial({color:0xd2b48c ,side:THREE.DoubleSide}))
var ground=new Physijs.PlaneMesh(groundgeo,groundmat,0)
ground.rotation.x=-0.5*Math.PI
ground.position.set(-20.0,0,0.0)
ground.receiveShadow=true
scene.add(ground)
var camera=new THREE.PerspectiveCamera(40,innerWidth/innerHeight,0.1,10000)
camera.position.set(70,65,0)
camera.lookAt(ground.position)
scene.add(camera)
var trackballControls = new THREE.TrackballControls(camera);
trackballControls.rotateSpeed = 1.0;
trackballControls.zoomSpeed = 1.0;
trackballControls.panSpeed = 1.0;
trackballControls.staticMoving = true;
document.getElementById("WebGL-output").appendChild(renderer.domElement)
render()
var step=0
function render(){
scene.simulate(undefined,2)
trackballControls.update()
requestAnimationFrame(render)
renderer.render(scene,camera)
}}
window.onload = init()
</script>
</body>
Thank you in advance!