// ------------------------------------------------
    // 絶対入れる部分
    // ------------------------------------------------

    // シーンを作成
    var scene = new THREE.Scene();

    // カメラを作成(カメラはperspectiveCamera)
    var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
    camera.position.z = 4;

    // rendererを作成(アンチエイリアスも指定)
    var renderer = new THREE.WebGLRenderer({antialias:true});

    // レンダラーの色、サイズを指定
    renderer.setClearColor("#000000");
    renderer.setSize( window.innerWidth, window.innerHeight );

    // DOMにrenderを追加する。
    document.body.appendChild( renderer.domElement );


    // ------------------------------------------------
    // プロジェクトごとに自由に書くところ
    // ------------------------------------------------

    // CubeをbasicMaterialで作成。
    var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    var material = new THREE.MeshBasicMaterial({ color: "#433F81" });

    var cube = new THREE.Mesh( geometry, material );

    // Add cube to Scene
    scene.add( cube );

    // Render Loop
    var render = function () {
      requestAnimationFrame( render );

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

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

    render();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.5/dat.gui.min.js