3d_model.html


    <!DOCTYPE html>
    <html>
    <head>
        <title>3D Model</title>
        <style>
            body {
                margin: 0;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        
    <script src="https://cdn.jsdelivr.net/npm/three@0.131.0/build/three.min.js"></script>

    <script>
        function createAtom(name, position) {
            var geometry = new THREE.SphereGeometry(0.2, 32, 32);
            var material = new THREE.MeshLambertMaterial({ color: 'green' });
            var sphere = new THREE.Mesh(geometry, material);
            sphere.position.set(position[0], position[1], position[2]);
            scene.add(sphere);
        }

        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        var light = new THREE.DirectionalLight(0xffffff);
        light.position.set(10, 10, 10);
        scene.add(light);
        scene.add(new THREE.AmbientLight(0x404040));

        camera.position.z = 5;

        createAtom('O3', [0.112577, 0.116376, -0.559316]);
createAtom('HO', [0.487437, -0.598761, 0.315104]);
createAtom('HO', [-0.600014, 0.482385, 0.244212]);

        function animate() {
            requestAnimationFrame(animate);
            scene.rotation.y += 0.01;
            renderer.render(scene, camera);
        }

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