geometry materials in THREE.js

Question

I am creating a geometry in THREE.js:

var dotGeometry = new THREE.Geometry();
dotGeometry.dynamic = true;

var createDot = function (group, x, y, z){
    group.vertices.push(new THREE.Vector3( x, y, z));
}

var width = 300;
var height = 300;
var gap = 0.1;

for(var i = 0; i < width; i++){
    for(var j = 0; j < height; j++){
        createDot(dotGeometry, i*gap, j*gap, 0);
    }
}

as long as I use the points material, everything works fine - I can see my geometry:

var dotMaterial = new THREE.PointsMaterial( { size: 1, color: 0xffffff, sizeAttenuation: false } );
var dot = new THREE.Points( dotGeometry, dotMaterial );
scene.add( dot );

but as soon as I want to use any other material to see something like a "solid" surface, I can't see anything, for example:

var dotMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff } );
var dot = new THREE.Points( dotGeometry, dotMaterial );
scene.add( dot );

does geometry only work together with PointsMaterial or what am I doing wrong?

Example 1: Working

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

var renderer = new THREE.WebGLRenderer();

var light = new THREE.PointLight(0xffffff, 1);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var dotGeometry = new THREE.Geometry();
dotGeometry.dynamic = true;

var createDot = function (group, x, y, z){
    group.vertices.push(new THREE.Vector3( x, y, z));
}

var width = 300;
var height = 300;
var gap = 0.1;

for(var i = 0; i < width; i++){
    for(var j = 0; j < height; j++){
        createDot(dotGeometry, i*gap, j*gap, 0);
    }
}

var dotMaterial = new THREE.PointsMaterial( { size: 1, color: 0xffffff, sizeAttenuation: false } );
var dot = new THREE.Points( dotGeometry, dotMaterial );

scene.add( dot );
scene.add(light);

camera.position.z = 5;
light.position.y = 2;
light.position.z = 5;
light.position.x = 0;

var render = function() {
  requestAnimationFrame(render);

  dot.rotation.x += 0.01;
  dot.rotation.y += 0.01;

  renderer.render(scene, camera);
};

render();

body {
  margin: 0;
}

canvas {
  width: 100%;
  height: 100%
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>

Example 2: Not working

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

var renderer = new THREE.WebGLRenderer();

var light = new THREE.PointLight(0xffffff, 1);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var dotGeometry = new THREE.Geometry();
dotGeometry.dynamic = true;

var createDot = function (group, x, y, z){
    group.vertices.push(new THREE.Vector3( x, y, z));
}

var width = 300;
var height = 300;
var gap = 0.1;

for(var i = 0; i < width; i++){
    for(var j = 0; j < height; j++){
        createDot(dotGeometry, i*gap, j*gap, 0);
    }
}

var dotMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff } );
var dot = new THREE.Points( dotGeometry, dotMaterial );

scene.add( dot );
scene.add(light);

camera.position.z = 5;
light.position.y = 2;
light.position.z = 5;
light.position.x = 0;

var render = function() {
  requestAnimationFrame(render);

  dot.rotation.x += 0.01;
  dot.rotation.y += 0.01;

  renderer.render(scene, camera);
};

render();

body {
  margin: 0;
}

canvas {
  width: 100%;
  height: 100%
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>

Thanks for any help!

Minimal example of the code needed to replicate the problem. A CodePen, a Fiddle or the like. — Juan Ferrer
@JuanFerrer all the code is in my question. you just need to include the three-library. haven't got the time to build a fiddle right now, I maybe will provide one later. — low_rents
@low_rents I edited your question to add the 2 snippets. That is an example. — Juan Ferrer

Juan Ferrer Juan Ferrer · Accepted Answer · 2017-09-22T14:36:13

Something you could do is use your geometry.vertices to populate a ConvexGeometry (you will need to link to ConvexGeometry.js and QuickHull.js).

You create your geometry as you did before

dotGeometry.vertices.push(new THREE.Vector3(0, 0, 0));

Then you will need to pass that onto your ConvexGeometry like so:

var geometry = new THREE.ConvexGeometry(dotGeometry.vertices);

After that, you apply your material as usual.

var material = new THREE.MeshPhongMaterial({
    color: 0xffffff
});
var mesh = new THREE.Mesh(geometry, material);

Here's an example in CodePen;

This is assuming you need a convex shape. If you just need a plane, use a PlaneGeometry.

r87

geometry materials in THREE.js

1 Answers