Liquid gold

Developer
Ross B
Size
6,470 Kb
Views
16,192
  1. Liquid gold Previews
  2. Liquid gold HTML Codes
  3. Liquid gold CSS Codes
  4. Liquid gold JS Codes

How do I make an liquid gold?

What is a liquid gold? How do you make a liquid gold? This script and codes were developed by Ross B on 24 November 2022, Thursday.

Liquid gold Previews
IQ Test

Liquid gold - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Liquid gold</title> <link href='https://fonts.googleapis.com/css?family=Playfair+Display:400' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="content"> <ul> <li>click to toggle shape</li> <li>'p' to pause</li> <li>'b' to toggle bobbing</li> <li>1 - 5 to adjust tween speed (1 being full speed)</li> </ul>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/stats.js/r14/Stats.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Liquid gold - Script Codes CSS Codes

body { margin: 0; height: 100vh; cursor: pointer;
}
canvas { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block;
}
.content { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: -webkit-box; display: -moz-box; display: box; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; box-pack: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; -webkit-box-align: end; box-align: end; -moz-align-items: flex-end; -ms-align-items: flex-end; -o-align-items: flex-end; align-items: flex-end; -ms-flex-align: end; z-index: 1; font-family: 'Playfair Display', serif; color: #bba;
}
ul { list-style-type: disc;
}
li { font-size: 0.8em; display: inline-block; margin-right: 10px;
}
li:after { content: '|'; margin-left: 10px;
}
li:last-child:after { content: none;
}

Liquid gold - Script Codes JS Codes

