Difference between revisions of "Team:Hawaii/Gina"

 
(13 intermediate revisions by the same user not shown)
Line 1: Line 1:
<html>
+
{{Hawaii/All}}
 +
{{Hawaii/Navbar}}
 +
{{Hawaii/Banner}}
 +
{{Hawaii/Subheader}}
 +
{{Hawaii/Entry|title=Protease Digestion|date=May 2, 2018|text=This week, I did baskdljfklsad d blah blah blah}}
  
<!-- GINA'S RESEARCH JOURNAL -->
+
{{Hawaii/Entry|title=Protease Digestion|date=May 2, 2018|text=This week, I asdfsdf ah blah and blah blah blah}}
<!-- DO NOT EDIT UNLESS YOU ARE GINA -->
+
  
<!-- I RECOMMEND THAT YOU WRITE THINGS IN NOTEPAD+ AND THEN TRANSFER THEM TO THE WIKI -->
+
{{Hawaii/Entry|title=Protease Digestion|date=May 2, 2018|text=This week, I asdfasdf ah blah blah and blah blah blah}}
<!-- Headers need to be enclosed by <h1> Wording </h1> -->
+
<!-- Regular paragraphs need to be enclosed by <p> Wording </p> -->
+
  
 +
{{Hawaii/Entry|title=Protease Digestion|date=May 2, 2018|text=This week, I did blah blah blah and blooiashdf blah blah}}
  
<!-- BODY START -->
 
<body>
 
Test Hello 
 
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.js"></script>
 
<script src="app.js"></script>
 
</body>
 
<!-- BODY END -->
 
  
<style>
 
body {
 
  margin: 0px;
 
  width: calc(100vw);
 
  height: calc(100vh);
 
  background-color: yellow;
 
}
 
</style>
 
<script>
 
window.onload = function() {
 
  let lightIntensity = 1.4;
 
  let windowHalfX = window.innerWidth/2;
 
  let windowHalfY = window.innerHeight/2;
 
  
  let WIDTH  = window.innerWidth;
+
{{Hawaii/Footer}}
  let HEIGHT = window.innerHeight;
+
  let SPEED = 0.01;
+
 
+
  let cube = null;
+
 
+
  init();
+
  animate();
+
 
+
  function init() {
+
 
+
    container = document.createElement('div');
+
    document.body.appendChild(container);
+
    scene = new THREE.Scene();
+
 
+
    // initCamera
+
    camera = new THREE.PerspectiveCamera(70, WIDTH / HEIGHT, 1, 500);
+
    camera.position.set(0, 3.5, 10);
+
    camera.lookAt(scene.position);
+
 
+
    // initMesh
+
    let size = 3;
+
    let geometry = new THREE.BoxGeometry( size, size, size );
+
    for ( var i = 0; i < geometry.faces.length; i ++ ) {
+
        geometry.faces[i].color.setHex(Math.random() * 0xffffff);
+
    }
+
    let material = new THREE.MeshBasicMaterial( { color: 0xffffff, vertexColors: THREE.FaceColors } );
+
    cube = new THREE.Mesh( geometry, material );
+
    cube.translation = THREE.GeometryUtils.center(geometry);
+
    scene.add( cube );
+
 
+
    // initLight
+
    light = new THREE.PointLight(0xffffff, lightIntensity);
+
    light.position.set(50,50,50);
+
    scene.add(light);
+
    console.log(scene.children);
+
 
+
    // initRenderer
+
    renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+
    renderer.setPixelRatio(window.devicePixelRatio);
+
    renderer.setSize(WIDTH, HEIGHT);
+
    renderer.sortObjects = false;
+
 
+
    container.appendChild(renderer.domElement);
+
  }
+
 
+
  function onResize() {
+
    windowHalfX = window.innerWidth/2;
+
    windowHalfY = window.innerHeight/2;
+
    camera.aspect = window.innerWidth/window.innerHeight;
+
    camera.updateProjectionMatrix();
+
    renderer.setSize(window.innerWidth, window.innerHeight);
+
  }
+
 
+
  function rotateMesh() {
+
    if (!cube) {
+
      return;
+
    }
+
    cube.rotation.x -= SPEED*2;
+
    cube.rotation.y -= SPEED;
+
    cube.rotation.z -= SPEED*3;
+
  }
+
 
+
  function render() {
+
    renderer.render(scene,camera);
+
    rotateMesh();
+
  }
+
 
+
  function animate() {
+
    requestAnimationFrame(animate);
+
    render();
+
  }
+
 
+
  window.addEventListener('resize',onResize,false);
+
}
+
</script>
+
 
+
+
</html>
+

Latest revision as of 06:38, 4 July 2018

{{{title}}}

{{{title}}}

{{{sub1}}}

{{{sub2}}}

{{{sub3}}}

{{{sub4}}}

{{{sub5}}}

{{{sub6}}}

Protease Digestion

May 2, 2018

This week, I did baskdljfklsad d blah blah blah