A Pen by Dima

Developer
Dima
Size
3,031 Kb
Views
22,264
  1. A Pen by Dima Previews
  2. A Pen by Dima HTML Codes
  3. A Pen by Dima CSS Codes
  4. A Pen by Dima JS Codes

How do I make an a pen by dima?

What is a a pen by dima? How do you make a a pen by dima? This script and codes were developed by Dima on 17 September 2022, Saturday.

A Pen by Dima Previews
IQ Test

A Pen by Dima - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Dima</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="WebGL-output"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by Dima - Script Codes CSS Codes

body { margin: 0; height: 100vw;
}
#WebGL-output { width: 100%; height: 100%;
}

A Pen by Dima - Script Codes JS Codes

$(function() { (function() { var scene, camera, renderer; var terrain, geometry, data, material; var worldWidth, worldHeight, gridSize; var background = '#2D3A4B'; var surface = '#D6DCE5'; var myCanvas = $("#WebGL-output"), myCanvas_W = myCanvas.width(), myCanvas_H = myCanvas.height(); /* * Initialize */ function init() { setupScene(); createShader(); createTerrain(); setupEventListeners(); render(); } /* * Setup the scene */ function setupScene() { //контейнер хранения и отслеживания отображаемых объектов scene = new THREE.Scene(); // (60, (myCanvas_W - 256) / myCanvas_H, 1, 20000) camera = new THREE.PerspectiveCamera(40, 4, 1, 10000); //на видеокарту renderer = new THREE.WebGLRenderer({ alpha: true }); //размер сцены renderer.setSize(myCanvas_W, myCanvas_H); //фон renderer.setClearColor(background, 1); //document.body.appendChild(renderer.domElement); myCanvas.append(renderer.domElement); } function createShader() { material = new THREE.MeshBasicMaterial({ color: surface }); } function createTerrain() { gridSize = 128; worldWidth = 5000; worldHeight = 5000; geometry = new THREE.PlaneGeometry(worldWidth, worldHeight, gridSize - 1, gridSize - 1); geometry.applyMatrix(new THREE.Matrix4().makeRotationX(Math.PI / 2)); data = []; var highestPoint = 0; var inc = 0; for (var x = 0; x < gridSize; x++) { data.push([]); for (var y = 0; y < gridSize; y++) { data[x].push(getval(x, y)); geometry.vertices[inc].y = data[x][y]; if (data[x][y] > highestPoint) highestPoint = data[x][y]; inc++; } } camera.position.y = 200; camera.position.x = -worldHeight / 2; camera.lookAt(new THREE.Vector3(0, 0, 0)); terrain = new THREE.Mesh(geometry, material); terrain.position.y = 250; scene.add(terrain); scene.fog = new THREE.FogExp2(background, .001); }; function getval(x, y) { var val = 0; val = Math.random() * 25; val += (Math.sin((x * 2) / gridSize) * 5); return val; } function updateTerrain() { var inc = 0; for (var x = 0; x < gridSize; x++) { for (var y = gridSize; y > 0; y--) { if (y == 1) { data[x][y] = getval(x, y); } else { data[x][y] = data[x][y - 1]; } geometry.vertices[inc].y = data[x][y]; inc++; } } geometry.verticesNeedUpdate = true; } /* * Setup event listeners */ function setupEventListeners() { window.addEventListener('resize', function() { //reset myCanvas_W = myCanvas.width(), myCanvas_H = myCanvas.height(); renderer.setSize(myCanvas_W, myCanvas_H); camera.aspect = myCanvas_W / myCanvas_H; camera.updateProjectionMatrix(); }); } /* * Render loop */ function render() { requestAnimationFrame(render); terrain.position.x -= 5; if (terrain.position.x < -(worldWidth / gridSize)) { terrain.position.x += (worldWidth / gridSize); updateTerrain(); } renderer.render(scene, camera); }; init(); })();
});
A Pen by Dima - Script Codes
A Pen by Dima - Script Codes
Home Page Home
Developer Dima
Username dimaZubkov
Uploaded September 17, 2022
Rating 4.5
Size 3,031 Kb
Views 22,264
Do you need developer help for A Pen by Dima?

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!

Dima (dimaZubkov) Script Codes
Name
Section scroll
Web Audio API
Audio button
Glitch
Price range slider
Glitch
Star Rating
Vue radio
Angular T-shirt shop
Responsive typography harmony
Create amazing SEO content 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!