three.js

three.jsで入力フォームから文字を表示させる

今回は入力フォームを設けて、
入力された文字を表示してみようと思います。  

表示させてみた

 

ここに文字を入力してみてください

表示されてますでしょうか。

対話形式っていいですよね。

ソースコード

中身はこんな感じです。

 html
<p><input type="text" id="input_form" value="ここに文字を入力してみてください" name="name" required="" minlength="4" maxlength="64" size="10" /></p>
 
<div id="container"></div>
<div id="hello">ここに文字を入力してみてください</div>
<p><script src='https://rawgithub.com/mrdoob/three.js/master/build/three.min.js' ></script>
<script src="https://rawgithub.com/mrdoob/three.js/master/examples/js/controls/TrackballControls.js"></script>
<script src="https://rawgithub.com/mrdoob/three.js/master/examples/js/renderers/CSS3DRenderer.js"></script>
<script>
  var SCREEN_WIDTH=320
  var SCREEN_HEIGHT=240
 
  renderer = new THREE.CSS3DRenderer()
  renderer.setSize(SCREEN_WIDTH,SCREEN_HEIGHT)
  document.getElementById("container").appendChild(renderer.domElement)
 
  var camera=new THREE.PerspectiveCamera(45,SCREEN_WIDTH/SCREEN_HEIGHT,1,10000)
  var hello = new THREE.CSS3DObject(document.getElementById('hello'))
 
  var scene=new THREE.Scene()
  scene.add(camera)
  scene.add(hello)
  camera.position.z=200
  controls=new THREE.TrackballControls(camera,renderer.domElement)
 
  function render(){
    requestAnimationFrame(render)
    renderer.render(scene,camera)
    hello.rotation.x += 0.001
    hello.rotation.y += 0.002
    date = new Date()
    hello.rotation.z += 0.01 * Math.sin( 2 * Math.PI * date.getSeconds() / 10 )
    controls.update()
    document.getElementById("hello").innerHTML = document.getElementById("input_form").value;
  }
  render()
</script>
</p>

ちょっと解説

ちょっと解説します。

ポイントは2点だと思います。

  1. 入力フォームをつくる
  2. 入力フォーム文字を取得して、更新

1. 入力フォームをつくる

入力フォームは以下で作っています。

 html
<p><input type="text" id="input_form" value="ここに文字を入力してみてください" name="name" required="" minlength="4" maxlength="64" size="10" /></p>

たぶん、入力フォームの作りかたは色々あると思いますが、

今回は以上のように作っています。

2. 入力フォーム文字を取得して、更新

以下のように文字を更新しています。
render()関数内での処理です。

 html
document.getElementById("hello").innerHTML = document.getElementById("input_form").value;

thiree.jsで表示されているのはIDが”hello”の<p>タグです。

入力フォームはIDが"input_form"ですので、

document.getElementById()で文字を取得して更新しています。

 

参考までにどうぞー

-three.js

© 2021 暇人が趣味をさがす