読者です 読者をやめる 読者になる 読者になる

Three.js

Result

See the Pen rLOqdy by takanorioki (@takanorioki4) on CodePen.

main.js

var args = {
  w : window.innerWidth,
  h : window.innerHeight,
  cam : null,
  lt : null,
  scn : null,
  cube : null,
  renderer : null
}

function set_renderer(){

  args.renderer = new THREE.WebGLRenderer();
  args.renderer.setSize( args.w, args.h );
  args.renderer.setClearColor( 0x333333 );

  document.getElementById("cv").appendChild( args.renderer.domElement );

}

function camera(){
  args.cam = new THREE.PerspectiveCamera( 30,args.w/args.h);
  args.cam.position.x = 100;
  args.cam.position.y = 100;
  args.cam.position.z = 100;
  args.cam.lookAt({x:0, y:0, z:0});
}

function scene() {
  args.scn = new THREE.Scene();
}

function light() {
  args.lt = new THREE.DirectionalLight();
  args.lt.position.set( 300,200,100 );
  args.scn.add( args.lt );
}

function set_obj() {

  args.cube = new THREE.Mesh(
    new THREE.CubeGeometry(30, 30, 30),
    new THREE.MeshLambertMaterial({color:0x66FF66})
  );

  args.scn.add(args.cube);
  args.cube.position.set(0,0,0);

}

window.onload = function(){
  set_renderer();
  camera();
  scene();
  light();
  set_obj();

  args.renderer.render( args.scn, args.cam );

  setInterval(function(){
    args.cube.rotation.x += 
0.05
;
    args.cube.rotation.y += 
0.10
;
    args.renderer.render( args.scn, args.cam );
  }, 30);

}

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Three.js</title>
  <link rel="stylesheet" href="main.css">
  <script src="/assets/files/three.min.js"></script>
  <script src="main.js"></script>

</head>
<body id="cv">

</body>
</html>