three.jsでトーラスを脈動させる

three.jsでなにか図形を表示したいと思い、
今回はトーラス形状を表示させてみる。

表示させた

表示されてますでしょうか
紫色のトーラスが動いていますかね

ソースコード

中身はこんな感じです

 html
<div id="WebGL-output"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
<script>
  function init() {
  // create a scene var scene = new THREE.Scene();
  var in_width = 320; var in_height = 240;
  var camera = new THREE.PerspectiveCamera( 70, in_width/in_height, 1, 2000 );
 
  // create a render and set the size var renderer = new THREE.WebGLRenderer( { alpha: false } );
  renderer.setClearColor(new THREE.Color( 0x211682 ), 0 );
  renderer.setSize(in_width,in_height);
  renderer.shadowMap.enabled = true;
 
  // torus
  var torusGeometry = new THREE.TorusBufferGeometry( 18, 3, 12, 100 );
  var torusMaterial = new THREE.MeshLambertMaterial( { color: 0xFF22EE } );
  var torus = new THREE.Mesh( torusGeometry, torusMaterial );
  torus.position.x = -10;
  torus.position.y = 10;
  torus.position.z = 10;
  torus.castShadow = true;
  scene.add( torus );
 
  // position and point the camera to the center of the scene
  camera.position.x = -40;
  camera.position.y = 40;
  camera.position.z = 40;
  camera.lookAt(scene.position);
 
  // add spotlight for the shadows
  var spotLight = new THREE.SpotLight(0xffffff);
  spotLight.position.set( -30, 50, -15);
  spotLight.castShadow = true;
  scene.add(spotLight);
 
  // add the output of the renderer to the html element
  document.getElementById("WebGL-output").appendChild(renderer.domElement);
  renderScene();
  var rot_y = 0;
 
  function renderScene() {
    date = new Date();
    // radius
    var radius
    // period
    var period = ( date.getMilliseconds() / 999 );
    radius = 11 * Math.sin( Math.PI * 2 * period );
 
    // redraw
    scene.remove(torus);
    torus = new THREE.Mesh( new THREE.TorusGeometry( radius + 12, 3, 20, 100, Math.PI * 2 ), torusMaterial );
    torus.position.x = -10;
    torus.position.y = 10;
    torus.position.z = 10;
    torus.rotation.y = rot_y;
    torus.rotation.x = rot_y * 2;
    torus.castShadow = true;
    scene.add( torus );
    rot_y += 0.002;
 
    // render using requestAnimationFrame requestAnimationFrame(renderScene);
    renderer.render(scene, camera); }
  }
  window.onload = init;
</script>

ちょっと解説

ちょっと解説します。

ポイントは2点

1. トーラスを作成する
2. トーラスを再描画する

だと思います。

1. トーラスを作成

トーラスの作成は

TorusBufferGeometry（radius：Float、tube：Float、radialSegments：Integer、tubularSegments：Integer、arc：Float）

で作成します。

参考

radius : 大円の半径
tube : 小円の半径
radialSegments：大円のきめ細かさ
tubularSegments：大円のきめ細かさ
arc : 弧の角度

 html
  var torusGeometry = new THREE.TorusBufferGeometry( 18, 3, 12, 100 );
  var torusMaterial = new THREE.MeshLambertMaterial( { color: 0xFF22EE } );
  var torus = new THREE.Mesh( torusGeometry, torusMaterial );

2. トーラスの再描画

再描画は、表示済みのトーラスを消す→作り直すという操作を行います。

表示中のトーラスを消す

scene.remove()で表示中のジオメトリを削除します。

以下の部分です

 html
scene.remove(torus);

トーラスを作り直す

以下の部分でトーラスを作り直します。

 html
 torus = new THREE.Mesh( new THREE.TorusGeometry( radius + 12, 3, 20, 100, Math.PI * 2 ), torusMaterial );
 torus.position.x = -10;
 torus.position.y = 10;
 torus.position.z = 10;
 torus.rotation.y = rot_y;
 torus.rotation.x = rot_y * 2;
 torus.castShadow = true;
 scene.add( torus );

こんな感じです。
参考までにどうぞ