Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <body>
  <div id="world" class="world"> </div>
  
 
   <script id="normalVertexShader" type="x-shader/x-vertex">
      
      varying vec3 P;
      varying vec3 N;
      varying vec3 L;
      varying vec3 V;
      varying vec3 H;

      uniform vec3 lightPosition;
      uniform vec3 eyePosition;

      varying vec2 vUv;

      attribute vec3 tangent;
      attribute vec3 bitangent;

      void main() {
         vUv = uv; //uv is built-in

         vec3 surfaceNormal = (modelViewMatrix * normalize(vec4(normal,0.0))  ).xyz;
         vec3 norm = normalize(surfaceNormal);


         vec3 tang = (modelViewMatrix * normalize(vec4(tangent, 0.0))).xyz;
         vec3 bitang = (modelViewMatrix * normalize(vec4(bitangent, 0.0))).xyz;
          
         mat3 toTangentSpace = mat3(
            tang.x, bitang.x, norm.x,
            tang.y, bitang.y, norm.y,
            tang.z, bitang.z, norm.z
         );

         P = position.xyz; //P = point
         N = normal; //Normal
         L = normalize( toTangentSpace * (lightPosition - P));

         V = normalize( toTangentSpace * (eyePosition - P));
         H = normalize (L + V); //Same as mix 0.5

         gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
      }

    </script>

    <script id="normalFragmentShader" type="x-shader/x-fragment">

      varying vec3 P;
      varying vec3 N;
      varying vec3 L;
      varying vec3 V;
      varying vec3 H;


      uniform vec3 globalAmbient;
      uniform vec3 lightColor;

      uniform vec3 Ke;
      uniform vec3 Ka;
      uniform vec3 Kd;
      uniform vec3 Ks;
      uniform float shininess;
      uniform vec3 lightPosition;
      vec4 colour;

      //Distance atten
      uniform float Kc;
      uniform float Kl;
      uniform float Kq;


      uniform sampler2D baseTexture;
      uniform sampler2D normalMap;
      varying vec2 vUv;

      void main() {

      vec4 texture = texture2D( baseTexture, vUv );

        vec3 normal = normalize(N);
        normal = texture2D( normalMap, vUv ).xyz * 2.0 - 1.0;

       //Emissive
       vec3 emissive = Ke ;

       //Ambient
       vec3 ambient = Ka  * globalAmbient;

       //Diffuse
       float diffuseLight = max(dot(normal, L), 0.0);
       vec3 diffuse = Kd * lightColor * diffuseLight;

       //Specular term
       
       float specularLight = pow(max (dot (normal, H), 0.0), shininess);

       if (diffuseLight <= 0.0) specularLight = 0.0;

       vec3 specular = Ks  * lightColor * specularLight;

       float d = distance (P, lightPosition);
       float atten = 1.0 /(Kc + Kl * d + Kq * d * d);

       colour.xyz = emissive + ambient + atten * (diffuse + specular);
       colour.w = 1.0;


        gl_FragColor= colour * texture ;
      }

    </script>

</body>
              
            
!

CSS

              
                

