Threejs: Four Cubes and a Perspective Camera

 
<!DOCTYPE html>
<html>
<head>
    <title>Threejs: Four Cubes and a Perspective Camera</title>
    <style>
        canvas { width: 1000px; height: 500px; }
    </style>
</head>
<body>

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

    <script src="js/three.js"></script>
    <script>

        // Set Scene
        var scene = new THREE.Scene();
        scene.background = new THREE.Color(0xe0e0e0); // Gray background

        // Set Camera
        var camera = new THREE.PerspectiveCamera(65, 2, 0.1, 1000);
        camera.position.set(4, 5, 5);
        camera.lookAt(0, 0, 0);

        // Set Renderer
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(1000, 500);
        document.getElementById("container").appendChild(renderer.domElement);

        // Add a Cube
        var material = new THREE.MeshStandardMaterial({
            color: 0x0000ff
        });
        var geometry = new THREE.BoxGeometry(2,2,2);
        var cube1 = new THREE.Mesh(geometry, material);

        scene.add(cube1);

        // Create a cube and move it to the right
        cube2 = cube1.clone();
        cube2.position.x = cube2.position.x + 3;

        scene.add(cube2);

        // Create a cube and move it to the left
        cube3 = cube1.clone();
        cube3.position.x = cube3.position.x - 3;

        scene.add(cube3);

        // Create a cube and move it behind
        cube4 = cube1.clone();
        cube4.position.z = cube4.position.z - 3;

        scene.add(cube4);

        // Directional Light
        var directionalLight = new THREE.DirectionalLight(0xffffff, 5);
        directionalLight.position.x = 3;
        directionalLight.position.y = 9;
        directionalLight.position.z = 2;
        scene.add(directionalLight);

        // Show the scene
        renderer.render(scene, camera);

    </script>

</body>
</html>

 

Related Snippets

•  Threejs: Four Cubes and an Orthographic Camera
•  Threejs: Cube with Standard Material, and a Directional Light
•  Threejs: Change Scene Background Color