Table

by jason870509

HTML

<div id="info">Table
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/107/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js">


</script>

CSS

#info {
  position: absolute;
  top: 1%;
  width: 100%;
  padding: 10px;
  text-align: center;
  color: #ffee12;
}

body {
  overflow: hidden;
}

JavaScript

var renderer, scene, camera, controls;
var texture, mesh;
var tireAssembly
init();
animate();

function init() {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.z = 200;
  camera.position.y = 200;
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x888888);
  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFShadowMap;
  
  document.body.appendChild(renderer.domElement);
  controls = new THREE.OrbitControls(camera, renderer.domElement);

  let gridXZ = new THREE.GridHelper(200, 20, 'red', 'white')
  var plane = new THREE.Mesh(new THREE.PlaneGeometry(1000, 1000), new THREE.MeshPhongMaterial({side: THREE.DoubleSide}));
  plane.position.y = 
  scene.add(plane);
  plane.rotation.x = - Math.PI / 2
  plane.receiveShadow = true;
  //scene.add(gridXZ)
	var light = new THREE.AmbientLight( 0x444444 ); // soft white light
	scene.add( light );

  /////////////////////////////////////////////////////////////////////
  let loader = new THREE.TextureLoader();
  loader.crossOrigin = '';
  let tableTex = loader.load('https://i.imgur.com/p4HtN0u.jpg');
  let lampTex = loader.load('https://i.imgur.com/BDk9cu2.jpg')
  let pencilBoxTex = loader.load('https://i.imgur.com/noISaCj.png')
  pencilBoxTex.wrapS = pencilBoxTex.wrapT = THREE.RepeatWrapping;
	var table = new THREE.Object3D();
  
  var tableTop = new THREE.Mesh(new THREE.BoxGeometry(100,60,5, 5), new THREE.MeshPhongMaterial({map:tableTex, color:0xf5a945}));
  table.add(tableTop);
  tableTop.castShadow = true;
  tableTop.receiveShadow = true; 
  scene.add(table);
  tableTop.rotation.x = Math.PI / 2;
  tableTop.position.y = 15
  table.position.y = 60
  tableTop.receiveShadow = true;
	var tableTop2 = new THREE.Mesh(new THREE.BoxGeometry(100,60,5, 5), new THREE.MeshPhongMaterial({map:tableTex, color:0xf5a945}));
  table.add(tableTop2);
 ...