LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
	
- Press and drag to turn around -

my other codepens | epic.net | Created initially for this project

CSS
@import url(https://fonts.googleapis.com/css?family=Open+Sans:800);

#world{
	position: absolute;
	width:100%;
	height: 100%;
	background: #cefaeb;
  overflow:hidden;
}

#credits{
  position:absolute;
  width:100%;
  margin: auto;
  bottom:0;
  margin-bottom:20px;
  font-family:'Open Sans', sans-serif;
  color:#f7e1be;;
  font-size:0.7em;
  text-transform: uppercase;
  text-align : center;
  line-height:1.5;
  letter-spacing: 2px;
}

#credits a {
  color:#dbf4e8;
}

#credits a:hover {
  color:#fb5d24;
}
JS
/*
Used initially for a client to create this greeting card :
http://www.meusinvest.be/2016/
*/

////////////////////////////////////////////////
//                  THREE JS RELATED VARIABLES
////////////////////////////////////////////////

var scene,
    camera, fieldOfView, aspectRatio, nearPlane, farPlane,
    renderer,
    container,
    controls,
    mouseDown = false;
////////////////////////////////////////////////
//                      SCREEN & MOUSE VARIABLES
////////////////////////////////////////////////

var HEIGHT, WIDTH, windowHalfX, windowHalfY,
    mousePos = { x: 0, y: 0 },
    oldMousePos = {x:0, y:0};

////////////////////////////////////////////////
//                           3D MODELS VARIABLES
////////////////////////////////////////////////
var floor, tree,
    globalWind = 0,
    trees = [],
    waitingParticles = [],
    flyingParticles = [],
    foliages = [],
    foliagesComplex = [];

////////////////////////////////////////////////
//                                   STATS & GUI
////////////////////////////////////////////////
var stats;
var parameters = {
  truncHeight:100,
  truncThickness:4,
  truncColor:Colors.grey_d,
  truncNoise:.5,
  foliageColor:"pinks",
  foliageDensity:5,
  foliageNoise:.05,
  foliageSize : 10,
  animationSpeed: 2.5,
};

function initGUI(){
  var gui = new dat.GUI();
  gui.width = 250;
  gui.add(parameters, 'truncHeight').min(60).max(110).step(10).name('Trunc Height');
  gui.add(parameters, 'truncThickness').min(2).max(6).step(1).name('Trunc Thickness');
  gui.add(parameters, 'truncNoise').min(0).max(5).step(.5).name('Trunc Disp.');
  gui.add(parameters, 'truncColor', {
    "Light White":Colors.white_l,
    "Dark White":Colors.white_d,
    "Light Grey":Colors.grey_l,
    "Dark Grey":Colors.grey_d
  }).name('Trunc Color');
  gui.add(parameters, 'foliageColor', {
    "White":"whites",
    "Grey":"greys",
    "Pink":"pinks",
    "Yellow":"yellows",
    "Purple":"purples"
  }).name('Foliage Color');
  gui.add(parameters, 'foliageDensity').min(3).max(8).step(1).name('Foliage Density');
  gui.add(parameters, 'foliageNoise').min(0).max(.2).step(.01).name('Foliage Disp.');
  gui.add(parameters, 'foliageSize').min(5).max(30).step(1).name('Foliage Size.');
  //gui.add(parameters, 'animationSpeed').min(1).max(4).step(.5).name('Anim. Speed');
  
  
  gui.add({generate:function(){createTree()}}, 'generate').name(">GENERATE");
}

////////////////////////////////////////////////
//                  INIT THREE JS, MOUSE, SCREEN
////////////////////////////////////////////////

