Three.js学习（一）

详细请移步three.js官网（http://threejs.org/），闲话不多，直接开始。

引入js文件

jquery.min.js

build/three.min.js

examples/js/libs/dat.gui.min.js

examples/js/Detector.js

examples/js/libs/stats.min.js

开始步骤：

　　1.创建画板和渲染对象（container，renderer）

　　2.创建场景（scene）

　　3.创建底部网格线 地板Grid，非必须

　　4.创建相机（camera）

　　5.创建灯光（light)

　　6.加入鼠标控制(orbitControls),鼠标拖动旋转场景内的对象，非必须

　　7.开始渲染（render）

 

实现代码:

　　1.创建画板和渲染对象

function initThree(){
　　var container = document.createElement( 'div' ); //创建画布
　　　　document.getElementById( 'con' ).appendChild( container ) //将它放置ID为con的div里面
      //生成渲染器对象
    var renderer = new THREE.WebGLRenderer({
        antialias:true,//antialias:true/false是否开启反锯齿
        precision:"highp",//precision:highp/mediump/lowp着色精度选择
        alpha:true,//alpha:true/false是否可以设置背景色透明
        preserveDrawingBuffer:true,//preserveDrawingBuffer:true/false是否保存绘图缓冲
    });
}

　　2.创建场景（scene）

function initScene(){
    //设置场景
   var  scene = new THREE.Scene();
}

　　3.创建底部网格线 地板Grid，非必须

function initFloor(){

    //底部网格线 Grid
    var size = 300, step = 50;

    var geometry = new THREE.Geometry();

    for ( var i = - size; i <= size; i += step ) {

      geometry.vertices.push( new THREE.Vector3( - size, 0, i ) );
      geometry.vertices.push( new THREE.Vector3(   size, 0, i ) );

      geometry.vertices.push( new THREE.Vector3( i, 0, - size ) );
      geometry.vertices.push( new THREE.Vector3( i, 0,   size ) );

    }

    var material = new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } );

    var line = new THREE.LineSegments( geometry, material );

    scene.add( line );

}

 

　　4.创建相机（camera）

function initCamera(){
    //摄像机和它的参数
    var VIEW_ANGLE = 45; //相机角度
    var ASPECT = window.innerWidth/window.innerHeight;
    var NEAR = 0.1;
    var FAR = 20000;
    camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
    scene.add(camera); //加入场景中
    //设置相机的位置坐标x y z
    camera.position.set(0, 150, 400);
    camera.lookAt(scene.position);  
}

 

　　5.创建灯光（light)

function initLight() {
    var light = new THREE.PointLight(0xffffff);
          light.position.set(-100,200,100); //灯光位置x,y,z
    scene.add(light);

    // 增加外界环境光照  
    var ambientLight = new THREE.AmbientLight(0x111111);
    scene.add(ambientLight);
}

 

　　6.加入鼠标控制(orbitControls),鼠标拖动旋转场景内的对象，非必须

function initController(){

      //添加场景控制  鼠标旋转
      var orbitControls = new THREE.OrbitControls(camera, renderer.domElement);  
          orbitControls.autoRotate = true;//设置平面自动旋转
      
}

 

　　7.开始渲染（render）

var render = function() {
     //画布大小window.innerWidth  window.innerHeight
      renderer.setSize(window.innerWidth, window.innerHeight);
      //把渲染成的所有页面标签加入到webgl层中
      renderer.sortObjects = false;
      renderer.shadowMapSoft  = true;
      container.appendChild( renderer.domElement );
     
    renderer.clear();
    requestAnimationFrame(render);
    renderer.render(scene, camera);
};

确认步骤无bug后开始调用

function threeStart() {
    initThree(); //创建画板和渲染对象
    initScene(); //创建场景
    initFloor(); //创建底部网格线 地板
    initCamera(); //创建相机
    initLight(); //创建灯光
    initController()//加入鼠标控制
    render(); //渲染开始

} 

//奔跑吧，小牛仔！  ~o(^▽^)o

threeStart();