Commit 4377d7e1 authored by Amira Abdel-Rahman's avatar Amira Abdel-Rahman

Threejs with AR

parent 0feb5cf4
function init() {
var scene = new THREE.Scene();
//////////2////////////
// var box = getBox(1, 1, 1);
// box.position.y = box.geometry.parameters.height/2;
// scene.add(box);
//////////////////////
//////////3////////////
// var plane = getPlane(4);
// plane.rotation.x = Math.PI/2;
// scene.add(plane);
//////////////////////
var camera = new THREE.PerspectiveCamera(
45,
window.innerWidth/window.innerHeight,
1,
1000
);
//////////1////////////
// camera.position.x = 1;
// camera.position.y = 2;
// camera.position.z = 5;
//////////////////////
camera.lookAt(new THREE.Vector3(0, 0, 0));
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('webgl').appendChild(renderer.domElement);
renderer.render(
scene,
camera
);
}
//////////2////////////
// function getBox(w, h, d) {
// var geometry = new THREE.BoxGeometry(w, h, d);
// var material = new THREE.MeshBasicMaterial({
// color: 0x00ff00
// });
// var mesh = new THREE.Mesh(
// geometry,
// material
// );
// return mesh;
// }
//////////////////////
/////////3/////////////
// function getPlane(size) {
// var geometry = new THREE.PlaneGeometry(size, size);
// var material = new THREE.MeshBasicMaterial({
// color: 0xff0000,
// side: THREE.DoubleSide
// });
// var mesh = new THREE.Mesh(
// geometry,
// material
// );
// return mesh;
// }
//////////////////////
init();
\ No newline at end of file
function init() {
var scene = new THREE.Scene();
var box = getBox(1, 1, 1);
var plane = getPlane(4);
//////////////2///////////////
//plane.name = 'plane-1';
/////////////////////////////
box.position.y = box.geometry.parameters.height/2;
plane.rotation.x = Math.PI/2;
//plane.position.y = 1;
scene.add(box);
scene.add(plane);
var camera = new THREE.PerspectiveCamera(
45,
window.innerWidth/window.innerHeight,
1,
1000
);
camera.position.x = 1;
camera.position.y = 2;
camera.position.z = 5;
camera.lookAt(new THREE.Vector3(0, 0, 0));
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('webgl').appendChild(renderer.domElement);
//////////////1///////////////
renderer.render(
scene,
camera
);
//update(renderer, scene, camera);
///////////////////////////////
return scene;
}
function getBox(w, h, d) {
var geometry = new THREE.BoxGeometry(w, h, d);
var material = new THREE.MeshBasicMaterial({
color: 0x00ff00
});
var mesh = new THREE.Mesh(
geometry,
material
);
return mesh;
}
function getPlane(size) {
var geometry = new THREE.PlaneGeometry(size, size);
var material = new THREE.MeshBasicMaterial({
color: 0xff0000,
side: THREE.DoubleSide
});
var mesh = new THREE.Mesh(
geometry,
material
);
return mesh;
}
//////////////1///////////////
function update(renderer, scene, camera) {
renderer.render(
scene,
camera
);
//////////////2///////////////
// var plane = scene.getObjectByName('plane-1');
// plane.rotation.y += 0.001;
// plane.rotation.z += 0.001;
//////////////////////////////
//////////////3///////////////
// scene.traverse(function(child) {
// child.scale.x += 0.001;
// })
//////////////////////////////
requestAnimationFrame(function() {
update(renderer, scene, camera);
})
}
//////////////1///////////////
var scene = init();
\ No newline at end of file
function init() {
var scene = new THREE.Scene();
var box = getBox(1, 1, 1);
var plane = getPlane(4);
plane.name = 'plane-1';
box.position.y = box.geometry.parameters.height/2;
box.position.z = -box.geometry.parameters.height/2;
plane.rotation.x = Math.PI/2;
plane.position.y = 1;
plane.add(box);
scene.add(plane);
///////////////////1/////////////
// var gui = new dat.GUI();
// gui.add(box.scale, 'x', 0, 5);
// gui.add(box.scale, 'y', 0, 5);
//////////////////////////////////
var camera = new THREE.PerspectiveCamera(
45,
window.innerWidth/window.innerHeight,
1,
1000
);
camera.position.x = 1;
camera.position.y = 2;
camera.position.z = 5;
camera.lookAt(new THREE.Vector3(0, 0, 0));
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('webgl').appendChild(renderer.domElement);
///////////////////2/////////////
//var controls = new THREE.OrbitControls(camera, renderer.domElement);
//update(renderer, scene, camera, controls);
update(renderer, scene, camera);
/////////////////////////////////////
return scene;
}
function getBox(w, h, d) {
var geometry = new THREE.BoxGeometry(w, h, d);
var material = new THREE.MeshBasicMaterial({
color: 0x00ff00
});
var mesh = new THREE.Mesh(
geometry,
material
);
return mesh;
}
function getPlane(size) {
var geometry = new THREE.PlaneGeometry(size, size);
var material = new THREE.MeshBasicMaterial({
color: 0xff0000,
side: THREE.DoubleSide
});
var mesh = new THREE.Mesh(
geometry,
material
);
return mesh;
}
function update(renderer, scene, camera) {
renderer.render(
scene,
camera
);
var plane = scene.getObjectByName('plane-1');
plane.rotation.y += 0.001;
plane.rotation.z += 0.001;
requestAnimationFrame(function() {
update(renderer, scene, camera);
})
}
////////////////////////////2//////////////////////////////
// function update(renderer, scene, camera, controls) {
// renderer.render(
// scene,
// camera
// );
// var plane = scene.getObjectByName('plane-1');
// plane.rotation.y += 0.001;
// plane.rotation.z += 0.001;
// requestAnimationFrame(function() {
// update(renderer, scene, camera, controls);
// })
// }
////////////////////////////////////////////////
var scene = init();
\ No newline at end of file
function init() {
var scene = new THREE.Scene();
var gui = new dat.GUI();
var box = getBox(1, 1, 1);
var plane = getPlane(20);
var sphere = getSphere(0.05);
plane.name = 'plane-1';
box.position.y = box.geometry.parameters.height/2;
plane.rotation.x = Math.PI/2;
/////////////2///////////////
// var pointLight = getPointLight(1);
// pointLight.position.y = 2;
// pointLight.intensity = 2;
// pointLight.add(sphere);
// scene.add(pointLight);
// gui.add(pointLight, 'intensity', 0, 10);
// gui.add(pointLight.position, 'y', 0, 5);
////////////////////////////
scene.add(box);
scene.add(plane);
var camera = new THREE.PerspectiveCamera(
45,
window.innerWidth/window.innerHeight,
1,
1000
);
camera.position.x = 1;
camera.position.y = 2;
camera.position.z = 5;
camera.lookAt(new THREE.Vector3(0, 0, 0));
var renderer = new THREE.WebGLRenderer();
////////////////////////////
renderer.shadowMap.enabled = true;
////////////////////////////
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor('rgb(120, 120, 120)');
document.getElementById('webgl').appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
update(renderer, scene, camera, controls);
return scene;
}
function getBox(w, h, d) {
var geometry = new THREE.BoxGeometry(w, h, d);
/////////////1///////////////
var material = new THREE.MeshPhongMaterial({
color: 'rgb(120, 120, 120)'
});
////////////////////////////
var mesh = new THREE.Mesh(
geometry,
material
);
////////////3////////////////
//mesh.castShadow = true;
////////////////////////////
return mesh;
}
function getPlane(size) {
var geometry = new THREE.PlaneGeometry(size, size);
////////////1////////////////
var material = new THREE.MeshPhongMaterial({
color: 'rgb(120, 120, 120)',
side: THREE.DoubleSide
});
////////////////////////////
var mesh = new THREE.Mesh(
geometry,
material
);
/////////////3///////////////
//mesh.receiveShadow = true;
////////////////////////////
return mesh;
}
function getSphere(size) {
var geometry = new THREE.SphereGeometry(size, 24, 24);
var material = new THREE.MeshBasicMaterial({
color: 'rgb(255, 255, 255)'
});
var mesh = new THREE.Mesh(
geometry,
material
);
return mesh;
}
//////////////2//////////////
function getPointLight(intensity) {
var light = new THREE.PointLight(0xffffff, intensity);
light.castShadow = true;
return light;
}
////////////////////////////
function update(renderer, scene, camera, controls) {
renderer.render(
scene,
camera
);
controls.update();
requestAnimationFrame(function() {
update(renderer, scene, camera, controls);
})
}
var scene = init();
\ No newline at end of file
function init() {
var scene = new THREE.Scene();
var gui = new dat.GUI();
var plane = getPlane(30);
var sphere = getSphere(0.05);
var boxGrid = getBoxGrid(10, 1.5);
plane.name = 'plane-1';
plane.rotation.x = Math.PI/2;
scene.add(plane);
scene.add(boxGrid);
////////////////1/////////////////////
var sphere = getSphere(0.05);
var pointLight = getPointLight(1);
pointLight.position.y = 2;
pointLight.intensity = 2;
pointLight.add(sphere);
scene.add(pointLight);
gui.add(pointLight, 'intensity', 0, 10);
gui.add(pointLight.position, 'y', 0, 5);
/////////////////////////////////////
// ///////////////2//////////////////////
// var directionalLight = getDirectionalLight(1);
// var helper = new THREE.CameraHelper(directionalLight.shadow.camera);
// scene.add(helper);
// directionalLight.position.y = 4;
// directionalLight.intensity = 2;
// directionalLight.add(sphere);
// scene.add(directionalLight);
// gui.add(directionalLight, 'intensity', 0, 10);
// gui.add(directionalLight.position, 'x', 0, 20);
// gui.add(directionalLight.position, 'y', 0, 20);
// gui.add(directionalLight.position, 'z', 0, 20);
// ////////////////////////////////////////
// /////////////3////////////////
// var spotLight = getSpotLight(1);
// spotLight.position.y = 4;
// spotLight.intensity = 2;
// scene.add(spotLight);
// gui.add(spotLight, 'intensity', 0, 10);
// gui.add(spotLight.position, 'x', 0, 20);
// gui.add(spotLight.position, 'y', 0, 20);
// gui.add(spotLight.position, 'z', 0, 20);
// gui.add(spotLight, 'penumbra', 0, 1);
// ///////////////////////////////////////
// ////////////4//////////////
// var ambientLight= getAmbientLight(5.0);
// scene.add(ambientLight);
// ////////////////////////
var camera = new THREE.PerspectiveCamera(
45,
window.innerWidth/window.innerHeight,
1,
1000
);
camera.position.x = 1;
camera.position.y = 2;
camera.position.z = 5;
camera.lookAt(new THREE.Vector3(0, 0, 0));
var renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true;
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor('rgb(120, 120, 120)');
document.getElementById('webgl').appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
update(renderer, scene, camera, controls);
return scene;
}
function getBox(w, h, d) {
var geometry = new THREE.BoxGeometry(w, h, d);
var material = new THREE.MeshPhongMaterial({
color: 'rgb(120, 120, 120)'
});
var mesh = new THREE.Mesh(
geometry,
material
);
mesh.castShadow = true;
return mesh;
}
////////////////1/////////////////////
function getBoxGrid(amount, separationMultiplier) {
var group = new THREE.Group();
for (var i=0; i<amount; i++) {
var obj = getBox(1, 1, 1);
obj.position.x = i * separationMultiplier;
obj.position.y = obj.geometry.parameters.height/2;
group.add(obj);
for (var j=1; j<amount; j++) {
var obj = getBox(1, 1, 1);
obj.position.x = i * separationMultiplier;
obj.position.y = obj.geometry.parameters.height/2;
obj.position.z = j * separationMultiplier;
group.add(obj);
}
}
group.position.x = -(separationMultiplier * (amount-1))/2;
group.position.z = -(separationMultiplier * (amount-1))/2;
return group;
}
//////////////////////////////////////