three.js收藏的一些代码片段

#Global Variables
var category
background ={
    scene: {bgP: {}, bgF1:{}, bgF2:{}},
    currImage: {imgP: null, imgF1: null, imgF2:null},
}

## 读取类别标签，每个标签插入一个按钮
getLabels(labelColorFile){ crateCategory(labelData)}

```
void readMeta(){
    // 加载三种相机内参数
    loadXmlIntrinsic();
    void init();
    autoLoad();
    setupStat();
    animate();
}
```
```
var controlHandler = {
    orthographic: false,
    meshView: false,
    showAnnotation: true,
    showCam: true,// 显示相机
    imageOpacity: OPACITY.current,
    activeView3D: 1,
    autoCenter: true,
    autoGround: true,
    ptSizescaleFactor: 18,
    dispMode: 0,
    showInstance: true,
    showStuff: true,
    updateStuff: false,
    planarStuff: false,
    showTimer: true,
    showFrame: false,
    refineview: 0,
    refinezoom: false,
    //instanceMode: false,
};
```

```
function loadCameraParaMultiple(dir, filename) {
loadCameraParaSingle(dir, camList[i], i, modes[m], camList.length);
loadAllImgs(frame.frame_perspective, frame.frame_fisheye, frame.currImg);
}
```

## 顶点数组法显示点云
```
var particles = 500000;
var geometry = new THREE.BufferGeometry();
var positions = [];
var colors = [];
var color = new THREE.Color();
var n = 1000, n2 = n / 2; // particles spread in the cube

for ( var i = 0; i < particles; i ++ ) {
    // positions
   var x = Math.random() * n - n2;
   var y = Math.random() * n - n2;
   var z = Math.random() * n - n2;
   positions.push( x, y, z );

   // colors
   var vx = ( x / n ) + 0.5;
   var vy = ( y / n ) + 0.5;
   var vz = ( z / n ) + 0.5;
   color.setRGB( vx, vy, vz );
   colors.push( color.r, color.g, color.b );
}
// color 和 position是默认的属性名称
geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
geometry.computeBoundingSphere();

var material = new THREE.PointsMaterial( { size: 15, vertexColors: THREE.VertexColors } );
points = new THREE.Points( geometry, material );
scene.add( points );

```

## 将相机重建为一个几何体
```
  var camGeo = new THREE.CylinderGeometry( 1, 0, 1.5, 4);
        var singleCam = new THREE.Mesh( camGeo, new THREE.MeshBasicMaterial( { color: 0xffffff, transparent: true, opacity: 0.5}));
```

## 点云显示(顶点数组+ shader)
```
// 定义vertex shader
<script type="x-shader/x-vertex" id="vertexshader">
            uniform float amplitude;
            attribute float size; // 属性 与geometry.addAttribute对应
            attribute vec3 customColor;
            varying vec3 vColor;
            void main() {
                vColor = customColor;
                vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
                gl_PointSize = size * ( 300.0 / -mvPosition.z );
                gl_Position = projectionMatrix * mvPosition;

            }
</script>
// 定义fragment shader
<script type="x-shader/x-fragment" id="fragmentshader">
            uniform vec3 color;
            uniform sampler2D texture;
            varying vec3 vColor;
            void main() {
                gl_FragColor = vec4( color * vColor, 1.0 );
                gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord );
            }
</script>

 // 定义materials
 var material = new THREE.PointsMaterial( { size: 0.5, vertexColors:  THREE.VertexColors } );
 
 // 定义几何体
 var geometry = new THREE.BufferGeometry();
 var positions = new Float32Array( n_vertices * 3 );
 var colors = new Float32Array( n_vertices * 3 );
 var sizes = new Float32Array( n_vertices );

 //临时变量
 var vertex = new THREE.Vector3();
 var color = new THREE.Color( 0xffffff );
 for ( var i = 0; i < amount; i ++ ) {
    vertex.x = ( Math.random() * 2 - 1 ) * radius;
    vertex.y = ( Math.random() * 2 - 1 ) * radius;
    vertex.z = ( Math.random() * 2 - 1 ) * radius;
    vertex.toArray( positions, i * 3 );
       
        // set color
    if ( vertex.x < 0 ) {
        color.setHSL( 0.5 + 0.1 * ( i / amount ), 0.7, 0.5 );
    } else {
        color.setHSL( 0.0 + 0.1 * ( i / amount ), 0.9, 0.5 );
    }
    color.toArray( colors, i * 3 );
    // set point size
        sizes[ i ] = 10;
}
 geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
 geometry.addAttribute( 'customColor', new THREE.BufferAttribute( colors, 3 ) );
 geometry.addAttribute( 'size', new THREE.BufferAttribute( sizes, 1 ) );

```

#显示点云（顶点数组+shader2)
##文件shaderMaterial.js
```
PointCloudShader={
   vertexShader:[
       "uniform float size;",
        "attribute vec3 customColor;",
        "varying vec3 vColor;",
        "varying float vAlpha;",
        "void main()",
        "{",
          "vColor = customColor;",
          "vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
          "gl_Position = projectionMatrix * mvPosition;",
          "vAlpha = 1.0;",
          "gl_PointSize = size;",
        "}"
   ].join('\n'),

    fragmentShader:[
        "uniform vec3 color;",
        "varying vec3 vColor;",
        "varying float vAlpha;",
        "void main() {",
        "gl_FragColor = vec4(color*vColor, vAlpha );",
        "}"
    ].join('\n')
}
```
## index.html文件
```
<script src='shaderMaterial.js'></script> // 引用文件

// ply 加载点云
 var loader = new THREE.PLYLoader();
 loader.load( './points.ply', function ( geometry ) {
     var uniforms = {
                size:    { type: 'f', value: 1.0},
                color:     { value: new THREE.Color( 0xffffff ) }
         };
         // point cloud attributes-- array for each vertex
         var attributes = {
              customColor: { type: 'c', value: [] }
         };
          attributes.customColor.value = new Float32Array( geometry.attributes.position.count*3);
            for ( var i = 0; i < attributes.customColor.value.length; i ++ ) {
                attributes.customColor.value[ i] = geometry.attributes.color.array[i];
            }
            geometry.addAttribute( 'customColor', new THREE.BufferAttribute( attributes.customColor.value,3) );
            // put the geomery into shader
            shaderMaterial = new THREE.ShaderMaterial( {
                uniforms: uniforms,
                attributes: attributes,
                vertexShader: PointCloudShader.vertexShader,
                fragmentShader: PointCloudShader.fragmentShader
                //alphaTest: 0.9,
                //side: THREE.DoubleSide,
            } );
            var pointCloud = new THREE.PointCloud( geometry, shaderMaterial);
            scene3D.add(pointCloud);
            var center = pointCloud.geometry.boundingSphere.center;
            // trackball的指向设置为网格的center
            for (var v = 0; v < views.length; v++) {
                views[v].controls.target.set(center.x, center.y, center.z);
                views[v].controls.update();
            }
    });

```

##Three.js显示图像并调整曝光度

```
//Shader.js
PointCloudShader={
    vertexShader:[
        "uniform float size;",
        "uniform int isColoring;",

        "attribute vec3 defaultColor;",
        "attribute vec3 realColor;",

        "varying vec3 vColor;",
        "varying float vAlpha;",

        "void main()",
        "{",
        "if(isColoring==1){",
           "vColor = realColor;",
        "}" ,
        "else{",
           "vColor = defaultColor;",
        "}",

          "vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
          "gl_Position = projectionMatrix * mvPosition;",
          "vAlpha = 1.0;",
          "gl_PointSize = size;",
        "}"

].join('\n'),

    fragmentShader:[

        "uniform vec3      color;",
        "varying vec3      vColor;",
        "varying float     vAlpha;",

        "void main() {",
        "gl_FragColor = vec4(color*vColor, vAlpha );",
        "}"
    ].join('\n')
}


ImageShader={
    vertexShader:[
        "varying vec2  vUv;",

        "void main(){",
        "    vUv = uv;",
        "    gl_Position = projectionMatrix* modelViewMatrix*vec4(position,1.0);",
        "}"

    ].join('\n'),

    fragmentShader:[
        "uniform sampler2D tDiffuse;",
        "//uniform float exposure;",
        "//uniform float brightMax;",

        "varying vec2 vUv;",

        "void main(){",
           "vec4 color = texture2D(tDiffuse, vUv);",
           "//gl_FragColor = vec4( pow( exposure * color.xyz, vec3( 0.474 ) ), 1.0 );",
          "float Y = dot(vec4(0.30, 0.59, 0.11, 0.0), color);",
      "float YD = exposure * (exposure/brightMax + 1.0) / (exposure + 1.0);",
      "color *= YD;",
          "gl_FragColor = vec4( color.xyz, 1.0 );",
        "}"
    ].join('\n')
}
// HTML
<script src='shaders/shader.js'></script>
 var material = new THREE.ShaderMaterial({
                    uniforms: {
                        tDiffuse:  { value: new THREE.TextureLoader().load(imgFilePath)},
                        //exposure:  { value: 0.125 },
                        //brightMax: { value: 0.5 }
                    },
                    vertexShader: ImageShader.vertexShader,
                    fragmentShader: ImageShader.fragmentShader,
                    depthTest: false,
                    depthWrite: false
                });
```