I am facing an issue with moving a ball inside a rounded ground using smartphone orientation. The ball stops at the edge when it reaches there, but I'm having trouble getting it to move again if the orientation points in the opposite direction. Here is a link to the working sample:
Check out the code snippet below;
export const LIGHT = () => {
const light = new THREE.SpotLight(0xffffff, 1);
light.position.set(100, 1, 0);
light.castShadow = true;
light.position.set(0, 0, 35);
return light;
};
export const BALL = () => {
const geometry = new THREE.SphereGeometry(3, 10, 10);
const material = new THREE.MeshLambertMaterial({ color: "#f1c40f" });
const mesh = new THREE.Mesh(geometry, material);
mesh.castShadow = true;
mesh.receiveShadow = false;
return mesh;
};
export const BALL_BOUNDING = (sphere) => {
return new THREE.Sphere(sphere.position, 3);
};
export const GROUND = () => {
const geometry = new THREE.CircleGeometry(21, 21, 0);
const material = new THREE.MeshPhongMaterial({
color: "#bdc3c7"
// transparent: true,
// opacity: 0,
});
const mesh = new THREE.Mesh(geometry, material);
mesh.castShadow = true;
mesh.position.z = 1;
return mesh;
};
export const GROUND_BOUNDING = (ground) => {
const geometry = new THREE.SphereGeometry(13, 8, 8);
const material = new THREE.MeshLambertMaterial({
color: "#FFF"
});
const mesh = new THREE.Mesh(geometry, material);
// expanding bounding XYZ
return new THREE.Sphere(mesh.position, 18);
};
const ww = window.innerWidth;
const wh = window.innerHeight;
const renderer = new THREE.WebGLRenderer({ canvas: canvas.value, alpha: true });
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(35, ww / wh, 0.1, 1000);
const light = _light()
const ball = BALL()
const ball_bounding = BALL_BOUNDING(ball)
const ground = GROUND()
const ground_bounding = GROUND_BOUNDING(ground)
renderer.shadowMap.enabled = true;
renderer.setSize(window.innerWidth, window.innerHeight);
camera.position.z = 120;
scene.add(ball)
scene.add(ground)
scene.add(light)
function animate() {
requestAnimationFrame(animate)
render()
}
function render() {
const x = posX.value / 20
const y = posY.value / 20
if (ball.geometry.boundingSphere !== null) {
ball.geometry.computeBoundingSphere()
ball_bounding.copy(ball.geometry.boundingSphere).applyMatrix4(ball.matrixWorld)
}
if (ground_bounding.intersectsSphere(ball_bounding)) {
ball.position.x += x;
ball.position.y -= y;
}
renderer.render(scene, camera)
}
animate()