| // Imports & constants | |
| global.THREE = require("three"); | |
| require("three/examples/js/controls/OrbitControls"); | |
| const canvasSketch = require("canvas-sketch"); | |
| const settings = { | |
| animate: true, | |
| context: "webgl", | |
| scaleToView: true | |
| }; | |
| var SCREEN_WIDTH = window.innerWidth; | |
| var SCREEN_HEIGHT = window.innerHeight; | |
| const sketch = ({ context }) => { | |
| // RENDERER | |
| const renderer = new THREE.WebGLRenderer({ | |
| canvas: context.canvas, | |
| alpha: true, | |
| }); | |
| renderer.setClearColor("#121212", 1); | |
| // CAMERA | |
| const camera = new THREE.PerspectiveCamera(100, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 1000); | |
| camera.position.set(0, 10, 30); | |
| // ORBIT CONTROLS | |
| const controls = new THREE.OrbitControls(camera, context.canvas); | |
| // SCENE | |
| const scene = new THREE.Scene(); | |
| // LIGHTING | |
| const light = new THREE.PointLight("white", 1.25); | |
| light.position.set(0, 0, 0); | |
| scene.add(light); | |
| // HELPERS | |
| scene.add(new THREE.PointLightHelper(light, 1)); | |
| scene.add(new THREE.GridHelper(50, 50)); | |
| return { | |
| render({ time }) { | |
| controls.update(); | |
| renderer.render(scene, camera); | |
| }, | |
| unload() { | |
| controls.dispose(); | |
| renderer.dispose(); | |
| } | |
| }; | |
| }; | |
| canvasSketch(sketch, settings); |