[3] Codevember 2017 - Tree

3-codevember-2017-tree.markdown

[3] Codevember 2017 - Tree

A Pen by Nexuscompute on CodePen.

License.

index.markdown

script.js

console.clear();

var ww = window.innerWidth,
  wh = window.innerHeight;

var renderer = new THREE.WebGLRenderer({
  antialias: true,
  canvas: document.querySelector("canvas")
});
renderer.shadowMap.enabled = true;
renderer.setSize(ww, wh);
renderer.setClearColor(0xcbc3b8);

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(45, ww / wh, 0.1, 1000);
var controls = new THREE.TrackballControls(camera);
controls.noZoom = true;
controls.noPan = true;
camera.position.x = -220;
camera.position.y = 120;
camera.position.z = 220;

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

var light = new THREE.SpotLight(0xffffff);
light.position.y = 120;
light.position.x = -320;
light.castShadow = true;
light.lookAt(new THREE.Vector3());
scene.add(light);
light.shadow.mapSize.width = 4096;
light.shadow.mapSize.height = 4096;
light.shadow.camera.far = 1000;

var light = new THREE.HemisphereLight(0xeeeeee, 0x080820, 1);
scene.add(light);

var groundGeom = new THREE.PlaneBufferGeometry(400, 400);
var matrixRotation = new THREE.Matrix4();
matrixRotation.makeRotationX(Math.PI * -0.5);
groundGeom.applyMatrix(matrixRotation);
var groundMat = new THREE.MeshPhongMaterial({
  color: 0x6d645c,
  shininess: 0
});
var ground = new THREE.Mesh(groundGeom, groundMat);
ground.receiveShadow = true;
scene.add(ground);

var positions = [];
var trees = new THREE.Group();
TweenMax.to(ground, 60, {
  three: {
    rotationY: 360
  },
  ease: Power0.easeNone,
  repeat: -1
});
ground.add(trees);
function createTree() {
  var tree = new THREE.Group();
  trees.add(tree);
  var attempt = 0;
  tree.position.x = (Math.random() - 0.5) * 350;
  tree.position.z = (Math.random() - 0.5) * 350;
  // Animation
  var tl = new TimelineMax();
  var speed = Math.random() + 1;
  tl.timeScale(speed);
  tl.add("log");
  var material = new THREE.MeshLambertMaterial({
    color: 0x41654b + (Math.random() - 0.5) * 20
  });
  var prevHeight = 0;
  var slices = 5;
  for (var i = 0; i <= slices; i++) {
    var index = i / slices;
    var height = Math.random() * 3 + 5;
    var top = index * (2 - index) * 3.5;
    var width = 2 + i * 2;
    var sides = Math.ceil(Math.random() * 2) + 4;
    var geometry = new THREE.CylinderGeometry(top, width, height, sides);
    for (var j = 0; j < geometry.vertices.length; j++) {
      var vector = geometry.vertices[j];
      if (
        Math.floor(vector.y * 10) / 10 !==
        Math.floor((height / 2) * 10) / 10
      ) {
        vector.x += (Math.random() - 0.5) * 1;
        vector.z += (Math.random() - 0.5) * 1;
      }
    }
    geometry.computeFlatVertexNormals();
    var cylinder = new THREE.Mesh(geometry, material);
    cylinder.position.y = -prevHeight - height / 2;
    cylinder.rotation.y = Math.random() * Math.PI * 2;
    cylinder.castShadow = true;
    cylinder.receiveShadow = true;
    prevHeight += height;
    tree.add(cylinder);
    tl.from(
      cylinder,
      1,
      {
        ease: Elastic.easeOut.config(1, 0.5),
        three: {
          scaleZ: 0.01,
          scaleX: 0.01,
          scaleY: 0.01,
          y: "-=1.5"
        }
      },
      "log+=" + (slices - i * 0.8 - 0.7)
    );
  }
  var geometry = new THREE.CylinderGeometry(1.2, 1.5, 3, 7);
  geometry.computeFlatVertexNormals();
  var material = new THREE.MeshLambertMaterial({ color: 0xa79375 });
  var log = new THREE.Mesh(geometry, material);
  log.position.y = -prevHeight - 1.5;
  tree.add(log);
  tree.position.y = prevHeight + 3;

  tl.from(
    log,
    1,
    {
      ease: Elastic.easeOut.config(1, 0.5),
      three: {
        scaleY: 0.01,
        y: "-=1.5"
      }
    },
    "log"
  );
  tl.from(
    tree,
    2,
    {
      ease: Elastic.easeOut,
      three: {
        rotationY: Math.random() * 720,
        scaleY: 3,
        y: "+=" + Math.random() * 20 + 20
      }
    },
    0
  );
}

function render(a) {
  requestAnimationFrame(render);
  controls.update();
  renderer.render(scene, camera);
}

function onResize() {
  ww = window.innerWidth;
  wh = window.innerHeight;
  camera.aspect = ww / wh;
  camera.updateProjectionMatrix();
  renderer.setSize(ww, wh);
}

for (var i = 0; i < 50; i++) {
  var delay = Math.random() * 20000;
  setTimeout(createTree, delay);
}

requestAnimationFrame(render);
window.addEventListener("resize", onResize);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/127738/TrackballControls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/127738/TweenMax.Three.js"></script>

style.scss

body {
  margin: 0;
  overflow: hidden;
}