Three-dimensional object and shadow A doughnut-shaped three-dimensional object is displayed by JavaScript Three.js. When the screen is tapped, the light source moves to that position, and the shadow of the three-dimensional object is displayed according to the light source.'s game

Click here for free DL of the app version that can save data.

No:8636

863

←

Prev Next

→

Three-dimensional object and shadow A doughnut-sha..ALL
Developer もちきなこ｜Date and time 23/7/17 17:20:16
Build time 16.644 sec｜Game capacity 1.734KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
	<title>Donut 3D</title>
	<script src="https://threejs.org/build/three.js"></script>
	<style>
		body { margin: 0; }
		canvas { display: block; }
	</style>
</head>
<body>
	<script>
		// Create the scene
		const scene = new THREE.Scene();

// Create the camera
		const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
		camera.position.z = 5;

// Create the renderer
		const renderer = new THREE.WebGLRenderer();
		renderer.setSize(window.innerWidth, window.innerHeight);
		document.body.appendChild(renderer.domElement);

// Create the geometry
		const geometry = new THREE.TorusGeometry(1, 0.5, 16, 100);
		const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
		const donut = new THREE.Mesh(geometry, material);
		scene.add(donut);

// Create the light
		const light = new THREE.PointLight(0xffffff, 1, 100);
		light.position.set(0, 0, 10);
		scene.add(light);

// Animate the scene
		function animate() {
			requestAnimationFrame(animate);

// Move the light source to the tapped position
			window.addEventListener('click', function(event) {
				event.preventDefault();

const mouse = new THREE.Vector2();
				mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
				mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

const raycaster = new THREE.Raycaster();
				raycaster.setFromCamera(mouse, camera);

const intersects = raycaster.intersectObjects(scene.children, true);
				if (intersects.length > 0) {
					const intersect = intersects[0];
					light.position.copy(intersect.point);
				}
			}, false);

// Render the scene
			renderer.render(scene, camera);
		}

animate();
	</script>
</body>
</html>