今回は入力フォームを設けて、
入力された文字を表示してみようと思います。
表示させてみた
ここに文字を入力してみてください
表示されてますでしょうか。
対話形式っていいですよね。
ソースコード
中身はこんな感じです。
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. 入力フォームをつくる
入力フォームは以下で作っています。
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()で文字を取得して更新しています。
参考までにどうぞー