『一緒にthree.jsを学んでWebGL応用を構築する』第1課

11490 ワード

3 d httml 5 three.js webgl

WebGLの新しいシリーズの文章に力を入れる時だ.これは私たちの最初の授業で、私たちは主にいくつかの基本的な機能をしています:シーン、カメラ、レンダラー、コントローラ(OrbitControls)を作成します.また、単純な指向性光を作成し、いくつかのオブジェクト(異なるジオメトリ)のシャドウを追加します.より速くするために、最も流行しているWebGLフレームワークであるthree.jsを採用することにしました.なぜthreeを使うのかjs? 実際、オープンソースのJavaScriptフレームワークであり、最も急速に成長し、議論が活発なエンジンでもあります.ここでは、基本的な点やベクトルから、準備作業をするシーン、シェーダ、立体効果まで、多くの使用できるものが用意されています.
Live Demo
HTML
私たちはこのステップを省略することができますが、通常、私たちは授業ごとにします.これは私たちのこの授業のHTML構造です.



    
        
        
        WebGL With Three.js - Lesson 1 | Script Tutorials
        
         //     
    
    
        
        
        
        
         //

このコードでは、するすべてのライブラリをしました.
Javascript
たちのdemoとがそのをしているのをたことがあることをんでいます. たちはのをします.

たちのシーンはこうえます.

var lesson1 = {
    scene: null,
    camera: null,
    renderer: null,
    container: null,
    controls: null,
    clock: null,
    stats: null,

    init: function() { //    

    }
};

//       
function animate() {
    requestAnimationFrame(animate);
    render();
    update();
}

//        
function update() {
    lesson1.controls.update(lesson1.clock.getDelta());
    lesson1.stats.update();
}

//     
function render() {
    if (lesson1.renderer) {
        lesson1.renderer.render(lesson1.scene, lesson1.camera);
    }
}

//           lesson   
function initializeLesson() {
    lesson1.init();
    animate();
}

if (window.addEventListener)
    window.addEventListener('load', initializeLesson, false);
else if (window.attachEvent)
    window.attachEvent('onload', initializeLesson);
else window.onload = initializeLesson;

これはthreeです.jsはアプリケーションのなをします.ほとんどのものはinitメソッドでされます.
シーンの、カメラ、レンダリング
これらはたちのシーンのなです. のコードでは、カメラとなシャドウマッピングレンダリングをむのシーンがされます.

//       
this.scene = new THREE.Scene();

var SCREEN_WIDTH = window.innerWidth,
    SCREEN_HEIGHT = window.innerHeight;

//     
var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 1, FAR = 10000;
this.camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
this.scene.add(this.camera);
this.camera.position.set(-1000, 1000, 0);
this.camera.lookAt(new THREE.Vector3(0,0,0));

//     
this.renderer = new THREE.WebGLRenderer({antialias:true, alpha: false});
this.renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
this.renderer.setClearColor(0xffffff);

this.renderer.shadowMapEnabled = true;
this.renderer.shadowMapSoft = true;

//     
this.container = document.createElement('div');
document.body.appendChild(this.container);
this.container.appendChild(this.renderer.domElement);

//   
THREEx.WindowResize(this.renderer, this.camera);

たちはカメラを45 のにいて、のきさにして、WebGLRendererをにして、にたちのシーンをHTMLドキュメントにして、しかもブラウザのウィンドウのきさがする、THREExをいます.WindowResizeはレンダリングとカメラのをします.
OrbitControlとStats
カメラをあるコントロールできるようにjsはのコントロールをしてくれた.1つは、シーンでそののりをできるOrbitControlsです. さなプラグインstats.min.jsは、シーンの (FPS)をるのにちます.

//       (OrbitControls)
this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
this.controls.target = new THREE.Vector3(0, 0, 0);

//      
this.clock = new THREE.Clock();

//     
this.stats = new Stats();
this.stats.domElement.style.position = 'absolute';
this.stats.domElement.style.bottom = '0px';
this.stats.domElement.style.zIndex = 10;
this.container.appendChild( this.stats.domElement );

そこで、4つのをしました.
との
はシーンのなです. のチュートリアルでは、なシャドウをするため、もなをします.

//       
var dLight = new THREE.DirectionalLight(0xffffff);
dLight.position.set(1, 1000, 1);
dLight.castShadow = true;
dLight.shadowCameraVisible = true;
dLight.shadowDarkness = 0.2;
dLight.shadowMapWidth = dLight.shadowMapHeight = 1000;
this.scene.add(dLight);

