const scene = new THREE.Scene();
var container;
container = document.getElementById( "stage" );
scene.background = new THREE.Color().setHSL( 0.6, 0, 1 );
scene.fog = new THREE.Fog( scene.background, 1, 5000 );
var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444, 1.5 );
hemiLight.position.set( 0, 300, 0 );
scene.add( hemiLight );
var dirLight = new THREE.DirectionalLight( 0xffffff );
dirLight.position.set( 75, 300, -75 );
scene.add( dirLight );
var containerWidth = container.offsetWidth;
console.log(containerWidth);
var containerHeight = (containerWidth / 3)*2;
var camera = new THREE.PerspectiveCamera( 75, containerWidth / containerHeight, 0.1, 1000 );
var axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );
function rotateObject(object, degreeX=0, degreeY=0, degreeZ=0) {
object.rotateX(THREE.Math.degToRad(degreeX));
object.rotateY(THREE.Math.degToRad(degreeY));
object.rotateZ(THREE.Math.degToRad(degreeZ));
}
var renderer = new THREE.WebGLRenderer( { alpha: true, antialias: true } );
renderer.setSize( containerWidth, containerHeight );
renderer.setClearColor( 0xffffff, 0);
renderer.outputEncoding = THREE.sRGBEncoding;
const controls = new OrbitControls( camera, renderer.domElement );
camera.position.y = 0.1; //move down slightly
camera.position.z = 2; //zoom
controls.update();
var loader = new GLTFLoader();
var bench = "";
loader.load( 'bench.glb', function ( gltf ) {
bench = gltf.scene;
scene.add( gltf.scene );
}, undefined, function ( error ) {
console.error( error );
} );
container.appendChild( renderer.domElement );
function addObj(obj){
scene.remove(bench); /* removing the square object here, */
loader.load( obj+'.glb', function ( gltf ) {
bench = gltf.scene;
scene.add( gltf.scene );
}, undefined, function ( error ) {
console.error( error );
} );
};
document.querySelectorAll(".control3d").forEach(control3d => {
control3d.addEventListener("click", (e) => {
e.preventDefault();
addObj(control3d.id);
})
});
function myFunction(e) {
e.preventDefault();
camera.position.y = 0.1; //move down slightly
camera.position.z = 2; //zoom
camera.position.x = 0;
controls.update();
}
document.getElementById("reset").addEventListener("click", myFunction);
var animate = function () {
requestAnimationFrame( animate );
renderer.render( scene, camera );
};
animate();