'use strict';
/* init */
var scene = new THREE.Scene();
var sWidth = window.innerWidth;
var sHeight = window.innerHeight;
var sRatio = sWidth / sHeight;
var camera = new THREE.PerspectiveCamera(75, sRatio, 0.1, 1000);
camera.lookAt(new THREE.Vector3(0, 0, 0));
camera.position.z = 9;
var vFOV = camera.fov * Math.PI / 180;
var renderer = new THREE.WebGLRenderer({ antialias: true });
// for shadows (need some work)
renderer.shadowMap.enabled = false;
renderer.shadowMap.type = THREE.PCFShadowMap;
renderer.setSize(sWidth, sHeight);
function setDimensions() { sWidth = window.innerWidth; sHeight = window.innerHeight; sRatio = sWidth / sHeight; renderer.setSize(sWidth, sHeight); camera.aspect = sRatio; camera.updateProjectionMatrix(); vFOV = camera.fov * Math.PI / 180;
}
window.addEventListener('resize', setDimensions);
document.body.appendChild(renderer.domElement);
var stats = new Stats();
stats.setMode(1);
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.zIndex = 2;
stats.domElement.style.top = '0px';
document.body.appendChild(stats.domElement);
/* end init */
/* input */
var mouse = new THREE.Vector2();
var raycaster = new THREE.Raycaster();
function onMouseMove(event) { mouse.x = event.clientX / sWidth * 2 - 1; mouse.y = -(event.clientY / sHeight) * 2 + 1;
}
window.addEventListener('mousemove', onMouseMove, false);
var pillarsFlat = false;
function onClick() { pillarsFlat = !pillarsFlat;
}
window.addEventListener('click', onClick, false);
var paused = false;
var tweenRatio = 1;
var bob = true;
window.addEventListener('keypress', function (event) { if (event.keyCode === 112) { paused = !paused; } if (event.keyCode === 98) { bob = !bob; } if (event.keyCode > 48 && event.keyCode < 54) { tweenRatio = 1 / Math.abs(48 - event.keyCode); }
});
/* end input */
/* lighting */
scene.add(new THREE.AmbientLight(0x212223));
var spotLight = new THREE.SpotLight(0xffffff, 1, 0, Math.PI / 2);
spotLight.position.set(0, 0, 10);
spotLight.castShadow = true;
spotLight.decay = 2;
spotLight.shadow.mapSize.width = 8192;
spotLight.shadow.mapSize.height = 8192;
spotLight.shadow.camera.near = 0.1;
spotLight.shadow.camera.far = 20000;
// scene.add(spotLight.target)
scene.add(spotLight);
/* end lighting */
var inputPlaneGeometry = new THREE.PlaneGeometry(1000, 1000, 1);
var inputPlaneMaterial = new THREE.MeshBasicMaterial({ transparent: true, opacity: 0
});
var inputPlaneMesh = new THREE.Mesh(inputPlaneGeometry, inputPlaneMaterial);
scene.add(inputPlaneMesh);
var backgroundPlaneGeometry = new THREE.PlaneGeometry(1000, 1000, 1);
var backgroundPlaneMaterial = new THREE.MeshPhongMaterial({ color: 0x003333, specular: 0x000055, shininess: 0
});
var backgroundPlaneMesh = new THREE.Mesh(backgroundPlaneGeometry, backgroundPlaneMaterial);
backgroundPlaneMesh.position.z = -5;
backgroundPlaneMesh.receiveShadow = true;
backgroundPlaneMesh.castShadow = false;
scene.add(backgroundPlaneMesh);
// useful for making object equal to viewport height
// let pHeight = 2 * Math.tan( vFOV / 2 ) * (camera.position.z)
// nice constants for pillar sizes
var pHeight = 3.069;
var pWidth = 0.023;
// try 2 for the depth, it creates a more interesting flat appearance
var pDepth = 2;
function makePillar(x) { var geometry = new THREE.BoxGeometry(pWidth, pHeight, pDepth); var material = new THREE.MeshPhongMaterial({ color: 0xffcc33, specular: 0xaaaaaa, shininess: 1 }); var pillar = new THREE.Mesh(geometry, material); pillar.castShadow = true; pillar.receiveShadow = false; pillar.position.z = 0; pillar.position.x = x * pWidth; return pillar;
}
var pillars = [];
var pillarSpacing = 3;
pillars.push(makePillar(0));
for (var i = 1; i < 100; i++) { pillars.push(makePillar(i + i * pillarSpacing)); pillars.push(makePillar((i + i * pillarSpacing) * -1));
}
pillars.map(function (p) { return scene.add(p);
});
function linearTween(from, to) { var increment = arguments.length <= 2 || arguments[2] === undefined ? 10 : arguments[2]; if (paused) return 0; if (Math.abs(from - to) !== 0) { return (from - to) / increment * tweenRatio; } else { return from - to; }
}
function updatePillar(pointAt, pillar, time) { // y if (pointAt && pointAt.point) { var tweenSpeed = pillarsFlat ? undefined : 5; var targetRotation = Math.atan(pillar.position.x - pointAt.point.x) * -1; pillar.rotation.y -= linearTween(pillar.rotation.y, targetRotation, tweenSpeed); } // x if (pillarsFlat) { pillar.rotation.x -= linearTween(pillar.rotation.x, -1.5 + mouse.y); pillar.scale.z -= linearTween(pillar.scale.z, 4); } else { var xDifference = -2 * (pillar.position.x - mouse.x) / 3; pillar.rotation.x -= linearTween(pillar.rotation.x, xDifference, 20); pillar.scale.z -= linearTween(pillar.scale.z, 1); } if (bob) { pillar.position.y -= linearTween(pillar.position.y, Math.sin((time || 0) / 500), 50); } else { pillar.position.y -= linearTween(pillar.position.y, 0); }
}
var render = function render(time) { requestAnimationFrame(render); raycaster.setFromCamera(mouse, camera); var intersect = raycaster.intersectObject(inputPlaneMesh); for (var i = 0; i < pillars.length; i++) { updatePillar(intersect[0], pillars[i], time); } stats.update(); renderer.render(scene, camera);
};
render();
Liquid gold - Script Codes
Liquid gold - Script Codes
Home Page Home
Developer Ross B
Username rocbear
Uploaded November 24, 2022
Rating 3
Size 6,470 Kb
Views 16,192
Do you need developer help for Liquid gold?

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!

Ross B (rocbear) Script Codes
Name
Babel React template
Loading animation - freedom purchase
Spear checkboxes
Full page scroll-over with ScrollMagic
UFO
Playful inner-page navigation
A Pen by Ross B
Wobbly list
Spin button
Unfolding circular menu
Create amazing web 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!