I am trying to make wheel on track but its not working. Can you please check my following code on your end and provide me with a solution?
var scene;
var camera;
var renderer;
var clock;
var cloud;
var physics;
const { AmmoPhysics, PhysicsLoader } = ENABLE3D
function initScene() {
scene = new THREE.Scene();
clock = new THREE.Clock();
var scene_width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var scene_height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
camera = new THREE.PerspectiveCamera(50, scene_width / scene_height, 0.1, 30000);
scene.add(new THREE.AmbientLight(0xffffff))
camera.position.set(50, 10,0);
renderer = new THREE.WebGLRenderer({ antialias: true });
const DPR = window.devicePixelRatio
renderer.setPixelRatio(Math.min(2, DPR))
renderer.setSize(scene_width, scene_height);
document.body.appendChild(renderer.domElement);
control = new THREE.OrbitControls(camera, renderer.domElement);
var clock = new THREE.Clock();
function animate() {
requestAnimationFrame(animate);
control.update();
if(physics)
{
physics.update(clock.getDelta() * 1000)
physics.updateDebugger()
}
renderer.clear();
renderer.render(scene, camera);
}
requestAnimationFrame(animate);
}
function initPhysics(){
physics = new AmmoPhysics(scene,{ gravity: { x:0,y:-10,z:0 }, maxSubSteps: 1, fixedTimeStep: 1 / 60 });
physics.debug.enable();
}
function addBox()
{
var geometry = new THREE.BoxGeometry(4,4,4);
var material = new THREE.MeshStandardMaterial({ color:0xff0000 });
var box = new THREE.Mesh(geometry, material);
scene.add(box);
box.position.y = 2;
}
function addPlane()
{
var geometry = new THREE.PlaneGeometry(100,100);
var material = new THREE.MeshStandardMaterial({ color:0x00ff00 });
var plane = new THREE.Mesh(geometry, material);
scene.add(plane);
plane.rotation.x=-Math.PI/2;
physics.add.existing(plane,{ mass: 2000, collisionFlags:1 });
}
function addWheel(){
var wheel = new THREE.Group();
var leftwheelgeometry = new THREE.CylinderGeometry(4, 4, 2, 64);
var leftwheelmaterial = new THREE.MeshStandardMaterial({ color:0x00ffff });
var leftwheel = new THREE.Mesh(leftwheelgeometry, leftwheelmaterial);
var leftwheelrimgeometry = new THREE.CylinderGeometry(5, 5, .3, 64);
var leftwheelrimmaterial = new THREE.MeshStandardMaterial({ color:0x0ff0ff });
var leftwheelrim = new THREE.Mesh(leftwheelrimgeometry, leftwheelrimmaterial);
leftwheelrim.position.y=-9;
wheel.add(leftwheelrim);
leftwheel.position.y= 10;
wheel.add(leftwheel);
var rightwheelgeometry = new THREE.CylinderGeometry(4, 4, 2, 64);
var rightwheelmaterial = new THREE.MeshStandardMaterial({ color:0x00ffff });
var rightwheel = new THREE.Mesh(rightwheelgeometry, rightwheelmaterial);
var rightwheelrimgeometry = new THREE.CylinderGeometry(5, 5, .3, 64);
var rightwheelrimmaterial = new THREE.MeshStandardMaterial({ color:0x0ff0ff });
var rightwheelrim = new THREE.Mesh(rightwheelrimgeometry, rightwheelrimmaterial);
rightwheelrim.position.y=9;
wheel.add(rightwheelrim);
rightwheel.position.y= -10;
wheel.add(rightwheel);
var axelgeometry = new THREE.CylinderGeometry(1, 1, 20, 64);
var axelmaterial = new THREE.MeshStandardMaterial({ color:0x0ff0ff });
var axel = new THREE.Mesh(axelgeometry, axelmaterial);
wheel.add(axel);
wheel.rotation.x = Math.PI/2;
wheel.position.y = 7;
scene.add(wheel);
const compound = [
{ shape: 'cylinder', radiusTop: 4, radiusBottom: 4, height:2, z: 0, y: 10, z:0 },
{ shape: 'cylinder', radiusTop: 4, radiusBottom: 4, height:2, z: 0, y: -10, z:0 },
{ shape: 'cylinder', radiusTop: 5, radiusBottom: 5, height:.3, z: 0, y: 9, z:0 },
{ shape: 'cylinder', radiusTop: 5, radiusBottom: 5, height:.3, z: 0, y: -9, z:0 },
{ shape: 'cylinder', radiusTop: 1, radiusBottom: 1, height:20, z: 0, y: 0, z:0 },
]
physics.add.existing( wheel, { compound },{ mass: 2, collisionFlags:0 });
wheel.body.setCcdMotionThreshold(1e-7)
wheel.body.setCcdSweptSphereRadius(0.25)
}
function addTrack()
{
var lefttrackgeometry = new THREE.BoxGeometry(100,2,2);
var lefttrackmaterial = new THREE.MeshStandardMaterial({ color:0x0000ff });
var lefttrack = new THREE.Mesh(lefttrackgeometry, lefttrackmaterial);
//scene.add(lefttrack);
lefttrack.position.y = 1;
lefttrack.position.z=-10.5;
var righttrackgeometry = new THREE.BoxGeometry(100,2,2);
var righttrackmaterial = new THREE.MeshStandardMaterial({ color:0x0000ff });
var righttrack = new THREE.Mesh(righttrackgeometry, righttrackmaterial);
//scene.add(righttrack);
righttrack.position.y = 1;
righttrack.position.z=10.5;
var track = new THREE.Group();
track.add(lefttrack);
track.add(righttrack);
scene.add(track);
const compound = [
{ shape: 'box', width: 100, height: 2, depth:2, z: 0, y: 1, z:-10.5 },
{ shape: 'box', width: 100, height: 2, depth:2, z: 0, y: 1, z:10.5 }
]
physics.add.existing(track,{ mass: 200, collisionFlags:1 });
track.body.setCcdMotionThreshold(1e-7)
track.body.setCcdSweptSphereRadius(0.25)
}
window.onresize = function () {
var scene_width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var scene_height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
camera.aspect = scene_width / scene_height;
camera.updateProjectionMatrix();
renderer.setSize(scene_width, scene_height);
const DPR = window.devicePixelRatio
renderer.setPixelRatio(Math.min(2, DPR))
}
PhysicsLoader('/js',()=>{
initScene();
initPhysics();
addPlane();
addWheel();
addTrack();
});`