|
日時: 2018/02/02 17:55
名前: lightbox
|
拡張子:
<script type="text/javascript" src="http://lightbox.in.coocan.jp/three/three.min57.js"></script>
<script type="text/javascript" src="http://lightbox.in.coocan.jp/three/OrbitControls.js"></script>
<script type="text/javascript" src="http://lightbox.in.coocan.jp/three/user_three.js"></script>
<div id="three_area" style='width:850px;height:400px;border: solid #000000 1px;'></div>
<script>
var cameraCube, sceneCube;
var w = 850;
var h = 400;
// カメラ作成
USER.camera = new THREE.PerspectiveCamera( 70, w / h, 1, 10000 );
USER.camera.position.set( 0, 0, 1 );
USER.camera2 = new THREE.PerspectiveCamera( 50, w / h, 1, 500 );
USER.camera2.position.z = 0;
// シーン作成
USER.scene = new THREE.Scene();
USER.scene2 = new THREE.Scene();
// テクスチャの準備
var path = "../threeimg/SwedishRoyalCastle/";
var format = '.jpg';
var urls = [
path + 'px' + format, path + 'nx' + format,
path + 'py' + format, path + 'ny' + format,
path + 'pz' + format, path + 'nz' + format
];
// テクスチャの実装
mesh = USER.meshPanorama(urls);
USER.scene2.add( mesh );
// レンダラー作成
USER.renderer = new THREE.WebGLRenderer();
USER.renderer.setSize( w, h );
// 表示エリア設定
document.getElementById("three_area").appendChild( USER.renderer.domElement );
// コントロール作成
USER.orbit();
USER.controls.autoRotate = true;
USER.controls.autoRotateSpeed = 0.5; //default 2.0
// アニメーション開始
USER.animate();
// オーバーライド
USER.animate = function () {
requestAnimationFrame( USER.animate );
USER.camera2.rotation.copy( USER.camera.rotation );
USER.camera2.position.copy( USER.camera.position );
USER.controls.update();
USER.renderer.render( USER.scene2, USER.camera2 );
}
</script>
|