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.


var material = new THREE.MeshNormalMaterial();


The basic material is not effected by light or shadows.

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


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});


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


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 } );


Here is the code of the examples.

  <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() {
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 );
    camera.lookAt(new THREE.Vector3( 0, 5, 0 ));
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    var controls = new THREE.OrbitControls( camera, renderer.domElement );
    //show canvas
    //material for all geometries
    var material = new THREE.MeshNormalMaterial();
    var geometry = new THREE.PlaneGeometry(10, 10);
    var plane = new THREE.Mesh( geometry, material );
    var geometry = new THREE.CubeGeometry(1,1,1);
    var cube = new THREE.Mesh( geometry, material );
    scene.add( cube );
    var geometry = new THREE.CylinderGeometry(1, 0.5, 2, 50, 50, false);
    var cylinder = new THREE.Mesh( geometry, material );
    cylinder.rotation.x = -Math.PI / 2;
    scene.add( cylinder );

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

Keine Kommentare:

Kommentar veröffentlichen