three.js

5. three.jsをブログ記事で使ってみる

2020年6月21日

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>
 

参考までにどうぞ

他にもいろいろthree.jsを使ってみました

-three.js

© 2021 暇人が趣味をさがす