function initCore() {
  
  HEIGHT = window.innerHeight;
  WIDTH = window.innerWidth;
  windowHalfX = WIDTH / 2;
  windowHalfY = HEIGHT / 2;

  scene = new THREE.Scene();
  var fogcol = 0xcefaeb;//0x1c0403
  scene.fog = new THREE.FogExp2( fogcol, 0.0028 ); //new THREE.Fog(fogcol, 300, 1000);
  aspectRatio = WIDTH / HEIGHT;
  fieldOfView = 60;
  nearPlane = .1;
  farPlane = 3000;
  camera = new THREE.PerspectiveCamera(
    fieldOfView,
    aspectRatio,
    nearPlane,
    farPlane
    );
  camera.position.x = 0;
  camera.position.z = 150;
  camera.position.y = 100;
  
  renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
  renderer.setSize(WIDTH, HEIGHT);
  renderer.shadowMap.enabled = true;
  
  container = document.getElementById('world');
  container.appendChild(renderer.domElement);
  
  window.addEventListener('resize', handleWindowResize, false);
  document.addEventListener('mousemove', handleMouseMove, false);
  document.addEventListener('touchmove', handleTouchMove, false);
  document.addEventListener('touchmove', handleTouchMove, false);
  document.addEventListener('mousedown', mouseDownHandler, false);
  document.addEventListener('mouseup', mouseUpHandler, false);
  
  //*
  controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.target = new THREE.Vector3(0,60,0);
  controls.minPolarAngle = -Math.PI*.45; 
  controls.maxPolarAngle = Math.PI*.45;
  controls.minDistance = 130;
  controls.maxDistance = 500;
  //controls.enabled = false;
  //controls.noZoom = true;
  //controls.noPan = true;
  //*/

  console.log(controls);
}

////////////////////////////////////////////////
//                  MOUSE EVENTS / SCREEN EVENTS
////////////////////////////////////////////////

function handleWindowResize() {
  HEIGHT = window.innerHeight;
  WIDTH = window.innerWidth;
  windowHalfX = WIDTH / 2;
  windowHalfY = HEIGHT / 2;
  renderer.setSize(WIDTH, HEIGHT);
  camera.aspect = WIDTH / HEIGHT;
  camera.updateProjectionMatrix();
}

function mouseDownHandler(event) {
  mouseDown = true;
} 
function mouseUpHandler(event) {
  mouseDown = false;
} 

function handleMouseMove(event) {
  mousePos = {x:event.clientX, y:event.clientY};
} 

function handleTouchMove(event) {
  if (event.touches.length == 1) {
    event.preventDefault();
    mousePos = {x:event.touches[0].pageX, y:event.touches[0].pageY};
  }
}
////////////////////////////////////////////////
//                                        RENDER
////////////////////////////////////////////////

function render(){
  if (controls && controls.enabled) controls.update();
  renderer.render(scene, camera);
}

////////////////////////////////////////////////
//                                        LIGHTS
////////////////////////////////////////////////
var gobalLight, shadowLight, backLight;

function createLights() {

  var globalLight = new THREE.HemisphereLight(Colors.white_d, Colors.white_d, .8)
  /*
  var pointLight = new THREE.PointLight( Colors.pink_l, 1, 300 );
  pointLight.position.set( 35, 50, 30 );
  var sphereSize = 10;
  var pointLightHelper = new THREE.PointLightHelper( pointLight, sphereSize );
  //*/
  shadowLight = new THREE.DirectionalLight(0xffffff, 1);
  shadowLight.position.set(100, 150, 100);
  shadowLight.castShadow = true;
  shadowLight.shadowDarkness = .2;
  shadowLight.shadowMapWidth = shadowLight.shadowMapHeight = 1024;
  scene.add(shadowLight);
  //scene.add(pointLight );  
  scene.add(globalLight);  
}
////////////////////////////////////////////////
//                                        FLOOR
////////////////////////////////////////////////
var Floor = function(){
  var floorCol = Colors.green_d;
  this.mesh =  new CustomMesh.PlaneMesh(1600,1600,12, floorCol);
  var vertices = this.mesh.geometry.vertices;
  for (var i=0; i.5){
    var fol = foliages[Math.floor(Math.random()*foliages.length)];
    fol.launchParticle();
  }
  
   if (Math.random()>.9){
    var fol = foliagesComplex[Math.floor(Math.random()*foliagesComplex.length)];
    fol.launchParticle();
  }
  
  for (var i=0; i
Host Instantly Drag and Drop Website Builder

 

Description

This is an attempt to generate a tree that grows, and progressively creates its own leaves, foliage, fruits etc... Some trees are more elegant than others :) It was initially made for this project : http://www.meusinvest.be/2016/
Term
Wed, 11/29/2017 - 11:19

Related Codes

Pen ID
Pen ID
Pen ID