Skip to content

Instantly share code, notes, and snippets.

@jeonghopark

jeonghopark/index.html

Last active February 5, 2017 18:39
Show Gist options
  • Save jeonghopark/4d9d2c57c09e12cd8048a4ff6efb0b6f to your computer and use it in GitHub Desktop.
Save jeonghopark/4d9d2c57c09e12cd8048a4ff6efb0b6f to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jeonghopark revised this gist Feb 5, 2017. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -59,7 +59,7 @@
    var material = new THREE.MeshNormalMaterial();
    var cube = new THREE.Mesh(geometry, material);
    cube.name = "cube";
    cube.position.z = -30;
    cube.position.z = 0;
    scene.add(cube);
    }

  2. jeonghopark revised this gist Feb 5, 2017. No changes.
  3. jeonghopark revised this gist Feb 5, 2017. 1 changed file with 0 additions and 20 deletions.
    20 changes: 0 additions & 20 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -37,18 +37,13 @@
    <body>

    <script type="text/javascript" src="js/three.min.js"></script>
    <script type="text/javascript" src="js/perlin.js"></script>

    <script>
    var scene, camera, renderer;

    var perlin = new Perlin('random seed');
    var pValue = 0;

    init();
    animate();


    function init() {
    scene = new THREE.Scene();

    @@ -66,29 +61,14 @@
    cube.name = "cube";
    cube.position.z = -30;
    scene.add(cube);


    var value = [];
    for (var i = 0; i < 100; i++) {
    var _x = i * 0.01;
    value[i] = perlin.noise(_x, 0, 0);
    }
    }


    function animate() {
    requestAnimationFrame(animate);
    render();
    }


    function render() {

    pValue += 1;

    value = perlin.noise(pValue * 0.1, 0, 0);

    scene.getObjectByName("cube").position.x = value;
    renderer.render(scene, camera);
    }

  4. jeonghopark revised this gist Feb 5, 2017. 1 changed file with 86 additions and 35 deletions.
    121 changes: 86 additions & 35 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,51 +2,102 @@
    <html>

    <head>
    <title>___title___</title>
    <meta charset="UTF-8">
    <meta name="keywords" content="JavaScript, Three.js, THREE.js, Three.js, WebGLRenderer">
    <meta name="author" content="JeongHo Park, JH Park, jeonghopark">
    <title>___title___</title>
    <meta charset="UTF-8">
    <meta name="keywords" content="HTML, CSS, JavaScript, Three.js, THREE.js, Three.js, WebGLRenderer">
    <meta name="author" content="JeongHo Park, JH Park, jeonghopark">

    <style>
    body {
    background-color: #D0AD99;
    /* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */
    background-image: -webkit-gradient(linear, bottom, top, from(#9CABC8), to(#D9EEF9));
    /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
    background-image: -webkit-linear-gradient(top, #9CABC8, #D9EEF9);
    /* Firefox 3.6 - 15 */
    background-image: -moz-linear-gradient(top, #9CABC8, #D9EEF9);
    /* Opera 11.1 - 12 */
    background-image: -o-linear-gradient(top, #9CABC8, #D9EEF9);
    /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
    background-image: linear-gradient(to top, #9CABC8, #D9EEF9);
    margin: 0px;
    overflow: hidden;
    }

    canvas {
    width: 100%;
    height: 100%
    }
    </style>


    </head>


    <body>

    <script type="text/javascript" src="js/three.min.js"></script>
    <script type="text/javascript" src="js/three.min.js"></script>
    <script type="text/javascript" src="js/perlin.js"></script>

    <script>
    var scene, camera, renderer;
    <script>
    var scene, camera, renderer;

    init();
    animate();
    var perlin = new Perlin('random seed');
    var pValue = 0;

    function init() {
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(
    75, window.innerWidth / window.innerHeight, 0.1, 10000
    );
    init();
    animate();

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    var geometry = new THREE.BoxGeometry(1, 1, 1);
    var material = new THREE.MeshNormalMaterial();
    var cube = new THREE.Mesh(geometry, material);
    scene.rotation.y = 45;
    scene.add(cube);

    camera.position.z = 5;
    }

    function animate() {
    requestAnimationFrame(animate);
    render();
    }

    function render() {
    renderer.render(scene, camera);
    }
    </script>
    function init() {
    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000);
    camera.position.z = 5;

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    window.addEventListener( 'resize', onWindowResize, false );
    document.body.appendChild(renderer.domElement);

    var geometry = new THREE.BoxGeometry(1, 1, 1);
    var material = new THREE.MeshNormalMaterial();
    var cube = new THREE.Mesh(geometry, material);
    cube.name = "cube";
    cube.position.z = -30;
    scene.add(cube);


    var value = [];
    for (var i = 0; i < 100; i++) {
    var _x = i * 0.01;
    value[i] = perlin.noise(_x, 0, 0);
    }
    }


    function animate() {
    requestAnimationFrame(animate);
    render();
    }


    function render() {

    pValue += 1;

    value = perlin.noise(pValue * 0.1, 0, 0);

    scene.getObjectByName("cube").position.x = value;
    renderer.render(scene, camera);
    }

    function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
    }
    </script>


    </body>
  5. jeonghopark revised this gist Feb 3, 2017. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -21,7 +21,9 @@

    function init() {
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000);
    camera = new THREE.PerspectiveCamera(
    75, window.innerWidth / window.innerHeight, 0.1, 10000
    );

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
  6. jeonghopark revised this gist Feb 3, 2017. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -4,7 +4,7 @@
    <head>
    <title>___title___</title>
    <meta charset="UTF-8">
    <meta name="keywords" content="HTML, CSS, JavaScript, Three.js, THREE.js, Three.js, WebGLRenderer">
    <meta name="keywords" content="JavaScript, Three.js, THREE.js, Three.js, WebGLRenderer">
    <meta name="author" content="JeongHo Park, JH Park, jeonghopark">
    </head>

  7. jeonghopark created this gist Feb 3, 2017.
    52 changes: 52 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,52 @@
    <!DOCTYPE html>
    <html>

    <head>
    <title>___title___</title>
    <meta charset="UTF-8">
    <meta name="keywords" content="HTML, CSS, JavaScript, Three.js, THREE.js, Three.js, WebGLRenderer">
    <meta name="author" content="JeongHo Park, JH Park, jeonghopark">
    </head>


    <body>

    <script type="text/javascript" src="js/three.min.js"></script>

    <script>
    var scene, camera, renderer;

    init();
    animate();

    function init() {
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000);

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    var geometry = new THREE.BoxGeometry(1, 1, 1);
    var material = new THREE.MeshNormalMaterial();
    var cube = new THREE.Mesh(geometry, material);
    scene.rotation.y = 45;
    scene.add(cube);

    camera.position.z = 5;
    }

    function animate() {
    requestAnimationFrame(animate);
    render();
    }

    function render() {
    renderer.render(scene, camera);
    }
    </script>


    </body>

    </html>