コメント |
@SHOW
オリジナルとは、少しアニメーションコントロールが違いますが、この部分だけで背景がどのようになっているのかが解ります。背景は、実際には球に対するテクスチャで、カメラのフレームの外に球の輪郭が存在します。
@C:red(※実行できるのは、WebGL の動作する、Google Chrome か Firefox です)
@END
@HTML
<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:830px;height:400px;border: solid #000000 1px;'></div>
<script>
var img_url = "../threeimg/2294472375_24a3b8ef46_o.jpg";
var mapping = new THREE.UVMapping(); // テクスチャの普通のデフォルト値
var texture = THREE.ImageUtils.loadTexture( img_url, mapping, function () {
var w = 830;
var h = 400;
// カメラ作成
USER.camera = new THREE.PerspectiveCamera( 70, w / h, 1, 10000 );
USER.camera.position.set( 0, 0, 1 );
// シーン作成
USER.scene = new THREE.Scene();
// パノラマ背景
var sg = new THREE.SphereGeometry( 500, 60, 40 );
var mbm = new THREE.MeshBasicMaterial( { map: texture } );
var mesh = new THREE.Mesh( sg, mbm );
mesh.scale.x = -1;
USER.scene.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();
} );
</script>
@HEND
@LINE
https://lh3.googleusercontent.com/-zqNApQoEWlU/UXP7tQKqxjI/AAAAAAAANCE/bbMDBfmX68I/s375/_img.jpg
@SHOW
中央ドラッグで『拡大・縮小』
左ドラッグで回転
右ドラッグで移動
@END
@DIV
<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:600px;height:400px;border: solid #000000 1px;'></div>
<script>
var img_url = "../threeimg/2294472375_24a3b8ef46_o.jpg";
var mapping = new THREE.UVMapping(); // テクスチャの普通のデフォルト値
var texture = THREE.ImageUtils.loadTexture( img_url, mapping, function () {
var w = 830;
var h = 400;
// カメラ作成
USER.camera = new THREE.PerspectiveCamera( 70, w / h, 1, 10000 );
USER.camera.position.set( 0, 0, 1 );
// シーン作成
USER.scene = new THREE.Scene();
// パノラマ背景
var sg = new THREE.SphereGeometry( 500, 60, 40 );
var mbm = new THREE.MeshBasicMaterial( { map: texture } );
var mesh = new THREE.Mesh( sg, mbm );
mesh.scale.x = -1;
USER.scene.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();
} );
</script>
@END
@SHOW
[[元の解説記事]]
http://ginpro.winofsql.jp/article/356621178.html《Three.js : 球を使った『パノラマ背景』》
@END |