Created
January 5, 2019 20:24
-
-
Save lkpttn/1163622e8dbd0c47625f0aeff4c68f94 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const canvasSketch = require('canvas-sketch'); | |
| const random = require('canvas-sketch-util/random'); | |
| const palettes = require('nice-color-palettes'); | |
| // Ensure ThreeJS is in global scope for the 'examples/' | |
| global.THREE = require('three'); | |
| // Include any additional ThreeJS examples below | |
| require('three/examples/js/controls/OrbitControls'); | |
| const settings = { | |
| dimensions: [512, 512], | |
| fps: 24, | |
| duration: 4, | |
| // Make the loop animated | |
| animate: true, | |
| // Get a WebGL canvas rather than 2D | |
| context: 'webgl', | |
| // Turn on MSAA | |
| attributes: { antialias: true }, | |
| }; | |
| const sketch = ({ context }) => { | |
| // Create a renderer | |
| const renderer = new THREE.WebGLRenderer({ | |
| context, | |
| }); | |
| // WebGL background color | |
| renderer.setClearColor('#102851', 1.0); | |
| // Setup a camera | |
| const camera = new THREE.OrthographicCamera(); | |
| // Setup camera controller | |
| const controls = new THREE.OrbitControls(camera); | |
| controls.autoRotate = true; | |
| controls.autoRotateSpeed = Math.PI * 2; | |
| // Setup your scene | |
| const scene = new THREE.Scene(); | |
| const palette = random.pick(palettes); | |
| // Create the mesh once, use it many times | |
| const box = new THREE.BoxGeometry(1, 1, 1); | |
| for (let i = 0; i < 40; i++) { | |
| mesh = new THREE.Mesh( | |
| box, | |
| new THREE.MeshStandardMaterial({ | |
| color: random.pick(palette), | |
| wireframe: false, | |
| }), | |
| ); | |
| mesh.position.set( | |
| random.range(-2, 2), | |
| random.range(-2, 2), | |
| random.range(-2, 2), | |
| ); | |
| mesh.scale.set(random.range(0.5, 2), 5, random.range(1, 1.5)); | |
| // Multiply all xyz by this value | |
| mesh.scale.multiplyScalar(0.5); | |
| scene.add(mesh); | |
| } | |
| // Light | |
| scene.add(new THREE.AmbientLight('#102851')); | |
| const light = new THREE.DirectionalLight('#7caeff', 1); | |
| light.position.set(0, 4, 0); | |
| scene.add(light); | |
| console.log(scene.children); | |
| // draw each frame | |
| return { | |
| // Handle resize events here | |
| resize({ pixelRatio, viewportWidth, viewportHeight }) { | |
| renderer.setPixelRatio(pixelRatio); | |
| renderer.setSize(viewportWidth, viewportHeight); | |
| const aspect = viewportWidth / viewportHeight; | |
| // Ortho zoom | |
| const zoom = 4; | |
| // Bounds | |
| camera.left = -zoom * aspect; | |
| camera.right = zoom * aspect; | |
| camera.top = zoom; | |
| camera.bottom = -zoom; | |
| // Near/Far | |
| camera.near = -100; | |
| camera.far = 100; | |
| // Set position & look at world center | |
| camera.position.set(zoom, zoom, zoom); | |
| camera.lookAt(new THREE.Vector3()); | |
| // Update the camera | |
| camera.updateProjectionMatrix(); | |
| }, | |
| // Update & render your scene here | |
| render({ playhead }) { | |
| const t = Math.sin(playhead * Math.PI * 2); | |
| scene.position.y = t; | |
| controls.update(); | |
| renderer.render(scene, camera); | |
| }, | |
| // Dispose of events & renderer for cleaner hot-reloading | |
| unload() { | |
| controls.dispose(); | |
| renderer.dispose(); | |
| }, | |
| }; | |
| }; | |
| canvasSketch(sketch, settings); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment