|
// 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); |