Tree Farm (#3December - Day 6)

script.js

console.clear();

var scene, camera, renderer, orbit, light;

scene = new THREE.Scene();
scene.fog = new THREE.Fog(0xF4F4F4, 20, 200);

camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 10, 200 );
camera.position.z = 70;
camera.position.y = 40;
camera.position.x = 60;

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0xF4F4F4 );
// renderer.shadowMap.enabled = true;
// renderer.shadowMap.type = THREE.PCFSoftShadowMap;
// renderer.gammaInput = true;
// renderer.gammaOutput = true;

window.addEventListener( 'resize', function () {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize( window.innerWidth, window.innerHeight );
}, false );

document.body.appendChild( renderer.domElement );

/*////////////////////////////////////////*/

orbit = new THREE.OrbitControls( camera, renderer.domElement );
orbit.enableZoom = true;
orbit.enablePan = true;
orbit.autoRotate = true;
orbit.autoRotateSpeed = 0.3;
orbit.minPolarAngle = 0;
orbit.maxPolarAngle = Math.PI * 0.45;

/*////////////////////////////////////////*/

// var ambient = new THREE.AmbientLight( 0x444444 );
// scene.add( ambient );

light = new THREE.PointLight( 0xffeeaa, 1, 0, Math.PI / 2 );
light.position.set( 0, 200, 100 );
light.target.position.set( 0, 0, 0 );
//light.castShadow = true;
scene.add( light );

// light = new THREE.PointLight( 0xffeeaa, 0.6, 0 );
// light.position.set(0, 200, 100);
// light.castShadow = true;
// // light.shadow = new THREE.SpotLightShadow( new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 200 ) );
// // light.shadow.bias = 0.1;
// // light.shadow.mapSize.width = 1024;
// // light.shadow.mapSize.height = 1024;
// scene.add( light );


let hemiLight = new THREE.HemisphereLight( 0xffeeaa, 0xaaeeff, 0.6 );
//hemiLight.color.setRGB(0.75,0.8,0.95);
hemiLight.position.set( 0, 100, 0 );
scene.add( hemiLight );


/*////////////////////////////////////////*/

let landscapeGroup = new THREE.Object3D();
scene.add(landscapeGroup);

let geometry = new THREE.PlaneGeometry( 400, 400, 12, 12 );

let material = new THREE.MeshPhongMaterial({ 
  color: 0xCCCCCC, 
  shininess: 200,
  side: THREE.FrontSide,
  shading: THREE.SmoothShading
}); 
let plane = new THREE.Mesh( geometry, material );
//plane.castShadow = true;
plane.receiveShadow = true;

landscapeGroup.add( plane );

/*////////////////////////////////////////*/

let treeMaterial = new THREE.MeshLambertMaterial( {
  color: 0x2C9E4B,
  shininess: 100,
  side: THREE.FrontSide,
  shading: THREE.SmoothShading
});

function Cone(size, translate){
  size = size || 10;
  this.geometry = new THREE.CylinderGeometry( size / 2, size, size, 6 );
  if ( translate ) {
    this.geometry.applyMatrix( new THREE.Matrix4().makeTranslation(0, size, 0) );
  }
  THREE.Mesh.call(this, this.geometry, treeMaterial);
}

Cone.prototype = Object.assign(THREE.Mesh.prototype,{ 
  constructor: Cone,
  castShadow: true,
  receiveShadow: true
});

/*////////////////////////////////////////*/

function Tree(size) {

  size = size || 6 + Math.random();

  THREE.Object3D.call(this);

  let lastCone;
  let cone;

  for (let i = 0; i < size; i++) { 
    cone = new Cone( (size - i) + 1, i);
    cone.position.y = 0;
    if ( lastCone ) { 
      let box = new THREE.Box3().setFromObject( lastCone );
      cone.position.y = (box.max.y + box.min.y) / 2;
    } else {
      cone.position.y += 2;
    }
    lastCone = cone;
    this.add( cone );
  }

};

Tree.prototype = Object.assign(THREE.Object3D.prototype,{ 
  constructor: Tree,
  castShadow: true,
  receiveShadow: true
});

