###環境
Rails 4.2.6
ruby 2.3.1p112 (2016-04-26 revision 54768) [x86_64-darwin17]
threejs-rails
GIT
remote: git://github.com/marvindanig/threejs-rails.git
revision: 6fcd3bf1fc1f8d24d5e8ba31f46dd75bbf891fa4
specs:
threejs-rails (1.1.4)
railties (>= 3.0)
###実装
Three.jsで360度写真が自動で回転する機能を作っています。
# index.html.erb <div id="stage"></div> <script> (function(){ var width = window.innerWidth, height = window.innerHeight; //scene var scene = new THREE.Scene(); //mesh var geometry = new THREE.SphereGeometry( 5, 60, 40 ); geometry.scale( - 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( '<%= asset_path("panorama/panorama-back.png") %>' ) } ); sphere = new THREE.Mesh( geometry, material ); scene.add( sphere ); //camera var camera = new THREE.PerspectiveCamera(75, width / height, 1, 1000); camera.position.set(0,0,0.1); camera.lookAt(sphere.position); //helper var axis = new THREE.AxisHelper(1000); axis.position.set(0,0,0); scene.add(axis); //render var renderer = new THREE.WebGLRenderer(); renderer.setSize(width,height); renderer.setClearColor({color: 0x000000}); document.getElementById('stage').appendChild(renderer.domElement); renderer.render(scene,camera); //control var controls = new THREE.OrbitControls(camera,renderer.domElement); function render(){ requestAnimationFrame(render); sphere.rotation.y += 0.05 * Math.PI/180; //画面リサイズ対応 window.addEventListener( 'resize', onWindowResize, false ); renderer.render(scene,camera); controls.update(); } render(); function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight ); } })(); </script>
###エラー
chromeの検証で以下のようなエラーメッセージを確認できました。
Uncaught TypeError: THREE.OrbitControls is not a constructor
at (index):231 at (index):249
threejs-railsでは、OrbitControlsを使うことはできないのでしょうか。
他にも自動で回転する360度写真を実装する方法等あればなにかご教示の方、よろしくお願いいたします。
あなたの回答
tips
プレビュー