<canvas id="gui"></canvas>
/**************************************
           THREE.JSの準備
**************************************/

const width = window.innerWidth;
const height = window.innerHeight;
let rot = 0;
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(20, width / height);
camera.position.set(100, 50, +100);
camera.lookAt(new THREE.Vector3(0, 0, 0));

//レンダラーの作成
const renderer = new THREE.WebGLRenderer({
    canvas: document.querySelector('#gui')
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);
renderer.setClearColor(0xf0f0f0);

//光源の作成
const normalLight = new THREE.AmbientLight(0xFFFFFF, 0.6);
const light = new THREE.DirectionalLight(0xFFFFFF, 1);
scene.add(normalLight);
scene.add(light);
normalLight.position.set(-100,300,500);
light.position.set(-100,500,500);

//オブジェクト作成
function Obj(){

    object = new THREE.Mesh(
      new THREE.CubeGeometry(30,30,30),
      new THREE.MeshPhongMaterial({color: 0x6ea0d4})
    );
    scene.add(object);
    object.position.set(0,1,0);
	
}
Obj();

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

/**************************************
              GUIの値の設定
**************************************/
var GUIScreen = function() {
	this.color = "#6ea0d4";
	this.background = "#f0f0f0";
	this.scale = 1;
};

/**************************************
             GUI画面の作成
**************************************/
window.onload = function(){
	data = new GUIScreen();
	update();
	var gui = new dat.GUI();
	gui.addColor(data,'color').onChange(update);
	gui.addColor(data,'background').onChange(update);
	gui.add(data,'scale',0.5,2.5).onChange(update);
};

/**************************************
               設定の更新
**************************************/
function update(){
	
	color = data.color;
	speed = data.speed;
	background = data.background;
	scale = data.scale;
	
	object.setColor = function(color){ 
    object.material.color = new THREE.Color(color); 
   }
	
	object.setColor(color);
	
	object.scale.x = scale;
	object.scale.y = scale;
	object.scale.z = scale;
	
	
	renderer.setClearColor(data.background);
	
}

/**************************************
               リサイズ時の処理
**************************************/
  onResize();

  window.addEventListener('resize', onResize);

  function onResize() {
  const width = window.innerWidth;
  const height = window.innerHeight;

  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(width, height);

  camera.aspect = width / height;
  camera.updateProjectionMatrix();
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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