three.jsというものを見つけた。 どうもウェブブラウザ上で3Dモデルを表示させることができるらしい。
このブログでも使ってみようと思う。
表示してみた
これはthreejsです
表示されていますでしょうか
ソースコード
中身はこんな感じです
html
<div id="container"></div>
<div id="hello">これはthreejsです</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.003
date = new Date()
hello.rotation.z += 0.1 * Math.sin( 2 * Math.PI * date.getSeconds() / 10 )
controls.update()
}
render()
</script>
</p>
参考までにどうぞ