3D Polyhedron 3D graphics are drawn by Three.js. The figure is an octahedron. When the screen is tapped, a new octahedron is regenerated. The colors are random.'s game

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

No:8426

4112

←

Prev Next

→

3D Polyhedron 3D graphics are drawn by Three.js. T..ALL
Developer もちきなこ｜Date and time 23/7/16 3:42:54
Build time 15.06 sec｜Game capacity 2.255KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>3D多面体</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
    <script>
        let scene, camera, renderer;
        let geometry, material, mesh;

init();
        animate();

function init() {
            scene = new THREE.Scene();

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

renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

geometry = new THREE.OctahedronGeometry();
            material = new THREE.MeshBasicMaterial({ color: getRandomColor() });
            mesh = new THREE.Mesh(geometry, material);
            scene.add(mesh);

window.addEventListener('resize', onWindowResize, false);
            document.addEventListener('mousedown', onMouseDown, false);
        }

function animate() {
            requestAnimationFrame(animate);

mesh.rotation.x += 0.01;
            mesh.rotation.y += 0.01;

renderer.render(scene, camera);
        }

function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }

function onMouseDown(event) {
            mesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ color: getRandomColor() }));
            mesh.position.x = (event.clientX / window.innerWidth) * 2 - 1;
            mesh.position.y = -(event.clientY / window.innerHeight) * 2 + 1;
            scene.add(mesh);
        }

function getRandomColor() {
            const letters = '0123456789ABCDEF';
            let color = '#';
            for (let i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }
    </script>
</body>
</html>