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();
// TEXTURES
const loader = new THREE.TextureLoader();
const mercuryTexture = loader.load("assets/mercury.jpg");
// MATERIALS
const mercuryMaterial = new THREE.MeshStandardMaterial({ map: mercuryTexture });
// MESHES
const geometry = new THREE.SphereGeometry(1, 32, 16);
const mercuryMesh = new THREE.Mesh(geometry, mercuryMaterial);
mercuryMesh.position.set(25, 0, 0);
mercuryMesh.scale.setScalar(0.8);
scene.add(mercuryMesh);
// 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 }) {
mercuryMesh.rotation.y = time * 0.20;
controls.update();
renderer.render(scene, camera);
},
unload() {
controls.dispose();
renderer.dispose();
}
};
};
canvasSketch(sketch, settings);
view raw block7.js hosted with ❤ by GitHub