|
日時: 2018/02/02 18:03
名前: 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/user_play1.js"></script>
<script type="text/javascript">
var camera, scene, renderer;
var user_play;
// 表示エリア作成
document.write("<div id=\"three_area\" style='width:700px;height:700px;background-color:#000;'></div>");
// 処理開始
build_3d_world();
function build_3d_world() {
// カメラ
camera = new THREE.PerspectiveCamera( 70, 700 / 700, 1, 10000 );
// シーン
scene = new THREE.Scene();
// 別ドメインの場合必要です
THREE.ImageUtils.crossOrigin = null;
var map = THREE.ImageUtils.loadTexture( "http://lightbox.in.coocan.jp/three/crate.gif" );
map.wrapS = map.wrapT = THREE.RepeatWrapping = 1000;
map.repeat.set( 1, 3 );
materials = [
new THREE.MeshLambertMaterial( { ambient: 0xbbbbbb, map: map, side: THREE.DoubleSide } ),
new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true, transparent: true, opacity: 0.1, side: THREE.DoubleSide } )
];
object = THREE.SceneUtils.createMultiMaterialObject( new THREE.CubeGeometry( 100, 100, 100, 4, 4, 4 ), materials );
object.position.set( 0, 0, 0 );
scene.add( object );
// レンダラー
renderer = new THREE.CanvasRenderer();
renderer.setSize( 700, 700 );
// 実装
document.getElementById("three_area").appendChild( renderer.domElement );
// アニメーション
user_play = new THREE.UserPlay1( scene, camera, renderer, animate, 150 );
user_play.start();
}
// ループ処理
function animate() {
requestAnimationFrame( animate );
user_play.render();
}
</script>
|