three.js로 우주 공간에 떠있는 모노리스 만들기

javascript는 할 수 없지만, three.js에는 흥미가 있었으므로 조금 해 보았습니다.

script.js

var main = function () {
//カメラを作る
  var scene , camera,
  width  = window.innerWidth,
  height = window.innerHeight,
  mouseX = 0, mouseY = 0,
  windowHalfX = window.innerWidth / 2,
  windowHalfY = window.innerHeight / 2,
  renderer,mesh,
  particles, particle, particleCount;

  //初期設定
  init();
  //アニメーション
  animate();

  function init() {
    scene = new THREE.Scene();
    // fog設定 カラーとフォグの濃さ
    scene.fog = new THREE.FogExp2( 0x000000, 0.002);
    camera = new THREE.PerspectiveCamera( 75, width / height, 1, 10000 );
    camera.position.z = 100;

      //レンダラーをDOM上に設置する
      //WebGLRendererだとリッチな処理になります。CanvasRendererは雑な処理になります。
      renderer = new THREE.WebGLRenderer({antialias: true});
      //renderer = new THREE.CanvasRenderer();

      renderer.setSize( width, height );
      document.body.appendChild( renderer.domElement );

      //光源を追加する
      var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.2 );
      directionalLight.position.set( 100, 300, 100 );
      scene.add( directionalLight );

      //物体を追加する
      var geometry = new THREE.CubeGeometry( 20, 30, 5 );
      var material = new THREE.MeshPhongMaterial( { color: 0xffffff } );
      mesh = new THREE.Mesh( geometry, material );
      scene.add( mesh );

      //表示する
      renderer.render( scene, camera );

      //パーティクル
      makeParticles();

      document.addEventListener( 'mousemove', onDocumentMouseMove, false );
  }

  //アニメーション
  function animate() {
    requestAnimationFrame( animate );
    camera.position.x += ( mouseX - camera.position.x ) * .05;
    camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
    camera.lookAt( scene.position );
    renderer.render( scene, camera );
  }

  //マウスの動き
  function onDocumentMouseMove(event) {
    mouseX = event.clientX - windowHalfX;
    mouseY = event.clientY - windowHalfY;
  }


  function makeParticles(){       
    // パーティクルの数
    particleCount = 10000;
    particles = new THREE.Geometry();
    // マテリアルの設定
    var material = new THREE.PointCloudMaterial({
        color: 0xFFFFFF,
        size: 0.1,
        //map: texture,
        transparent: true
    });

    // パーティクルの位置の設定
    for (var i = 0; i < particleCount; i++) {
      var px = Math.random() * 1000 - 500,
          py = Math.random() * 1000 - 500,
          pz = Math.random() * 1000 - 500;
      particle = new THREE.Vector3( px, py, pz);

      // パーティクルのべロシティの設定
      particle.velocity = new THREE.Vector3( 0, -Math.random(), 0 );
      particles.vertices.push( particle );
    }
    pointCloud = new THREE.PointCloud( particles, material );
    // パーティクルの深さを毎フレームソート
    pointCloud.sortParticles = true;
    scene.add( pointCloud );
    }
};

기본적인 부분은 할애하지만, 어쨌든 main 함수에 scene이나 camera, particle이나 mouse의 변수를 선언해, 초기 설정의 함수로서 init() 함수를 기술해 정의합니다. 이제 카메라, 광원, 모노리스를 배치합니다. 또, 그 안에 별을 흩뿌리는 함수 makeParticles()도 정의합니다.
animate() 함수는 마우스에 맞추어 카메라의 위치가 글리그리 바뀌는 함수입니다.

three.js는 렌더러가 2 종류 있습니다만, WebGLRenderer 쪽으로 했습니다.
(이 정도라면 어느 쪽이라도 처리 속도는 변하지 않는다고 생각합니다만,,,)

WebGLRenderer
풍부한 처리가 되어 깨끗한 렌더링이 가능하지만 무거워집니다.
또한 대응 브라우저도 많아지고 있습니다만 , IE에 대해 생각하면 실무에서 사용하기 위해 아직 갈 수 있습니다.
코드는 아래.renderer = new THREE.WebGLRenderer({antialias: true});
CanvasRenderer
GPU를 사용할 수 없는 스펙이 낮은 환경에서도 동작합니다.
코드는 아래.renderer = new THREE.CanvasRenderer();
그래서 마무리가 이것입니다.
ht tp // 코데펜. 이오 / 추진 / 펜 / Y Z ゔ 아? 에아와 rs=001