JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/utils/BufferGeometryUtils.js"></script>
CSS
body {
padding 0px;
margin: 0px;
overflow: hidden;
}
JavaScript
var container, stats;
var camera, scene, renderer;
var mesh, light, ambient;
var floor;
var controls;
var texLoader = new THREE.TextureLoader();
function init() {
camera = new THREE.PerspectiveCamera( 25, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set( 0, 100, 460 );
scene = new THREE.Scene();
scene.fog = new THREE.FogExp2( 0xfff4e5, 0.0003 );
ambient = new THREE.AmbientLight(0x7f7f7f);
scene.add(ambient);
light = new THREE.DirectionalLight( 0xffffff, 1.0 );
light.position.set( 0, 1, 1 ).normalize();
scene.add( light );
var planeSimple = new THREE.PlaneGeometry( 500, 500 );
var matSolid = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
floor = new THREE.Mesh( planeSimple, matSolid );
floor.rotation.x = - Math.PI / 2;
scene.add( floor );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( scene.fog.color, 1 );
renderer.debug.checkShaderErrors = true;
//renderer.gammaInput = true;
//renderer.gammaOutput = true;
//renderer.gammaFactor = 2.2;
document.body.appendChild( renderer.domElement );
controls = new THREE.OrbitControls(camera,renderer.domElement);
loadGrass();
loop();
}
function loop() {
requestAnimationFrame( loop, renderer.domElement );
if( controls ){
controls.update();
}
renderer.render( scene, camera );
}
function loadGrass(){
var cgeo, geos=[];
var geo = buildGrassGeometry();
for( var i = 0; i<500; i++ ){
cgeo = geo.clone();
cgeo.translate(rand(-210,210), 0, rand(-210,210));
cgeo.rotateY(Math.random()*Math.PI*2);
geos.push(cgeo);
}
var bgeo = THREE.BufferGeometryUtils.mergeBufferGeometries(geos);
var mat = loadGrassMaterial();
mesh = new THREE.Mesh(bgeo, mat);
scene.add(mesh);
}
function buildGrassGeometry(){
var planeGeometry = new THREE.PlaneBufferGeometry(30, 30, 1,...