Lightとは

サンプル (オレンジの点光源と、白のスポットライト)

Your borwser is not supporting object tag. Please use one of the latest browsers.
Go to /ThreeJSExam/light.html

https://github.com/kagyuu/ThreeJSExam/blob/master/light.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Hilbert 3D Cube</title>
    <style>
        div {
            border : 1px solid;
        }
    </style>
</head>
<body>
    <div id="webgl_view"></div>
    
    <script type="text/javascript" src="three.js" charset="utf-8"></script>
    <script type="text/javascript" src="Hilbert.js" charset="utf-8"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script>
 
var height = 400;
var width  = 600;
 
var container = $('#webgl_view');
container.css({
    height :  height + "px",
    width  : width + "px"});

function cource(t) {
    return {
        x : 10.0 * Math.cos(t),
        y : 2.0 * Math.sin(t),
        z : 10.0 * Math.sin(t * 2),
        dx : -10.0 * Math.sin(t),
        dy : 2.0 * Math.cos(t),
        dz : 10.0 * Math.cos(t * 2),
    };
}

// (1) 立方体
 
// 形状
var cubeGeometry = new THREE.CubeGeometry(1,1,1);

// テクスチャを作成
var texture = new THREE.Texture(hilbert(100, 100, 3, 'black', 'white'));
texture.needsUpdate = true;

// 色
var cubeMaterial = new THREE.MeshPhongMaterial({
    map : texture,
    fog: true
});

var cubeArray = new Array();
var lightArray = new Array();
var cnt = 0;
for (var t = 0; t < 2 * Math.PI; t += 0.1) {
    cnt += 1;
    
    var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
    
    var position = cource(t);
    
    cube.position.x = position.x;
    cube.position.y = position.y;
    cube.position.z = position.z;
    
    cube.rotation.y = Math.atan(position.x/position.z);
    
    cubeArray.push(cube);
    
    if (0 == cnt % 7) {
        var light = new THREE.PointLight( 0xff9933, 2, 5);  
        light.position.set(position.x * 1.1, position.y + 2.0, position.z * 1.1);
        lightArray.push(light);
    }    
}

var spotLight = new THREE.SpotLight( 0xffffff, 3, 10, Math.PI / 8 );

// (4) Scene
var scene = new THREE.Scene();
for (var cnt = 0 ; cnt < cubeArray.length; cnt++ ) {
    scene.add(cubeArray[cnt]);
}
for (var cnt = 0 ; cnt < lightArray.length; cnt++ ) {
    scene.add(lightArray[cnt]);
}
scene.add(spotLight);
scene.fog = new THREE.FogExp2(0x000020, 0.1);

// (5) Camera (視野角, アスペクト比(縦横比), 描画対象(最小距離), 描画対象(最大距離)
var camera = new THREE.PerspectiveCamera(90, width/height, 0.1, 100);
 
// (6) WebGL Renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
renderer.setClearColor(0x000000);
renderer.clear(true);
 
container.append(renderer.domElement);
 
// (7) Animation (Rotate)
function animation() {
    var time = (new Date()).getTime();
    
    var position = cource(time / 5000);
    camera.position.x = position.x;
    camera.position.y = position.y + 1.0;
    camera.position.z = position.z;
    camera.lookAt(new THREE.Vector3(position.dx, position.dy, position.dz));
    
    spotLight.position.set(position.x, position.y + 1.0, position.z);
    spotLight.target.position.set(position.x + position.dx, position.y + position.dy + 1.5, position.z + position.dz);
    
    renderer.render(scene, camera);
     
    requestAnimationFrame(animation);
}
 
animation();
    </script>
</body>
</html>


HTML


添付ファイル: filelight.html 1720件 [詳細] fileHilbert.js 1730件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS   sitemap
Last-modified: 2016-07-07 (木) 22:18:02 (3076d)
Short-URL: http://at-sushi.com/pukiwiki/index.php?cmd=s&k=34737304a8
ISBN10
ISBN13
9784061426061