Basic 3D Graphics Using Three.js

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/TrackballControls.js"></script>

CSS

body { margin: 0; }
canvas { width: 100%; height: 100% }

JavaScript

var scene = new THREE.Scene();

// Camera
var camera = new THREE.PerspectiveCamera( 15, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.x = 2;
camera.position.y = -2;
camera.position.z = 5;

// WebGL Renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

// Trackball controls
controls = new THREE.TrackballControls( camera );
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;

// Geometry / Material
var geometry = new THREE.SphereGeometry(1, 1, 1, 10, 10, 10);
/*
var material = new THREE.MeshBasicMaterial({
    color: '#efefef',
    wireframe: true
});
*/
var texture = new THREE.TextureLoader().load('https://hotload.com.br/logo.png');
var material = new THREE.MeshBasicMaterial({ map: image });
var cube = new THREE.Mesh(geometry, material);
cube.position.set(0, 0, 0);
scene.add(cube);

var render = function () {
	requestAnimationFrame( render );

    controls.update();
	cube.rotation.z += 0.01;

	renderer.render(scene, camera);
};
render();

window.addEventListener('resize', function () {
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize(window.innerWidth, window.innerHeight);
}, false );