Three JS Exploration

In this example below you will see how to do a Three JS Exploration with some HTML / CSS and Javascript

Just getting the hang of it.

Thumbnail
This awesome code was written by digitalcraft, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright digitalcraft ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Three JS Exploration</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
  <script src='http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js'></script>
<script src='https://threejs.org/examples/js/objects/ShadowMesh.js'></script>
<script src='https://threejs.org/examples/js/controls/TrackballControls.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/digitalcraft/three-js-exploration-oXQEJR */
body{
overflow:hidden;
}

/*Downloaded from https://www.codeseek.co/digitalcraft/three-js-exploration-oXQEJR */
var camera, scene, renderer;
var container, mesh, geometry, plane;
var mouseX = 0,
  mouseY = 0;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

init();
animate();

function init() {
  container = document.createElement('div');
  document.body.appendChild(container);

  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.z = 1000;
  controls = new THREE.TrackballControls(camera);

  controls.rotateSpeed = 1.0;
  controls.zoomSpeed = 1.2;
  controls.panSpeed = 0.8;

  controls.noZoom = false;
  controls.noPan = false;

  controls.staticMoving = true;
  controls.dynamicDampingFactor = 0.3;

  controls.keys = [65, 83, 68];

  controls.addEventListener('change', render);

  scene = new THREE.Scene();
  light = new THREE.DirectionalLight(0x444444);
  light.position.set(1, 1, 1);
  scene.add(light);

  light = new THREE.DirectionalLight(0x00CCCC);
  light.position.set(-1, -1, -1);
  scene.add(light);

  light = new THREE.AmbientLight(0x009999);
  scene.add(light);

  var boxgeometry = new THREE.CubeGeometry(200, 200, 200);
  var boxmaterial = new THREE.MeshLambertMaterial({
    color: 0x00ffff
  });
  var cube = new THREE.Mesh(boxgeometry, boxmaterial);
  cube.castShadow = true;
  cube.position.x = 0;
  cube.position.y = 100;
  cube.position.z = 0;

  scene.add(cube);

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor('rgb(40,40,40)');
  container.appendChild(renderer.domElement);

  document.addEventListener('mousemove', onDocumentMouseMove, false);
  window.addEventListener('resize', onWindowResize, false);

}

function onWindowResize() {

  windowHalfX = window.innerWidth / 2;
  windowHalfY = window.innerHeight / 2;

  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize(window.innerWidth, window.innerHeight);

}

function onDocumentMouseMove(event) {

  mouseX = (event.clientX - windowHalfX) / 2;
  mouseY = (event.clientY - windowHalfY) / 2;

}

//

function animate() {

  requestAnimationFrame(animate);
  /* camera.position.x += (mouseX - camera.position.x) * .50;
   camera.position.y += (-mouseY - camera.position.y) * .50;*/
  controls.update();
  render();

}

function render() {
  camera.lookAt(scene.position);
  renderer.render(scene, camera);
}

Comments