three.js ~ example ~ Mr.doob

2012-01-05 ~

HTML

<div class="container">
  <div id="webGL"></div>
  <div id="inspector">
    <p>
    apsognpasognpaosg
    </p>
    <p>
    asügomaüsognpaosngopas
    
    </p>
  </div>
</div>

CSS

.container {
   
  display: flex;
}

#webGL {
  flex: 2;
  height: 100vh;
}

#inspector {
  flex: 1;
  height: 100vh;
}

JavaScript

var camera, scene, renderer, geometry, material, mesh;
var w, h;
var container;

init();
animate();

function init() {

    container = document.querySelector('#webGL');

    w = container.clientWidth
    h = container.clientHeight
    
    console.log(w, h)

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(50, w / h, 1, 10000);
    camera.position.z = 500;
    scene.add(camera);


    renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(new THREE.Color(0xFFFF00))
    renderer.setSize(w, h);

		container.append(renderer.domElement);




		// Cube
    geometry = new THREE.CubeGeometry(200, 200, 200);
    material = new THREE.MeshNormalMaterial();

    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
    
    
    window.addEventListener('resize', resize);

}

function animate() {

    requestAnimationFrame(animate);
    render();

}

function render() {

    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;

    renderer.render(scene, camera);

}

function resize() {
	
  w = container.clientWidth
  h = container.clientHeight

  console.log(w, h)
    
	renderer.setSize(w, h);
  
  camera.aspect = w / h;
  camera.updateProjectionMatrix();

}