A Pen by KyleDavidE

Developer
KyleDavidE
Size
4,557 Kb
Views
20,240
  1. A Pen by KyleDavidE Previews
  2. A Pen by KyleDavidE HTML Codes
  3. A Pen by KyleDavidE CSS Codes
  4. A Pen by KyleDavidE JS Codes

How do I make an a pen by kyledavide?

What is a a pen by kyledavide? How do you make a a pen by kyledavide? This script and codes were developed by KyleDavidE on 11 August 2022, Thursday.

A Pen by KyleDavidE Previews
IQ Test

A Pen by KyleDavidE - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by KyleDavidE</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body{ margin:0; overflow:hidden;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <script src='http://cdnjs.cloudflare.com/ajax/libs/three.js/r68/three.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/42111/TessellateModifier.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/42111/OrbitControls.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/42111/ConvexGeometry.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/42111/threex.daynight.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by KyleDavidE - Script Codes CSS Codes

body{ margin:0; overflow:hidden;
}

A Pen by KyleDavidE - Script Codes JS Codes

var scene = new THREE.Scene();
var TREE = { x:vary(3,2), y:vary(3,2),
}
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer({ antialias: true});
renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement );
camera.position.z = 15;
camera.position.x = 20;
camera.position.y = 20;
var SKY = new THREE.Color(0x6CDFEA);
renderer.shadowMapEnabled = true;
renderer.setClearColor(SKY);
renderer.shadowMapType = THREE.PCFShadowMap;
var Alight = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( Alight );
scene.fog = new THREE.Fog(SKY,150,175);
var skyHSL = SKY.getHSL();
camera.lookAt(scene.position);
var controls = new THREE.OrbitControls( camera );
controls.addEventListener( 'change', render );
controls.noZoom = true;
document.body.onmousewheel = function(e){ console.log(e); if(!e.shifKey && !e.ctrlKey){ setTod(TOD+=e.wheelDelta/120/50) } if(e.ctrlKey){ e.preventDefault(); SEA_ANGER += e.wheelDelta/120/25 }else{ SEA_ANGER = 1.5; } controls.noZoom = !e.shiftKey;
}
controls.noPan = true;
controls.maxDistance = Math.sqrt(15*10*10);
//controls.maxPolarAngle = Math.PI/2-0.1;
var defLightColor = new THREE.Color( 0x404040 ).getHSL();
var spotLight = new THREE.SpotLight( 0xffffff, 1, 0, Math.PI / 2, 1 );
spotLight.target = new THREE.Object3D;
spotLight.target.position.set(0,30,0);
spotLight.position.set(0,500,500);
spotLight.shadowBias = 0.000025;
spotLight.shadowDarkness = 1;
spotLight.castShadow = true;
spotLight.shadowMapWidth = 1024;
spotLight.shadowMapHeight = 1024;
spotLight.shadowCameraNear = 5;
spotLight.shadowCameraFar = 1000;
spotLight.shadowCameraFov = 5;
var moonLight = (function(){ var spotLight = new THREE.SpotLight( new THREE.Color(0xddddff), 0, 0, Math.PI / 2, 1 ); spotLight.target = new THREE.Object3D; spotLight.target.position.set(0,30,0); spotLight.position.set(0,500,500); spotLight.shadowBias = 0.000025; spotLight.shadowDarkness = 0.1; spotLight.intensity = 0.5; spotLight.castShadow = true; spotLight.shadowMapWidth = 1024; spotLight.shadowMapHeight = 1024; spotLight.shadowCameraNear = 5; spotLight.shadowCameraFar = 1000; spotLight.shadowCameraFov = 50; //spotLight.shadowCameraVisible = true; console.log(spotLight) return spotLight;
})();
var _space = [ space('SunSphere'), space('SunLight',{castShadow:true}), space('Skydom'), space('StarField'),
];
function space(constN,attrs){ var object = new THREEx.DayNight[constN](); for(var i in attrs){ object.object3d[i] = attrs[i]; } scene.add(object.object3d); console.log(object); return object;
}
/*scene.add( spotLight );
scene.add( moonLight );*/
var TOD = 0;
var ln = spotLight.position.length();
function setTod(a){ TOD = a; _space.forEach(function(e){ //console.log(e); e.update(a); }) //console.log(ln);
}
var TIME = true;
document.body.ondblclick = function(){ TIME = !TIME;
}
var geometry = new THREE.SphereGeometry( 20, 8, 8, undefined,undefined,0, Math.PI /2);
var tessellateModifier = new THREE.TessellateModifier( 4 );
for ( var i = 0; i < 6; i ++ ) { tessellateModifier.modify( geometry );
}
geometry.faces.forEach(function(e,i){ e.color.setRGB(1-Math.random()*0.1,1-Math.random()*0.1,0.6);
});
geometry.mergeVertices();
geometry.vertices.forEach(function(e){ e.add({ x:Math.random() - 0.5, y:Math.random() - 0.5, z:Math.random() - 0.5 });
})
console.log(geometry);
var material = new THREE.MeshLambertMaterial( { color: 0xffffff, shading:THREE.NoShading, vertexColors: THREE.FaceColors
} );
var sphere = new THREE.Mesh( geometry, material );
sphere.scale.y = 0.5;
sphere.position.set(0,-7,0);
sphere.geometry.verticesNeedUpdate = true;
scene.add( sphere );
sphere.receiveShadow = true;
//sphere.castShadow = true;
var geometry = new THREE.CylinderGeometry( 0.5, 1.5, 15, 3 , 3);
var tessellateModifier = new THREE.TessellateModifier( 4 );
for ( var i = 0; i < 6; i ++ ) { tessellateModifier.modify( geometry );
}
var material = new THREE.MeshLambertMaterial({ color: 0x990000, shading:THREE.NoShading, vertexColors: THREE.FaceColors
});
geometry.faces.forEach(function(e,i){ e.color.setRGB(0.5-Math.random()*0.3,0,0);
});
geometry.mergeVertices();
geometry.vertices.forEach(function(e){ if(e.y < 15/2-0.1) e.add({ x:(Math.random() - 0.5)/2, y:(Math.random() - 0.5)/2, z:(Math.random() - 0.5)/2 });
})
var trunck = new THREE.Mesh( geometry, material );
trunck.position.set(TREE.x,15/2+1.5,TREE.y);
scene.add( trunck );
trunck.castShadow = true;
function v(x,y,z){ return new THREE.Vector3(x,y,z);
}
var LEAF_WIDTH = 2;
var LEAF_LENGTH = 5;
var LEAF_ROT = -2;
var LEAF_THICKNESS = 0.1;
function vary(c,a){ return c+(Math.random()-0.5)*a*2;
}
function leafGeo(){ var out = new THREE.Geometry(verts); var verts =out.vertices; var faces =out.faces; var fi = 0; var lw = vary(LEAF_WIDTH,0.5); var ll = vary(LEAF_LENGTH,1); for(var ai = 0; ai <= 1; ai+= 0.25){ var i = ai==0?0:vary(ai,0.12); var w = lw * (i/4*3+0.25); var d = i*ll; var y = i*i*LEAF_ROT; var t = LEAF_THICKNESS*(i); verts.push(v(w / 2,y-t/2,d), v(w / -2,y-t/2,d), v(w / 2,y+t/2,d),v(w / -2,y+t/2,d)); if(ai!=0) faces.push( new THREE.Face3( fi + 2, fi-4 + 2, fi-4+1 + 2), new THREE.Face3( fi+1 + 2, fi + 2, fi-4+1 + 2), new THREE.Face3( fi-4+1 , fi-4, fi), new THREE.Face3( fi-4+1, fi, fi+1), new THREE.Face3( fi-4, fi+2, fi), new THREE.Face3( fi-2, fi+2, fi-4), new THREE.Face3( fi+1, fi+2+1, fi-4+1), new THREE.Face3( fi-4+1, fi+2+1, fi-2+1) //new THREE.Face3( 0, 1, 2 ), //new THREE.Face3( 0, 1, 2 ), ) fi+=4; } fi-=4; faces.push( new THREE.Face3(fi+3,fi+1,fi), new THREE.Face3(fi,fi+2,fi+3) ) console.log(verts); /*out.vertices.forEach(function(e){ var i = e.z/LEAF_LENGTH; e.setY(e.y+) });*/ return out;
}
var leaves = [];
function addLeaf(a){ if(TIME) a = vary(a,0.1); var geometry = leafGeo(); var planeMaterial = new THREE.MeshLambertMaterial( { color: 0x000000, shading:THREE.NoShading, vertexColors: THREE.FaceColors, //wireframe:true } ); geometry.faces.forEach(function(e,i){ e.color.setRGB(0,1-Math.random()*0.3,0); }) var leaf = new THREE.Mesh( geometry, planeMaterial ); leaf.position.set(TREE.x,15+1.6,TREE.y); leaf.castShadow = true; leaf.rotation.y = a; leaves.push(leaf); scene.add( leaf );
}
for(var i = 0; i < Math.PI*2-0.00001; i+= Math.PI/4){ addLeaf(vary(i,0.1));
}
var geometry = new THREE.PlaneGeometry( 400, 400, 120, 120 );
var planeMaterial = new THREE.MeshLambertMaterial( { color: 0x0000ff, shading:THREE.NoShading, vertexColors: THREE.FaceColors
} );
var ground = new THREE.Mesh( geometry, planeMaterial );
ground.position.set( 0, 0, 0 );
ground.rotation.x = - Math.PI / 2 ;
//ground.scale.set( 100, 100, 100 );
ground.castShadow = true;
ground.receiveShadow = true;
scene.add( ground );
ground.geometry.faces.forEach(function(e,i){ e.color.setRGB(0,Math.random()/2,Math.random()/2+0.5);
});
var SEA_ANGER = 1.5;
randVerts(ground);
ground.geometry.elementsNeedUpdate = true;
function randVerts(ground){ var t = (performance||date).now()/1000; var geo = ground.geometry.vertices; for(var i = 0; i < geo.length; i++){ var e = geo[i]; if(!e.orig){ e.add({x:Math.random()/2,y:0,z:Math.random()/2}); e.origL = e.clone().add({x:100,y:100,z:100}).length()/10; e.orig = e.clone() e.offA = Math.random()*2*Math.pow(SEA_ANGER,-0.1); e.offB = Math.random()*2*Math.pow(SEA_ANGER,-0.1); if(i < 5){ console.log(e.offA,SEA_ANGER) } }; var del = e.origL + t; e.copy(e.orig); e.addVectors(e.orig,{ x:0, z:Math.sin(del+e.offB)*SEA_ANGER+(SEA_ANGER-1)/2, y:Math.sin(del+e.offA)*SEA_ANGER+(SEA_ANGER-1)/2, }) } ground.geometry.verticesNeedUpdate = true;
}
function render() { renderer.render(scene, camera);
}
var EFFECT = 0.1;
function animate(){ if(TIME) setTod(TOD+0.005) controls.update(); leaves.forEach(function(e){ if(!e.cfg){ e.cfg = { o:Math.random()*10 } } e.scale.set(1,Math.sin(Date.now()/1000+e.cfg.o)/5+1,1) }) randVerts(ground); render(); requestAnimationFrame(animate);
}
animate();
window.addEventListener( 'resize', onWindowResize, false );
function onWindowResize(){ camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight );
}
console.log(scene)
//@ sourceURL=pen.js
A Pen by KyleDavidE - Script Codes
A Pen by KyleDavidE - Script Codes
Home Page Home
Developer KyleDavidE
Username KyleDavidE
Uploaded August 11, 2022
Rating 4
Size 4,557 Kb
Views 20,240
Do you need developer help for A Pen by KyleDavidE?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

KyleDavidE (KyleDavidE) Script Codes
Name
Abstract shape 3d
Surface
SCSS function graphing
A Pen by Kyle Ehrlich
XKCD 1608 Hoverboard zoomable
A cube
BLOCK CLOCK
Web animations material ripple
Stars
A Pen by KyleDavidE
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!