Skip to content

Instantly share code, notes, and snippets.

@Y0lan

Y0lan/index.html

Created October 19, 2018 12:26
Show Gist options
  • Save Y0lan/54c894d810772236f76cf797e61732c9 to your computer and use it in GitHub Desktop.
Save Y0lan/54c894d810772236f76cf797e61732c9 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<script src="three.min.js"></script>
<script src='threex.grass.js'></script>
<script src='OrbitControls.js'></script>
<body style='margin: 0px; overflow: hidden;'><script>
var renderer = new THREE.WebGLRenderer({
antialias : true
});
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
renderer.shadowCameraNear = 3;
renderer.shadowCameraFov = 50;
renderer.shadowMapBias = 0.0039;
renderer.shadowMapDarkness = 0.5;
renderer.shadowMapWidth = 1024;
renderer.shadowMapHeight = 1024;
document.body.appendChild( renderer.domElement );
//var axesHelper = new THREE.AxesHelper( 1000000 );
var onRenderFcts= [];
var scene = new THREE.Scene();
scene.background = 'images/bg.jpg'
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 1000);
camera.position.y = 20;
camera.position.z = 2;
camera.position.x = 10
camera.lookAt(scene.position);
window.addEventListener( 'resize', onWindowResize, false );
//////////////////////////////////////////////////////////////////////////////////
// set 3 point lighting //
//////////////////////////////////////////////////////////////////////////////////
;(function(){
var light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 1, 1, 1 );
light.castShadow = true;
light.shadowDarkness = 0.5;
scene.add( light );
var light = new THREE.DirectionalLight( 0x002288 );
light.position.set( - 1, - 1, - 1 );
light.castShadow = true;
light.shadowDarkness = 0.5;
scene.add( light );
var light = new THREE.AmbientLight( 0x222222 );
scene.add( light );
//
//window.addEventListener( 'resize', onWindowResize, false );
})()
// add a light behind
var light = new THREE.DirectionalLight('white', 1)
light.castShadow = true;
light.shadowDarkness = 0.5;
// var light = new THREE.PointLight('white', 2)
scene.add( light )
light.position.y= 1
//////////////////////////////////////////////////////////////////////////////////
// Creation rock
//////////////////////////////////////////////////////////////////////////////////
function createRock(x,z){
var geometry = new THREE.BoxGeometry( 0.5, 4, 0.8 );
var textureUrl = 'images/rocks.jpg'
var texture = THREE.ImageUtils.loadTexture(textureUrl);
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.x= 1
texture.repeat.y= 1
texture.anisotropy = renderer.getMaxAnisotropy()
var material = new THREE.MeshPhongMaterial({
map : texture,
emissive: 'gray',
})
var rock = new THREE.Mesh( geometry, material);
rock.position.set(x,1,z);
scene.add(rock);
}
//////////////////////////////////////////////////////////////////////////////////
// Creation Menhir
//////////////////////////////////////////////////////////////////////////////////
function CreateDolmen(x, z){
dolmen = new THREE.Object3D();
var geometry = new THREE.BoxGeometry( 1, 3, 1 );
var textureUrl = 'images/rocks.jpg'
var texture = THREE.ImageUtils.loadTexture(textureUrl);
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.x= 1
texture.repeat.y= 1
texture.anisotropy = renderer.getMaxAnisotropy()
var material = new THREE.MeshPhongMaterial({
map : texture,
emissive: 'gray',
})
//pilier1
pilier1 = new THREE.Mesh( geometry, material );
pilier1.position.set(x,1.25,z);
//pilier2
pilier2 = new THREE.Mesh( geometry, material );
pilier2.position.set(x+2,1.25,z);
//toit
var geometry = new THREE.BoxGeometry( 4, 1, 1.25 );
toit = new THREE.Mesh( geometry, material );
toit.position.set(x+1,3,z);
dolmen.add( pilier1 );
dolmen.add( pilier2);
dolmen.add( toit );
dolmen.position.set(0,0,0);
//this["dolmen"+n].rotateY(r);
dolmen.castShadow = true;
dolmen.receiveShadow = false;
return dolmen.clone();
}
function RotateObject(object,degreeY=0){
degreeY = (degreeY * Math.PI)/180;
scene.add(object);
object.rotateY(degreeY);
}
//////////////////////////////////////////////////////////////////////////////////
// Creation Rock
//////////////////////////////////////////////////////////////////////////////////
function CreateRock(x,z){
var pilier = new THREE.Object3D();
var geometry = new THREE.BoxGeometry( 0.5, 4, 0.8 );
var textureUrl = 'images/rocks.jpg'
var texture = THREE.ImageUtils.loadTexture(textureUrl);
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.x= 1
texture.repeat.y= 1
texture.anisotropy = renderer.getMaxAnisotropy()
var material = new THREE.MeshPhongMaterial({
map : texture,
emissive: 'gray',
})
var rock = new THREE.Mesh( geometry, material);
rock.position.set(x,0,z);
pilier.add(rock);
pilier.position.set(0,0,0)
return pilier.clone();
}
//////////////////////////////////////////////////////////////////////////////////
// position of stuff //
//////////////////////////////////////////////////////////////////////////////////
//menhir (n, x, z, rotation)
var r = 0;
var i = 1;
while(r<= 360){
if(i%2 == 0){
RotateObject(CreateDolmen(0,8),r);
}else{RotateObject(CreateRock(1,8),r);}
r+=30;
i++;
}
r = 0;
while(r <= 360){
if (i % 2 == 0){
RotateObject(CreateDolmen(0,3),r);
}
i++;
r += 60;
}
//////////////////////////////////////////////////////////////////////////////////
// grass ground //
//////////////////////////////////////////////////////////////////////////////////
var textureUrl = 'images/grasslight-small.jpg'
var texture = THREE.ImageUtils.loadTexture(textureUrl);
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.x= 10
texture.repeat.y= 10
texture.anisotropy = renderer.getMaxAnisotropy()
// build object3d
var geometry = new THREE.PlaneGeometry(50, 50)
var material = new THREE.MeshPhongMaterial({
map : texture,
emissive: 'green',
})
var object3d = new THREE.Mesh(geometry, material)
object3d.rotateX(-Math.PI/2)
object3d.castShadow = false;
object3d.receiveShadow = true;
scene.add(object3d)
//////////////////////////////////////////////////////////////////////////////////
// comment //
//////////////////////////////////////////////////////////////////////////////////
var nTufts = 30000
var positions = new Array(nTufts)
for(var i = 0; i < nTufts; i++){
var position = new THREE.Vector3()
position.x = (Math.random()-0.5)*50
position.z = (Math.random()-0.5)*50
positions[i] = position
}
var mesh = THREEx.createGrassTufts(positions)
mesh.castShadow = false;
mesh.receiveShadow = true;
scene.add(mesh)
// load the texture
var textureUrl = THREEx.createGrassTufts.baseUrl+'images/grass01.png'
var material = mesh.material
material.map = THREE.ImageUtils.loadTexture(textureUrl)
material.alphaTest = 0.7
//////////////////////////////////////////////////////////////////////////////////
// comment //
//////////////////////////////////////////////////////////////////////////////////
var nTufts = 20000
var positions = new Array(nTufts)
for(var i = 0; i < nTufts; i++){
var position = new THREE.Vector3()
position.x = (Math.random()-0.5)*50
position.z = (Math.random()-0.5)*50
positions[i] = position
}
var mesh = THREEx.createGrassTufts(positions)
mesh.castShadow = false;
mesh.receiveShadow = true;
scene.add(mesh)
// load the texture
var textureUrl = THREEx.createGrassTufts.baseUrl+'images/grass02.png'
var material = mesh.material
material.map = THREE.ImageUtils.loadTexture(textureUrl)
material.alphaTest = 0.7
//////////////////////////////////////////////////////////////////////////////////
// comment //
//////////////////////////////////////////////////////////////////////////////////
var nTufts = 15000
var positions = new Array(nTufts)
for(var i = 0; i < nTufts; i++){
var position = new THREE.Vector3()
position.x = (Math.random()-0.5)*50
position.z = (Math.random()-0.5)*50
positions[i] = position
}
var mesh = THREEx.createGrassTufts(positions);
mesh.castShadow = false;
mesh.receiveShadow = true;
scene.add(mesh)
// load the texture
var material = mesh.material
var textureUrl = THREEx.createGrassTufts.baseUrl+'images/flowers01.png'
material.map = THREE.ImageUtils.loadTexture(textureUrl)
material.emissive.set(0x888888)
material.alphaTest = 0.7
//////////////////////////////////////////////////////////////////////////////////
// comment //
//////////////////////////////////////////////////////////////////////////////////
var nTufts = 12000
var positions = new Array(nTufts)
for(var i = 0; i < nTufts; i++){
var position = new THREE.Vector3()
position.x = (Math.random()-0.5)*50
position.z = (Math.random()-0.5)*50
positions[i] = position
}
var mesh = THREEx.createGrassTufts(positions)
mesh.castShadow = false;
mesh.receiveShadow = true;
scene.add(mesh)
// load the texture
var material = mesh.material
var textureUrl = THREEx.createGrassTufts.baseUrl+'images/flowers02.png'
material.map = THREE.ImageUtils.loadTexture(textureUrl)
material.emissive.set(0x888888)
material.alphaTest = 0.7
//////////////////////////////////////////////////////////////////////////////////
// Camera Controls //
//////////////////////////////////////////////////////////////////////////////////
controls = new THREE.OrbitControls( camera, renderer.domElement );
//controls.addEventListener( 'change', render ); // call this only in static scenes (i.e., if there is no animation loop)
controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
controls.dampingFactor = 0.25;
controls.screenSpacePanning = false;
controls.minDistance = 3;
controls.maxDistance = 70;
controls.maxPolarAngle = (Math.PI / 2)/1.25;
//////////////////////////////////////////////////////////////////////////////////
// render the scene //
//////////////////////////////////////////////////////////////////////////////////
onRenderFcts.push(function(){
//renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.shadowMapEnabled = true;
renderer.render( scene, camera );
})
//////////////////////////////////////////////////////////////////////////////////
// loop runner //
//////////////////////////////////////////////////////////////////////////////////
var lastTimeMsec= null
requestAnimationFrame(function animate(nowMsec){
// keep looping
requestAnimationFrame( animate );
controls.update();
render();
// measure time
lastTimeMsec = lastTimeMsec || nowMsec-1000/60
var deltaMsec = Math.min(200, nowMsec - lastTimeMsec)
lastTimeMsec = nowMsec
// call each update function
onRenderFcts.forEach(function(onRenderFct){
onRenderFct(deltaMsec/1000, nowMsec/1000)
})
})
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function render() {
renderer.render( scene, camera );
}
</script></body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment