Three.js 頂点ごとに色をセットする

threejs-vertex-color.png

<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
  <script>
    var width=200;
    var height=200;
    var scene = new THREE.Scene(); 
    var camera = new THREE.OrthographicCamera ( -1.0, 1.0,1.0, -1.0, 0.1, 2000 );
    camera.position.z = 5;
    var controls = new THREE.OrbitControls(camera);
 
    var renderer = new THREE.WebGLRenderer({ alpha: true ,antialias:true});
    renderer.setClearColor( new THREE.Color(0xffffff),0.0);//背景色
    renderer.setSize(width, height);
    document.body.appendChild(renderer.domElement); 
 
    var geoPlane =  new THREE.PlaneGeometry( 1, 1, 10, 10 );
    var baseMaterial = new THREE.MeshBasicMaterial( { color: 0x533E25, wireframe:true} );
    var mesh =new THREE.Mesh(geoPlane,baseMaterial);
     scene.add(mesh);
 
    var geometry =  new THREE.Geometry();
    for ( i = 0; i < 20; i ++ ) {
    var vertex = new THREE.Vector3();
    vertex.x = Math.random()-0.5;
    vertex.y = Math.random()-0.5;
    vertex.z = 0.0;
    geometry.vertices.push( vertex );
    geometry.colors.push(new THREE.Color(Math.random()*0xffffff));
   }
 
    var material = new THREE.PointsMaterial({ size:0.3,sizeAttenuation:true,vertexColors: THREE.VertexColors});
    var points = new THREE.Points(geometry, material);
    scene.add(points);
 
 render();
function render() {
    requestAnimationFrame( render );
    controls.update();
    renderer.render( scene, camera );
}
</script>
</body>

サポートサイト Wikidot.com