shader material pointsize

by grano

HTML

<script src="https://threejs.org/examples/jsm/loaders/PLYLoader.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/models/ply/ascii/dolphins.ply"></script>
<script src="//cdn.rawgit.com/aframevr/aframe/v1.1.0/dist/aframe-v1.1.0.min.js"></script>
<script src="https://cdn.rawgit.com/tizzle/aframe-orbit-controls-component/master/dist/aframe-orbit-controls-component.min.js"></script>
  
<!-- <script src="https://threejs.org/build/three.js"></script> -->
 <script id="vs" type="x-shader/x-vertex">
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;

attribute vec3 position;

void main() {
    vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
    gl_Position = projectionMatrix * mvPosition;
    float perspective = 2.0 / length( mvPosition.xyz );

   
}
</script>

<script id="fs" type="x-shader/x-fragment">
void main() {
    gl_FragColor = vec4(1, 0, 0, 0.3);
}
</script>


<script>
const pointsComponent = {
  init() {
    console.log('!!!!!!!!')
    var geometry = new THREE.BoxBufferGeometry( 10, 1, 10, 60, 60, 60 );    
/*     var material = new THREE.MeshBasicMaterial({color: 'red'}) */
      var material = new THREE.RawShaderMaterial( { 
//       var material = new THREE.ShaderMaterial( {
        vertexShader: document.getElementById( 'vs' ).textContent,
        fragmentShader: document.getElementById( 'fs' ).textContent
    } );   
    let points = new THREE.Points( geometry, material );
    const group = new THREE.Group()
    /* console.log('group',    material.) */
    this.el.setObject3D('mesh', points)
  },

  tick(time) {
  },
}
AFRAME.registerComponent('points', pointsComponent)

</script>





<a-scene>
    <a-entity points position="0 1.25 -1"></a-entity>
<!--     <a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere> -->
    <a-box position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depth="1"  color="#4CC3D9"></a-box>
    <a-cylinder position="1 0.75 1" radius="0.5" height="1.5"...

CSS

body {
	  margin: 0;
}

JavaScript

/* var camera, scene, renderer, lines;

init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
    camera.position.z = 6;
    camera.position.y = 2;


    scene = new THREE.Scene();
    scene.background = new THREE.Color( 0xffffff );

    var geometry = new THREE.BoxBufferGeometry( 10, 1, 10, 60, 60, 60 );
//		var wireframeGeometry = new THREE.WireframeGeometry( geometry );
    
    var material = new THREE.RawShaderMaterial( {
//        transparent: true,
        vertexShader: document.getElementById( 'vs' ).textContent,
        fragmentShader: document.getElementById( 'fs' ).textContent
        
    } );
    

    lines = new THREE.Points( geometry, material );
    scene.add( lines );
//    camera.lookAt(lines)

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

}

function animate() {

    requestAnimationFrame( animate );

//   lines.rotation.x += 0.01;
  // lines.rotation.y += 0.02;

    renderer.render( scene, camera );

} */