logo

threejsで動くロゴ

by nama

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r77/three.min.js"></script>
<div id="container"></div>

CSS

#container{
  width:100%:  
}
canvas{
  display: block;
  margin:0 auto;
}

JavaScript

var container;
var camera, scene, renderer, loader, controls;
// 光源系設定
var directionalLight2, deg, initialDeg = -90,
  maxDeg = 180,
  initialX = 20,
  r = 20;
var color = 0x3c5db3;
// カメラ系設定
var camDeg = -180,
  camR;
// オブジェクト系設定
var spheres = [];
var poles = [];
var poles2 = [];
var startPositions = [
  [0, 0, -300],
  [0, 0, -300],
  [0, 0, -300],
  [0, 0, -300]
];
var endPositions = [
  [-16, -16, 0], // 左下
  [-16, 16, 0], // 左上
  [16, 16, 0], // 右上
  [16, -16, 0]
]; // 右下

function init() {
  container = document.getElementById('container');
  document.body.appendChild(container);
  // カメラ
  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);

  // scene
  scene = new THREE.Scene();

  // 光
  // 環境光
  var ambient = new THREE.AmbientLight(0xffffff, 0.5);
  scene.add(ambient);
  // 無限遠からの平行光
  var directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
  directionalLight.position.set(0, 10, 10);
  scene.add(directionalLight);

  // 球を作成
  for (var i = 0; i < startPositions.length; i++) {
    spheres[i] = new THREE.Mesh(new THREE.IcosahedronGeometry(5, 3), new THREE.MeshPhongMaterial({
      color: color
    }));
    spheres[i].position.x = startPositions[i][0];
    spheres[i].position.y = startPositions[i][1];
    spheres[i].position.z = startPositions[i][2];
    scene.add(spheres[i]);
  }

  //
  renderer = new THREE.WebGLRenderer({
    antialias: false,
    preserveDrawingBuffer: false,
    alpha: true
  });
  renderer.autoClearColor = false;
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth * 0.9, window.innerHeight * 0.9);
  renderer.autoClear = false;
  container.appendChild(renderer.domElement);



  window.addEventListener('resize', onWindowResize, false);
  window.addEventListener('dblclick', startMovingLight, false);
  renderer.render(scene, camera);

}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
 ...