/*////////////////////////////////////////*/

let trees = [];

for (let i = 0; i < plane.geometry.vertices.length; i++) {
  plane.geometry.vertices[i].z = Math.sin(i * i) * 6; //(Math.random() - 0.5) * 10;

  let tree = new Tree;
  tree.rotation.x = Math.PI/-2;

  tree.position.copy(plane.geometry.vertices[i]);
  tree.position.x += ( Math.random() - 0.5 ) * 2;//(treeCount/2 - i) * 30;
  tree.position.y += 2 * ( Math.random() - 0.5 );
  trees.push(tree);
  landscapeGroup.add(tree);
}

landscapeGroup.rotation.x = Math.PI/2;
//plane.position.y = 10;
plane.geometry.verticesNeedUpdate = true;
plane.geometry.normalsNeedUpdate = true;
plane.geometry.computeFaceNormals(); 


/*////////////////////////////////////////*/


function makeSprite(){
  const PI2 = Math.PI * 2;
  let canvas = document.createElement('canvas'),
      ctx = canvas.getContext('2d');

  let spriteSize = 16;
  canvas.width = canvas.height = spriteSize * 2;
  ctx.fillStyle = '#FFF';
  ctx.beginPath();
  ctx.arc( spriteSize, spriteSize, spriteSize, 0, PI2, true );
  ctx.fill();

  let sprite = new THREE.Texture(canvas);
  sprite.needsUpdate = true;

  return sprite;
}

function pointsParticles(){

  let pointGeometry = new THREE.Geometry();

  for ( i = 0; i < 250; i ++ ) {
    var vertex = new THREE.Vector3();
    vertex.x = Math.random() * 150 - 75;
    vertex.y = Math.random() * 200;
    vertex.z = Math.random() * 150 - 75;
    pointGeometry.vertices.push( vertex );
  }

  pointGeometry.verticesNeedUpdate = true;
  pointGeometry.normalsNeedUpdate = true;
  pointGeometry.computeFaceNormals(); 

  let pointMaterial = new THREE.PointsMaterial( { 
    //size: 16, 
    map: makeSprite(), 
    blending: THREE.AdditiveBlending, 
    depthTest: true, 
    transparent : true
  });

  particles = new THREE.Points( pointGeometry, pointMaterial );
  scene.add(particles);
  console.log( particles.geometry );//.length, Object.keys(particles) );

  return function(count){
    particles.geometry.vertices.forEach( (vertex, i) => {
      vertex.x += Math.sin(count + i) * 0.1;
      vertex.y -= 0.2;
      if ( vertex.y < 0 ) { vertex.y = 200; }
    });
    particles.geometry.verticesNeedUpdate = true; 
  }
}
let updateParticles = pointsParticles();


function spriteParticles() {
  let particles = new THREE.Group();
  let pointMaterial = new THREE.SpriteMaterial({ 
    map: makeSprite(),  
    color: 0xFF0000, 
    fog: true
  });
  for ( var i = 0; i < 500; i++ ) {
    let particle = new THREE.Sprite( pointMaterial );
    particle.position.x = Math.random() * 400 - 200;
    particle.position.y = Math.random() * 200;
    particle.position.z = Math.random() * 400 - 200;
    particle.scale.x = particle.scale.y = Math.random();
    particles.add( particle );
  }

  scene.add(particles);

  return function(count){
    if ( particles ) {
      particles.children.forEach( (particle, i) => {
        particle.position.y -= 0.6;
        particle.position.x += Math.sin(count + i) * 0.3;
        if ( particle.position.y < 0 ) { particle.position.y = 200; }
      });
    }
  }
}
//let updateParticles = spriteParticles();

/*////////////////////////////////////////*/

let count = 0;

function render () {
  requestAnimationFrame( render );
  count += 0.02;
  orbit.update();
  if ( updateParticles ) { updateParticles(count); }
  renderer.render( scene, camera );
};

render();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://threejs.org/examples/js/renderers/CanvasRenderer.js"></script>

style.less

canvas { display: block; }

tree-farm-3december-day-6.markdown

Tree Farm (#3December - Day 6)

A Pen by Shaw on CodePen.

License.