html, body {
  margin: 0;
  overflow: hidden;
  height:100%;
  min-height:100%;/*for mozilla*/
  background: linear-gradient(#4286f4, #e0eaf9); 
}


.world {
  margin: 0;
  overflow: hidden;
  height:100%;
  min-height:100%;/*for mozilla*/
  background: white
}

              
            
!

JS

              
                //Json store for models http://myjson.com/1ez4y3
//For images, use public github + rawgit https://rawgit.com/

/*
//Texture loading helper:
var textureLoader = new THREE.TextureLoader();
textureLoader.crossOrigin = "anonymous";
var stonetexture = textureLoader.load("https://cdn.rawgit.com/antu3199/WebAssets/aceb48c0/textures/stonePattern.jpg");
var normaltexture = textureLoader.load("https://cdn.rawgit.com/antu3199/WebAssets/aceb48c0/textures/normal2.jpg");
var pikachutexture = textureLoader.load("https://cdn.rawgit.com/antu3199/WebAssets/aceb48c0/textures/pikachu.png");
*/
var textureLoader = new THREE.TextureLoader();
textureLoader.crossOrigin = "anonymous";
var stonetexture = textureLoader.load("https://cdn.rawgit.com/antu3199/WebAssets/aceb48c0/textures/stonePattern.jpg");
var stoneNormalMap = textureLoader.load("https://cdn.rawgit.com/antu3199/WebAssets/aceb48c0/textures/normal2.jpg");

var uniforms = {
  globalAmbient: { value: new THREE.Vector3(0.1, 0.1, 0.1) }, //red
  lightColor: { value: new THREE.Vector3(1.0, 1.0, 1.0) }, //red
  lightPosition: { value: new THREE.Vector3(1.5, 1.5, 1.5) }, //red
  eyePosition: { value: new THREE.Vector3(0.0, 0.0, 5.0) }, //red
  Ke: { value: new THREE.Vector3(0.3, 0.3, 0.3) }, //red
  Ka: { value: new THREE.Vector3(0.0, 0.3, 0.0) }, //red
  Kd: { value: new THREE.Vector3(0.2, 0.4, 0.4) }, //red
  Ks: { value: new THREE.Vector3(0.8, 0.8, 0.8) }, //red
  shininess: { value: 0.5 }, //red
  Kc: { value: 0.1 }, //smaller = brighter
  Kl: { value: 0.1 },
  Kq: { value: 0.1 },
  baseTexture: { type: "t", value: stonetexture },
  normalMap: { type: "t", value: stoneNormalMap }
};

var params = {
  containerName: "world",
  uniforms: uniforms,
  vertexShader: "normalVertexShader",
  fragmentShader: "normalFragmentShader",
  mode: "",
  createCubes: false
};

var newWorld = new newThreeJSProgram(params);
newWorld.init(createWorld);

function createWorld() {
  newWorld.createScene();
  newWorld.addSphereAtLocation(new THREE.Vector3(1.5, 1.5, 1.5));

  //Attributes
  var bufferGeometry = new THREE.BufferGeometry();
  bufferGeometry.fromGeometry(newWorld.getCubeGeom());

  var positionAttributes = bufferGeometry.getAttribute("position");
  var uvAttributes = bufferGeometry.getAttribute("uv");

  var realVertices = [];
  var realUvs = [];

  for (var i = 0; i < positionAttributes.array.length; i += 3) {
    realVertices.push(
      new THREE.Vector3(
        positionAttributes.array[i + 0],
        positionAttributes.array[i + 1],
        positionAttributes.array[i + 2]
      )
    );
  }

  for (var i = 0; i < uvAttributes.array.length; i += 2) {
    realUvs.push(
      new THREE.Vector2(uvAttributes.array[i], uvAttributes.array[i + 1])
    );
  }

  var tangents = new Float32Array(positionAttributes.array.length);
  var bitangents = new Float32Array(positionAttributes.array.length);

  var tangArray = [];
  var bitangentArray = [];

  for (var i = 0; i < realVertices.length; i += 3) {
    var v0 = realVertices[i + 0];
    var v1 = realVertices[i + 1];
    var v2 = realVertices[i + 2];

    var uv0 = realUvs[i + 0];
    var uv1 = realUvs[i + 1];
    var uv2 = realUvs[i + 2];

    var deltaPos1 = v1.sub(v0);
    var deltaPos2 = v2.sub(v0);

    var deltaUV1 = uv1.sub(uv0);
    var deltaUV2 = uv2.sub(uv0);

    var r = 1.0 / (deltaUV1.x * deltaUV2.y - deltaUV1.y * deltaUV2.x);
    var tangent = deltaPos1
      .multiplyScalar(deltaUV2.y)
      .sub(deltaPos2.multiplyScalar(deltaUV1.y))
      .multiplyScalar(r); //p1 * uv2.y - p2 * uv1.y
    var bitangent = deltaPos2
      .multiplyScalar(deltaUV2.x)
      .sub(deltaPos1.multiplyScalar(deltaUV2.x))
      .multiplyScalar(r);

    tangArray.push(tangent.x);
    tangArray.push(tangent.y);
    tangArray.push(tangent.z);

    tangArray.push(tangent.x);
    tangArray.push(tangent.y);
    tangArray.push(tangent.z);

    tangArray.push(tangent.x);
    tangArray.push(tangent.y);
    tangArray.push(tangent.z);

    bitangentArray.push(bitangent.x);
    bitangentArray.push(bitangent.y);
    bitangentArray.push(bitangent.z);

    bitangentArray.push(bitangent.x);
    bitangentArray.push(bitangent.y);
    bitangentArray.push(bitangent.z);

    bitangentArray.push(bitangent.x);
    bitangentArray.push(bitangent.y);
    bitangentArray.push(bitangent.z);
  }

  for (var i = 0; i < bitangentArray.length; i++) {
    tangents[i] = tangArray[i];
    bitangents[i] = bitangentArray[i];
  }

  bufferGeometry.addAttribute(
    "tangent",
    new THREE.BufferAttribute(tangents, 3)
  );
  bufferGeometry.addAttribute(
    "bitangent",
    new THREE.BufferAttribute(bitangents, 3)
  );

  newWorld.setCubeMaterial();
  newWorld.createBufferedGeometry(bufferGeometry);
}

              
            
!
999px

Console