three.js test

refresh basics

by bhupendra negi

HTML

<script src="http://threejs.org/examples/js/controls/TrackballControls.js"></script>
<script src="http://threejs.org/build/three.min.js"></script>
<div id="container">
</div>

CSS

canvas { width: 100%; height: 100% }

div#container {
    width:800;
    height:600
    
}

JavaScript

//scene

var scene = new THREE.Scene();


var camera = new THREE.PerspectiveCamera(85, window.innerWidth/window.innerHeight, 0.1, 800);
camera.position.z = 20;
camera.position.y=20;
camera.position.x=-20;

cameraPerspective = new THREE.PerspectiveCamera( 55, .5*window.innerWidth/window.innerHeight, 0.1, 50 );
    
    cameraPerspectiveHelper = new THREE.CameraHelper( cameraPerspective );
	scene.add( cameraPerspectiveHelper );

//renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById("container").appendChild(renderer.domElement);

 document.body.appendChild( renderer.domElement );
    


// mesh + geo
var geometry = new THREE.BoxGeometry(1,1,1);
var material = new THREE.MeshLambertMaterial({color: 0xFF0000 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
scene.add(camera);





//scene.add(new THREE.AxisHelper(100));

 // for meshbasic material light not require but for others light required .

//controls
   /* controls = new THREE.TrackballControls( camera, renderer.domElement );
*/


//light 
var light = new THREE.PointLight( 0xFF0000 );
light.position.set( 0, 0, 300 );
scene.add( light )


camera.lookAt(scene.position);

var render = function () {
    requestAnimationFrame(render);
  cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    cube.rotation.z += 0.01;
    renderer.render(scene, camera);
   controls.update();
};

render();