0

I've recently started to play with three.js, and I am using terrain.js demo as a start for a design project I am working on.

I will like to add a hybrid shader "wireframe/lambert" the default comes with wire shader only.

This is the code from the demo, using basic material:

 var matrix = new THREE.MeshBasicMaterial({
            color:0x10ce58, 
            wireframe:true
        });

        var geometry = new THREE.PlaneGeometry(width, height, modelWidth, modelHeight); 
        mesh = new THREE.Mesh(geometry, matrix); 
        mesh.doubleSided = false;

and I tried something like this but I only get the "lambert" rendering and not the lambert and wire combined, any ideas?

    var darkMaterial = new THREE.MeshLambertMaterial( { color: 0xffffff , shading: THREE.FlatShading, overdraw: true} );
    var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x10ce58, wireframe: true, transparent: true } ); 
    var multiMaterial = [ darkMaterial, wireframeMaterial ]; 


        var geometry = new THREE.PlaneGeometry(width, height, modelWidth, modelHeight); 
        mesh = new THREE.Mesh(geometry, multiMaterial); 
        mesh.doubleSided = false;

Thanks for your time in advanced,

Regards

-Manuel

Manuqc
  • 11
  • 5
  • Instead of new THREE.Mesh try THREE.SceneUtils.CreateMultiMaterialObject – uhura Mar 27 '13 at 09:09
  • Hello Uhura, I tried to play around with "create multimaterial, but it does not seem to work. I am using the original terrain generator by qiao this time. As I had some issues trying to center the camera with the previous example. Both are pretty similar in the end. I ll post my example below. Thanks for your help! – Manuqc Mar 27 '13 at 22:53
  • This is a jsfiddle of the original "fractal terrain generator" from qiao's demo: http://jsfiddle.net/uSrsW/2/ and this is my work in progress, where I modified the embeded javascript to add multimaterial functionality,although I am getting nothing rendered yet. Not sure whats wrong. Here is the link: http://jsfiddle.net/xnqUb/3/ – Manuqc Mar 27 '13 at 23:00

1 Answers1

1

This is the code I am using in my non working example for materials (http://jsfiddle.net/xnqUb/3/)

var geometry = new THREE.PlaneGeometry(width, height, model.length - 1, model.length - 1, materials);
       materials = [
                     new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading, overdraw: true } ),
                     new THREE.MeshLambertMaterial({ color: 0x10ce58, wireframe: true,})
                ];

  var mesh = new THREE.Mesh(geometry); 

  object = THREE.SceneUtils.createMultiMaterialObject(geometry, materials);
Manuqc
  • 11
  • 5
  • Additionally I will like to get a very simple "trackball navigation" like on the following example: http://mrdoob.github.com/three.js/examples/misc_controls_trackball.html Hope you or someone can help me out a bit to get the multiple materials and trackball cam working, thanks for your help, I do appreciate it. – Manuqc Mar 27 '13 at 23:05
  • [I updated you fiddle](http://jsfiddle.net/uSrsW/4/) with THREE.SceneUtils.CreateMultiMaterialObject – uhura Mar 27 '13 at 23:26
  • Hi Uhura, Thanks a lot for helping me out! Although I realized that when the "polygon" count is higher I am getting some bugs: – Manuqc Mar 28 '13 at 16:19
  • any ideas on what can be causing this? Thanks again – Manuqc Mar 28 '13 at 16:21
  • Hi, I changed the value, on the "size" inside the html form, the issue does not look that strong on jsfiddle because its a small preview, but on a fullscreen is really distracting and it kinda loses its form (the wireframe) I raised the size (number of polygons in this example: http://jsfiddle.net/uSrsW/15/ – Manuqc Mar 28 '13 at 23:06
  • Hope you have an idea. For the record it is using three.js ver 47, I ve tried using the latest built but nothing gets rendered, not sure if this changes something or not... in case its a bug I mean. Thanks for your time :) – Manuqc Mar 28 '13 at 23:07
  • I am thinking that a way to overcome this issue might be to instead of using a pure shader, to use a tileable material as a pure color, what do you think? thanks – Manuqc Mar 28 '13 at 23:23
  • I ve been testing out many examples and finally I believe this issue is due simply because of the number of polygons, I thought it was a bug but it may just be normal to have display issues with the wireframe on high density meshes, maybe if more of a browser "issue"... so I ll kinda leave it like that I think – Manuqc Mar 28 '13 at 23:48