Build a CSS Low Poly Sushi by Arden from Codepen by pug, SCSS and Babel.
Grab a bite to eat with your browser in this low-poly lunch from aderaaij. Drag and zoom around the scene to see it from every angle.
In pug from HTML:
canvas.webgl
In SCSS from CSS:
* { margin: 0; padding: 0; } html, body { overflow: hidden; } .webgl { position: fixed; top: 0; left: 0; outline: none; }
In JavaScript by Babel:
/** * Base */ // Canvas const canvas = document.querySelector("canvas.webgl"); // Scene const scene = new THREE.Scene(); /** * Loaders */ // Texture loader const textureLoader = new THREE.TextureLoader(); // GLTF loader const gltfLoader = new THREE.GLTFLoader(); /** * Textures */ const bakedTexture = textureLoader.load( "https://assets.codepen.io/22914/baked.jpg" ); bakedTexture.encoding = THREE.sRGBEncoding; /** * Materials */ // baked material const bakedMaterial = new THREE.MeshBasicMaterial({ map: bakedTexture, side: THREE.DoubleSide }); bakedTexture.flipY = false; /** * Model */ gltfLoader.load("https://assets.codepen.io/22914/sushi.glb", (gltf) => { gltf.scene.children[0].material = bakedMaterial; gltf.scene.children[1].material = bakedMaterial; scene.add(gltf.scene); }); /** * Sizes */ const sizes = { width: window.innerWidth, height: window.innerHeight }; window.addEventListener("resize", () => { // Update sizes sizes.width = window.innerWidth; sizes.height = window.innerHeight; // Update camera camera.aspect = sizes.width / sizes.height; camera.updateProjectionMatrix(); // Update renderer renderer.setSize(sizes.width, sizes.height); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); }); /** * Camera */ // Base camera const camera = new THREE.PerspectiveCamera( 45, sizes.width / sizes.height, 0.1, 100 ); camera.position.x = -7; camera.position.y = 12; camera.position.z = -7; scene.add(camera); // Controls const controls = new THREE.OrbitControls(camera, canvas); controls.enableDamping = true; // Don't go below the ground controls.maxPolarAngle = Math.PI / 2 - 0.1; // Clamp panning const minPan = new THREE.Vector3(-0.2, -0.2, -0.2); const maxPan = new THREE.Vector3(2, 2, 2); const _v = new THREE.Vector3(); controls.addEventListener("change", function () { _v.copy(controls.target); controls.target.clamp(minPan, maxPan); _v.sub(controls.target); camera.position.sub(_v); }); /** * Renderer */ const renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true }); renderer.setSize(sizes.width, sizes.height); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); renderer.outputEncoding = THREE.sRGBEncoding; renderer.setClearColor(new THREE.Color("#98ddca")); /** * Animate */ const clock = new THREE.Clock(); const tick = () => { const elapsedTime = clock.getElapsedTime(); // Update controls controls.update(); // Render renderer.render(scene, camera); // Call tick again on the next frame window.requestAnimationFrame(tick); }; tick();
In Codepen presentation:
See the Pen Low-Poly Sushi by Arden (@aderaaij) on CodePen.
Please comment and share this article and wants to improve this article WhatsApp us.