//       
particleLight = new THREE.Mesh( new THREE.SphereGeometry(10, 10, 10), new THREE.MeshBasicMaterial({ color: 0x44ff44 }));
particleLight.position = dLight.position;
this.scene.add(particleLight);

//        
var groundGeometry = new THREE.PlaneGeometry(1000, 1000, 1, 1);
ground = new THREE.Mesh(groundGeometry, new THREE.MeshLambertMaterial({
    color: this.getRandColor()
}));
ground.position.y = 0;
ground.rotation.x = - Math.PI / 2;
ground.receiveShadow = true;
this.scene.add(ground);

ライトをするときに、castShadowとshadowCameraVisibleの2つのパラメータをします.これにより、がどこにあるかをにることができ、の (と )のをすることができます. をした、たちのがどこにあるかをにるために、のをしたことにもづくかもしれません. たちは1つのをとしてシャドウをします. たちがしたreceiveShadowパラメータはtrueです.

シーンにのオブジェクトをします. は1つのでなるのをします.このでは、されたがカラーリストからランダムにされます.

var colors = [
    0xFF62B0,
    0x9A03FE,
    0x62D0FF,
    0x48FB0D,
    0xDFA800,
    0xC27E3A,
    0x990099,
    0x9669FE,
    0x23819C,
    0x01F33E,
    0xB6BA18,
    0xFF800D,
    0xB96F6F,
    0x4A9586
];

getRandColor: function() {
    return colors[Math.floor(Math.random() * colors.length)];
}

CircleGeometry、CubeGeometry、CylinderGeometry、ExtrudeGeometry
ジオメトリオブジェクトは、なデータ( 、、など)で3 Dモデルをします. の、、をします.Extrude Geometryは、パスからきたをるためにされます. きたをります

//     
var circle = new THREE.Mesh(new THREE.CircleGeometry(70, 50), new THREE.MeshLambertMaterial({ color: this.getRandColor() }));
circle.rotation.x = - Math.PI / 2;
circle.rotation.y = - Math.PI / 3;
circle.rotation.z = Math.PI / 3;
circle.position.x = -300;
circle.position.y = 150;
circle.position.z = -300;
circle.castShadow = circle.receiveShadow = true;
this.scene.add(circle);

//     
var cube = new THREE.Mesh(new THREE.CubeGeometry(100, 100, 100), new THREE.MeshLambertMaterial({ color: this.getRandColor() }));
cube.rotation.x = cube.rotation.z = Math.PI * 0.1;
cube.position.x = -300;
cube.position.y = 150;
cube.position.z = -100;
cube.castShadow = cube.receiveShadow = true;
this.scene.add(cube);

//     
var cube = new THREE.Mesh(new THREE.CylinderGeometry(60, 80, 90, 32), new THREE.MeshLambertMaterial({ color: this.getRandColor() }));
cube.rotation.x = cube.rotation.z = Math.PI * 0.1;
cube.position.x = -300;
cube.position.y = 150;
cube.position.z = 100;
cube.castShadow = cube.receiveShadow = true;
this.scene.add(cube);

//         
var extrudeSettings = {
    amount: 10,
    steps: 10,
    bevelSegments: 10,
    bevelSize: 10,
    bevelThickness: 10
};
var triangleShape = new THREE.Shape();
triangleShape.moveTo(  0, -50 );
triangleShape.lineTo(  -50, 50 );
triangleShape.lineTo( 50, 50 );
triangleShape.lineTo(  0, -50 );

var extrude = new THREE.Mesh(new THREE.ExtrudeGeometry(triangleShape, extrudeSettings), new THREE.MeshLambertMaterial({ color: this.getRandColor() }));
extrude.rotation.y = Math.PI / 2;
extrude.position.x = -300;
extrude.position.y = 150;
extrude.position.z = 300;
extrude.castShadow = extrude.receiveShadow = true;
this.scene.add(extrude);

ジオメトリがされると、このジオメトリにづいたメッシュをできます.
IcosahedronGeometry、OctahedronGeometry、RingGeometry、ShapeGeometry
に、20 、8 、リング、shapegeometryオブジェクトでカスタマイズしたパス(シェイプ)の4つのをします.
// var icosahedron=new THREE.Mesh(new THREE.IcosahedronGeometry(70), new THREE.MeshLambertMaterial({ color: this.getRandColor() })); icosahedron.position.x = -100; icosahedron.position.y = 150; icosahedron.position.z = -300; icosahedron.castShadow = icosahedron.receiveShadow = true; this.scene.add(icosahedron);

