Samstag, 7. September 2013

Three.js - Materials

There are different materials you can add to your objects. Some of them reqiure light, so don't forget to add some light to your scene.

Normal

var material = new THREE.MeshNormalMaterial();

Basic

The basic material is not effected by light or shadows.

var material = new THREE.MeshBasicMaterial({color: 0xff0000});

Lambert

This is a simple material wich is effected by light. A light source is required, such as point light or directional light.

var material = new THREE.MeshLambertMaterial({color: 0xffffff});

Phong

This material provides shininess.
    var material = new THREE.MeshPhongMaterial({
        // light
        specular: '#ffffff',
        // intermediate
        color: '#aaaaaa',
        // dark
        emissive: '#333333',
        shininess: 100 
      });

Texture

Keep in mind that texteres can look wierd on shaped objects like spheres. You have to make a "spherical projection" to change the image. It seems you have to host all images on your server.
var texture = THREE.ImageUtils.loadTexture( 'texture.jpg' );
 var material = new THREE.MeshLambertMaterial( { map: texture } );


Code

Here is the code of the examples.

<html>
<html>
 <head>
  <script src="three/build/three.min.js"></script>
  <script src="three/examples/js/controls/OrbitControls.js"></script>
  <script src="jquery-1.10.2.min.js"></script>
    
  <script type="text/javascript">
     
   $(function() {
   
    //scene
    var scene = new THREE.Scene();
    //camera
    var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 );
    camera.position.set(0,-12,5);
    camera.lookAt(new THREE.Vector3( 0, 5, 0 ));
    
    //renderer
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    
    //controls
    var controls = new THREE.OrbitControls( camera, renderer.domElement );
      
    //show canvas
    $("#canvas-container").html(renderer.domElement);
      
    
    //material for all geometries
    var material = new THREE.MeshNormalMaterial();
    
    //plane
    var geometry = new THREE.PlaneGeometry(10, 10);
    var plane = new THREE.Mesh( geometry, material );
    scene.add(plane);
   
    //cube
    var geometry = new THREE.CubeGeometry(1,1,1);
    var cube = new THREE.Mesh( geometry, material );
    cube.position.set(-3,0,0.5);
    scene.add( cube );
    
    
    //cylinder
    var geometry = new THREE.CylinderGeometry(1, 0.5, 2, 50, 50, false);
    var cylinder = new THREE.Mesh( geometry, material );
    cylinder.position.set(3,0,1);
    cylinder.rotation.x = -Math.PI / 2;
    scene.add( cylinder );

    //sphere
    var geometry = new THREE.SphereGeometry(1, 100, 100);
    var sphere = new THREE.Mesh( geometry, material );
    sphere.position.set(0,0,1);
    scene.add( sphere );
         
  
  
    //render scene
    var render = function () {
      requestAnimationFrame(render);
      renderer.render(scene, camera);
    };
      
    render();
      
   });
     
  </script>
    
 </head>
 <body style="background: black">
    
  <div id="canvas-container" style="position: absolute; left:0px; top:0px"></div>
    
 </body>
</html>

Keine Kommentare:

Kommentar veröffentlichen