var camera, scene, renderer, geometry, material, mesh; | |
var texture, lightsource; | |
function init() { | |
// Load a texture | |
texture = new THREE.TextureLoader().load( "checkered.png" ); | |
// Create a scene | |
scene = new THREE.Scene(); | |
// Create a geometry | |
// Create a box (cube) of 10 width, length, and height | |
geometry = new THREE.BoxGeometry( 10, 10, 10 ); | |
// Create a MeshPhongMaterial with a loaded texture | |
material = new THREE.MeshPhongMaterial( { map: texture} ); | |
// Combine the geometry and material into a mesh | |
mesh = new THREE.Mesh( geometry, material ); | |
// Add the mesh to the scene | |
scene.add( mesh ); | |
// Create a SpotLight with the color white (0xffffff) | |
lightsource = new THREE.SpotLight( 0xffffff ); | |
lightsource.position.set( 10, 10, 10 ); | |
// Add the light to the scene | |
scene.add( lightsource ); | |
// Create a camera | |
// Set a Field of View (FOV) of 75 degrees | |
// Set an Apsect Ratio of the inner width divided by the inner height of the window | |
// Set the 'Near' distance at which the camera will start rendering scene objects to 2 | |
// Set the 'Far' (draw distance) at which objects will not be rendered to 1000 | |
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 2, 1000 ); | |
// Move the camera 'out' by 30 | |
camera.position.z = 30; | |
// Create a WebGL Renderer | |
renderer = new THREE.WebGLRenderer(); | |
// Set the size of the renderer to the inner width and inner height of the window | |
renderer.setSize( window.innerWidth, window.innerHeight ); | |
// Add in the created DOM element to the body of the document | |
document.body.appendChild( renderer.domElement ); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment