var camera, scene, renderer; | |
var floorGeometry, floorMaterial, floorMesh, floorTexture; | |
var boxGeometry, boxMaterial, boxMesh, boxTexture; | |
var controls; | |
var prevTime = performance.now(); | |
var velocity = new THREE.Vector3(); | |
function init() { | |
// Load a texture | |
boxTexture = new THREE.TextureLoader().load( "checkered.png" ); | |
floorTexture = new THREE.TextureLoader().load( "bw_checkered.png" ); | |
// Wrap the floor texture | |
floorTexture.wrapS = THREE.RepeatWrapping; | |
// Repeat the texture by 16 times in both directions | |
floorTexture.repeat.set( 16, 16 ); | |
// 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, 1, 1000 ); | |
// Create a scene | |
scene = new THREE.Scene(); | |
// Create a HemisphereLight source | |
var light = new THREE.HemisphereLight( 0xeeeeff, 0x777788, 0.75 ); | |
light.position.set( 0.5, 1, 0.75 ); | |
scene.add( light ); | |
// Create First Person Controls | |
controls = new THREE.FirstPersonControls( camera ); | |
scene.add( controls.getObject() ); | |
// Create a PlaneGeometry for the floor | |
floorGeometry = new THREE.PlaneGeometry( 100, 100, 100, 100 ); | |
// Roate the floor "down" | |
floorGeometry.rotateX( - Math.PI / 2 ); | |
// Create a floor material | |
floorMaterial = new THREE.MeshBasicMaterial( { map: floorTexture } ); | |
floorMesh = new THREE.Mesh( floorGeometry, floorMaterial ); | |
scene.add( floorMesh ); | |
// Create a geometry | |
// Create a box (cube) of 10 width, length, and height | |
boxGeometry = new THREE.BoxGeometry( 10, 10, 10 ); | |
// Create a MeshPhongMaterial with a loaded texture | |
boxMaterial = new THREE.MeshPhongMaterial( { map: boxTexture} ); | |
// Combine the geometry and material into a mesh | |
boxMesh = new THREE.Mesh( boxGeometry, boxMaterial ); | |
// Add the mesh to the scene | |
scene.add( boxMesh ); | |
// 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