VmGMrp

script.js

console.clear();

var renderCalls = [];

var scene, camera, renderer, orbit, light;

scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x222222, 20, 400);

camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 10, 400 );
camera.position.set(0,20,30);

camera.lookAt(new THREE.Vector3(0,0,0));

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

renderer = new THREE.WebGLRenderer( { antialias: true } );

renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

renderer.setClearColor( 0x000000 );
renderer.toneMapping = THREE.LinearToneMapping;

renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.toneMappingExposure = Math.pow( 0.91, 5.0 );

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

function render () {
  requestAnimationFrame( render );
  renderCalls.forEach((callback)=>{ callback(); });
  renderer.render( scene, camera );
};

render();

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

var ambientLight = new THREE.AmbientLight(0x222222);
scene.add(ambientLight);

var hemiLight = new THREE.HemisphereLight( 0xEBF7FD, 0xEBF7FD, 0.2 );
//hemiLight.color.setRGB(0.75,0.8,0.95);
hemiLight.position.set( 0, 100, 0 );
scene.add( hemiLight );

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

light = new THREE.SpotLight( 0xffffff );
light.position.y = 80;
light.position.z = 80;
light.angle = Math.PI / 5;

light.castShadow = true;

light.shadow.mapSize.width = 512;
light.shadow.mapSize.height = 512;

light.shadow.camera.near = 1;
light.shadow.camera.far = 300;
light.shadow.camera.fov = 40;

light.power = 3;

scene.add( light );

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

orbit = new THREE.OrbitControls( camera, renderer.domElement );
orbit.enableZoom = true;
orbit.enablePan = false;

orbit.rotateSpeed = 0.3;
orbit.zoomSpeed = 0.3;

orbit.autoRotate = true;
orbit.autoRotateSpeed = 0.6;

//orbit.minPolarAngle = Math.PI * 0.3;
//orbit.maxPolarAngle = Math.PI * 0.45;

//orbit.minAzimuthAngle = -Math.PI * 0.2; // radians
//orbit.maxAzimuthAngle = Math.PI * 0.2; // radians

orbit.minDistance = 40;
orbit.maxDistance = 300;
orbit.update();

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

let material = new THREE.MeshPhongMaterial({ 
  color: 0x6C7A89, 
  //specular: 0x009900,
  shininess: 1000, 
  emissive: 0x6C7A89,
  emissiveIntensity: 0.8,
  transparent: true,
  opacity: 0.7
});

let geometry = new THREE.CylinderGeometry( 10, 8, 1, 3 );


let sides = 20;
const TWOPI = Math.PI * 2

for (let i = 0; i < sides; i++){
  let triangle = new THREE.Mesh(geometry, material);
  
  triangle.position.set(
    Math.sin( i / sides * TWOPI ) * 20,
    0,
    Math.cos(i / sides * TWOPI ) * 20
  );
  
  triangle.rotation.y = ( i % 2 ? -Math.PI : Math.PI );
  triangle.rotation.x = Math.PI / 2;
  
  scene.add(triangle);
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="http://codepen.io/shshaw/pen/epmrgO"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

style.less

canvas { display: block; }

vmgmrp.markdown

VmGMrp

A Pen by Shaw on CodePen.

License.