<canvas id="c"></canvas>

<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/108/three.min.js'></script>
	<script src='https://cdn.jsdelivr.net/gh/mrdoob/three.js@r92/examples/js/loaders/GLTFLoader.js'></script>
	<script src='https://threejs.org/examples/js/controls/OrbitControls.js'></script>

html, body {
  margin: 0;
  height: 100%;
}
#c {
  width: 100%;
  height: 100%;
  display: block;
}
var theModel;

const canvas = document.querySelector('#c');
const renderer = new THREE.WebGLRenderer({canvas});

const fov = 45;
const aspect = 2;  // the canvas default
const near = 0.1;
const far = 100;

const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(-10, 2, 10);
		
var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.maxPolarAngle = Math.PI / 2;
controls.minPolarAngle = Math.PI / 3;

controls.enableDamping = true;
controls.enablePan = true;
controls.dampingFactor = 0.3;
controls.autoRotate = false; // Toggle this if you'd like the chair to automatically rotate
controls.autoRotateSpeed = 0.2; // 30

const scene = new THREE.Scene();
scene.background = new THREE.Color('black');
		
const planeSize = 40;
const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
const planeMat = new THREE.MeshPhongMaterial({
    color: 0x909090,
		shininess: 0
});

const mesh1 = new THREE.Mesh(planeGeo, planeMat);
mesh1.rotation.x = Math.PI * -.5;
scene.add(mesh1);
		  
const duvar_materyal = new THREE.MeshPhongMaterial({color: 0xb3ab92, shininess: 10});
const cerceve_materyal = new THREE.MeshPhongMaterial({color: 0xba6d13, shininess: 10});
const button_materyal = new THREE.MeshPhongMaterial({color: 0xba6d13, shininess: 10});
		
const obje_map = [
  {childID: "duvar", mtl: duvar_materyal},
  {childID: "cerceve", mtl: cerceve_materyal},
  {childID: "button", mtl: button_materyal}
];
		
const cubeSize = 4;
    const cubeGeo = new THREE.BoxBufferGeometry(cubeSize, cubeSize, cubeSize);
    const cubeMat = new THREE.MeshPhongMaterial({color: '#8AC'});
    const mesh = new THREE.Mesh(cubeGeo, cubeMat);
    mesh.position.set(cubeSize + 1, cubeSize / 2, 0);
    scene.add(mesh);
		
	


const color = 0xFFFFFF;
const intensity = 1;
		
var lightDirect = new THREE.DirectionalLight(0xffffff, 1);
lightDirect.position.set(0,0,20);
lightDirect.castShadow = true;
lightDirect.shadow.mapSize = new THREE.Vector2(1024,1024);
scene.add(lightDirect);
		
var lightTop = new THREE.SpotLight(color);
lightTop.position.set(0,10,0);
lightTop.target.position.set(0, 0, -10);
scene.add(lightTop);
		
const light = new THREE.DirectionalLight(color, intensity);
light.position.set(0, 10, 0);
light.target.position.set(-5, 10, 0);
scene.add(light);
scene.add(light.target);

			
const light1 = new THREE.DirectionalLight(color, intensity);
light1.position.set(0, 10, 0);
light1.target.position.set(10, 10, 0);
scene.add(light1);
scene.add(light1.target);  


function resizeRendererToDisplaySize(renderer) {
  const canvas = renderer.domElement;
  const width = canvas.clientWidth;
  const height = canvas.clientHeight;
  const needResize = canvas.width !== width || canvas.height !== height;
  if (needResize) {
    renderer.setSize(width, height, false);
  }
  return needResize;
}

function render() {


  if (resizeRendererToDisplaySize(renderer)) {
    const canvas = renderer.domElement;
    camera.aspect = canvas.clientWidth / canvas.clientHeight;
    camera.updateProjectionMatrix();
  }

  renderer.render(scene, camera);
  requestAnimationFrame(render);
}

requestAnimationFrame(render);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.