Skip to content

Instantly share code, notes, and snippets.

@guillaumeportails

guillaumeportails/index.html

Created May 12, 2018 16:20
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save guillaumeportails/c01721c57b08b1a8de2295f3bcce5ecc to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save guillaumeportails/c01721c57b08b1a8de2295f3bcce5ecc to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. guillaumeportails created this gist May 12, 2018.
    94 changes: 94 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,94 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="Hello THREE">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r82/three.min.js"></script>
    <title>Hello THREE</title>
    </head>
    <body>

    <script id="jsbin-javascript">
    var camera, scene, renderer, mesh;

    init();
    animate();


    function init() {
    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.z = 400;
    scene = new THREE.Scene();
    var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
    var texture = new THREE.TextureLoader().load( 'https://upload.wikimedia.org/wikipedia/commons/c/c2/Snowman_icon.png' );
    var material = new THREE.MeshBasicMaterial( {
    map: texture,
    color: "green",
    wireframe: false });
    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );
    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
    //
    window.addEventListener( 'resize', onWindowResize, false );
    }

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

    function animate() {
    requestAnimationFrame( animate );
    mesh.rotation.x += 0.005;
    mesh.rotation.y += 0.01;
    renderer.render( scene, camera );
    }
    </script>



    <script id="jsbin-source-javascript" type="text/javascript">var camera, scene, renderer, mesh;

    init();
    animate();


    function init() {
    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.z = 400;
    scene = new THREE.Scene();
    var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
    var texture = new THREE.TextureLoader().load( 'https://upload.wikimedia.org/wikipedia/commons/c/c2/Snowman_icon.png' );
    var material = new THREE.MeshBasicMaterial( {
    map: texture,
    color: "green",
    wireframe: false });
    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );
    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
    //
    window.addEventListener( 'resize', onWindowResize, false );
    }

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

    function animate() {
    requestAnimationFrame( animate );
    mesh.rotation.x += 0.005;
    mesh.rotation.y += 0.01;
    renderer.render( scene, camera );
    }
    </script></body>
    </html>
    38 changes: 38 additions & 0 deletions jsbin.duweqer.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,38 @@
    var camera, scene, renderer, mesh;

    init();
    animate();


    function init() {
    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.z = 400;
    scene = new THREE.Scene();
    var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
    var texture = new THREE.TextureLoader().load( 'https://upload.wikimedia.org/wikipedia/commons/c/c2/Snowman_icon.png' );
    var material = new THREE.MeshBasicMaterial( {
    map: texture,
    color: "green",
    wireframe: false });
    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );
    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
    //
    window.addEventListener( 'resize', onWindowResize, false );
    }

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

    function animate() {
    requestAnimationFrame( animate );
    mesh.rotation.x += 0.005;
    mesh.rotation.y += 0.01;
    renderer.render( scene, camera );
    }