//    
var octahedron = new THREE.Mesh(new THREE.OctahedronGeometry(70), new THREE.MeshLambertMaterial({ color: this.getRandColor() }));
octahedron.position.x = -100;
octahedron.position.y = 150;
octahedron.position.z = -100;
octahedron.castShadow = octahedron.receiveShadow = true;
this.scene.add(octahedron);

//  
var ring = new THREE.Mesh(new THREE.RingGeometry(30, 70, 32), new THREE.MeshLambertMaterial({ color: this.getRandColor() }));
ring.rotation.y = -Math.PI / 2;
ring.position.x = -100;
ring.position.y = 150;
ring.position.z = 100;
ring.castShadow = ring.receiveShadow = true;
this.scene.add(ring);

//     
var shapeG = new THREE.Mesh(new THREE.ShapeGeometry(triangleShape), new THREE.MeshLambertMaterial({ color: this.getRandColor() }));
shapeG.rotation.y = -Math.PI / 2;
shapeG.position.x = -100;
shapeG.position.y = 150;
shapeG.position.z = 300;
shapeG.castShadow = shapeG.receiveShadow = true;
this.scene.add(shapeG);

SphereGeometry、TetrahedronGeometry、TorusGeometry、TorusKnotGeometry、TubeGeometry
に、、、、をします.

//   
var sphere = new THREE.Mesh(new THREE.SphereGeometry(70, 32, 32), new THREE.MeshLambertMaterial({ color: this.getRandColor() }));
sphere.rotation.y = -Math.PI / 2;
sphere.position.x = 100;
sphere.position.y = 150;
sphere.position.z = -300;
sphere.castShadow = sphere.receiveShadow = true;
this.scene.add(sphere);

//    
var tetrahedron = new THREE.Mesh(new THREE.TetrahedronGeometry(70), new THREE.MeshLambertMaterial({ color: this.getRandColor() }));
tetrahedron.position.x = 100;
tetrahedron.position.y = 150;
tetrahedron.position.z = -100;
tetrahedron.castShadow = tetrahedron.receiveShadow = true;
this.scene.add(tetrahedron);

//   
var torus = new THREE.Mesh(new THREE.TorusGeometry(70, 20, 16, 100), new THREE.MeshLambertMaterial({ color: this.getRandColor() }));
torus.rotation.y = -Math.PI / 2;
torus.position.x = 100;
torus.position.y = 150;
torus.position.z = 100;
torus.castShadow = torus.receiveShadow = true;
this.scene.add(torus);

//    
var torusK = new THREE.Mesh(new THREE.TorusKnotGeometry(70, 20, 16, 100), new THREE.MeshLambertMaterial({ color: this.getRandColor() }));
torusK.rotation.y = -Math.PI / 2;
torusK.position.x = 100;
torusK.position.y = 150;
torusK.position.z = 300;
torusK.castShadow = torusK.receiveShadow = true;
this.scene.add(torusK);

//         
var points = [];
for (var i = 0; i < 10; i++) {
    var randomX = -100 + Math.round(Math.random() * 200);
    var randomY = -100 + Math.round(Math.random() * 200);
    var randomZ = -100 + Math.round(Math.random() * 200);

    points.push(new THREE.Vector3(randomX, randomY, randomZ));
}
var tube = new THREE.Mesh(new THREE.TubeGeometry(new THREE.SplineCurve3(points), 64, 20), new THREE.MeshLambertMaterial({ color: this.getRandColor() }));
tube.rotation.y = -Math.PI / 2;
tube.position.x = 0;
tube.position.y = 500;
tube.position.z = 0;
tube.castShadow = tube.receiveShadow = true;
this.scene.add(tube);

チューブのにして,TubeGeometryはのセットをしてをすることをにした.
のスムーズモーション(Light Smooth Motion)
をスムーズにするには、updateメソッドにのコードをするだけです.

var timer = Date.now() * 0.000025;
particleLight.position.x = Math.sin(timer * 5) * 300;
particleLight.position.z = Math.cos(timer * 5) * 300;

~
WebGL With Three.js–Lesson 1はSegmentFaultによってコンパイルされます

lua5.3 tableの要素数を取得する

echartsグラフについては、親要素の幅に応じて適応します.