index.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>


<div id="cube-container"></div>



#cube-container {
    width: 100%;
    height: 400px;
    position: relative;
    margin-top: 20px;
}





Java


// scripts.js
document.addEventListener('DOMContentLoaded', function() {
    // Set up the scene, camera, and renderer as global variables.
    var scene, camera, renderer, cube;

    init();

    function init() {
        // Add the scene.
        scene = new THREE.Scene();
        scene.background = new THREE.Color(0xf4f4f4);

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

        // Add the renderer.
        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.getElementById('cube-container').appendChild(renderer.domElement);

        // Add the cube.
        var geometry = new THREE.BoxGeometry(2, 2, 2);
        var material = new THREE.MeshBasicMaterial({ color: 0x007bff, wireframe: false });
        cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        // Render the scene/camera combination.
        render();
    }

    function render() {
        requestAnimationFrame(render);
        
        // Rotate the cube.
        cube.rotation.x +=