Skip to content

Instantly share code, notes, and snippets.

@elishaukpong
Forked from sdras/three.js starter
Created May 28, 2020 15:38
Show Gist options
  • Save elishaukpong/329a9cb79e54ebf4cdaf6c7f47d25d4c to your computer and use it in GitHub Desktop.
Save elishaukpong/329a9cb79e54ebf4cdaf6c7f47d25d4c to your computer and use it in GitHub Desktop.
// Remember to bring in three.js and here is the script for the trackball controls as well:
// https://cdn.rawgit.com/mrdoob/three.js/dev/examples/js/controls/TrackballControls.js
//RENDERER
const renderer = new THREE.WebGLRenderer({
canvas: document.getElementById('canvas'),
antialias: true
});
renderer.setClearColor(0x25c8ce);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
//CAMERA
const camera = new THREE.PerspectiveCamera(
35,
window.innerWidth / window.innerHeight,
0.1,
3000
);
//SCENE
const scene = new THREE.Scene();
//LIGHTS
const light1 = new THREE.AmbientLight(0xffffff, 0.5),
light2 = new THREE.PointLight(0xffffff, 1);
scene.add(light1);
scene.add(light2);
//OBJECT
const geometry = new THREE.CubeGeometry(100, 100, 100);
const material = new THREE.MeshLambertMaterial({ color: 0xf3ffe2 });
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, -1000); //set the view position backwards in space so we can see it
scene.add(mesh);
//RENDER LOOP
requestAnimationFrame(render);
function render() {
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.03;
renderer.render(scene, camera);
requestAnimationFrame(render);
}
window.addEventListener( 'resize', function () {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}, false );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment