threejs.ipynb

{
  "nbformat": 4,
  "nbformat_minor": 0,
  "metadata": {
    "colab": {
      "name": "Copy of three-js 2 -- demo.ipynb",
      "provenance": [],
      "collapsed_sections": []
    },
    "kernelspec": {
      "name": "python3",
      "display_name": "Python 3"
    }
  },
  "cells": [
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "fSXgQNJE9Je3",
        "colab_type": "text"
      },
      "source": [
        "Use module syntax"
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "id": "vpTWsZJSQYjK",
        "colab_type": "code",
        "colab": {}
      },
      "source": [
        "import portpicker\n",
        "import threading\n",
        "import socket\n",
        "import IPython\n",
        "\n",
        "from six.moves import socketserver\n",
        "from six.moves import SimpleHTTPServer\n",
        "\n",
        "class V6Server(socketserver.TCPServer):\n",
        "  address_family = socket.AF_INET6\n",
        "\n",
        "class Handler(SimpleHTTPServer.SimpleHTTPRequestHandler):\n",
        "  def do_GET(self):\n",
        "    self.send_response(200)\n",
        "    # If the response should not be cached in the notebook for\n",
        "    # offline access:\n",
        "    # self.send_header('x-colab-notebook-cache-control', 'no-cache')\n",
        "    self.end_headers()\n",
        "    self.wfile.write(b'''\n",
        "      document.querySelector('#output-area').appendChild(document.createTextNode('Script result!'));\n",
        "    ''')\n",
        "\n",
        "port = portpicker.pick_unused_port()\n",
        "\n",
        "def server_entry():\n",
        "    httpd = V6Server(('::', port), Handler)\n",
        "    # Handle a single request then exit the thread.\n",
        "    httpd.serve_forever()\n",
        "\n",
        "thread = threading.Thread(target=server_entry)\n",
        "thread.start()\n",
        "\n",
        "# Display some HTML referencing the resource.\n",
        "# display(IPython.display.HTML('<script src=\"https://localhost:{port}/\"></script>'.format(port=port)))"
      ],
      "execution_count": 0,
      "outputs": []
    },
    {
      "cell_type": "code",
      "metadata": {
        "id": "57cGHcqk9FZe",
        "colab_type": "code",
        "colab": {}
      },
      "source": [
        "from IPython.display import HTML, Javascript\n",
        "\n",
        "# Set a global param on window with the port # that we'll be getting data from.\n",
        "display(Javascript(f'window.serverPort = {port}'))\n",
        "display(HTML('''\n",
        "<div id=\"container\"></div>\n",
        "<div id=\"info\"><a href=\"https://threejs.org\" target=\"_blank\" rel=\"noopener\">three.js</a> webgl - buffergeometry - lines</div>\n",
        "\n",
        "<script type=\"module\">\n",
        "  import * as THREE from 'https://unpkg.com/three?module';\n",
        "\n",
        "  //import Stats from './jsm/libs/stats.module.js';\n",
        "\n",
        "  var container, stats;\n",
        "\n",
        "  var camera, scene, renderer;\n",
        "\n",
        "  var line;\n",
        "  // Disable vertical scrolling.\n",
        "  google.colab.output.setIframeHeight(-1, true, {interactive: true, maxHeight: 99999})\n",
        "\n",
        "  init();\n",
        "  animate();\n",
        "\n",
        "  function init() {\n",
        "\n",
        "    container = document.getElementById( 'container' );\n",
        "\n",
        "    //\n",
        "\n",
        "    camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 4000 );\n",
        "    camera.position.z = 2750;\n",
        "\n",
        "    scene = new THREE.Scene();\n",
        "\n",
        "    var segments = 10000;\n",
        "\n",
        "    var geometry = new THREE.BufferGeometry();\n",
        "    var material = new THREE.LineBasicMaterial( { vertexColors: true } );\n",
        "\n",
        "    var positions = [];\n",
        "    var colors = [];\n",
        "\n",
        "    var r = 800;\n",
        "\n",
        "    for ( var i = 0; i < segments; i ++ ) {\n",
        "\n",
        "      var x = Math.random() * r - r / 2;\n",
        "      var y = Math.random() * r - r / 2;\n",
        "      var z = Math.random() * r - r / 2;\n",
        "\n",
        "      // positions\n",
        "\n",
        "      positions.push( x, y, z );\n",
        "\n",
        "      // colors\n",
        "\n",
        "      colors.push( ( x / r ) + 0.5 );\n",
        "      colors.push( ( y / r ) + 0.5 );\n",
        "      colors.push( ( z / r ) + 0.5 );\n",
        "\n",
        "    }\n",
        "\n",
        "    geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );\n",
        "    geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );\n",
        "\n",
        "    geometry.computeBoundingSphere();\n",
        "\n",
        "    line = new THREE.Line( geometry, material );\n",
        "    scene.add( line );\n",
        "\n",
        "    //\n",
        "\n",
        "    renderer = new THREE.WebGLRenderer();\n",
        "    renderer.setPixelRatio( window.devicePixelRatio );\n",
        "    renderer.setSize( window.innerWidth, window.innerHeight );\n",
        "    renderer.outputEncoding = THREE.sRGBEncoding;\n",
        "\n",
        "    container.appendChild( renderer.domElement );\n",
        "\n",
        "    //\n",
        "\n",
        "    //stats = new Stats();\n",
        "    //container.appendChild( stats.dom );\n",
        "\n",
        "    //\n",
        "\n",
        "    window.addEventListener( 'resize', onWindowResize, false );\n",
        "\n",
        "  }\n",
        "\n",
        "  function onWindowResize() {\n",
        "\n",
        "    camera.aspect = window.innerWidth / window.innerHeight;\n",
        "    camera.updateProjectionMatrix();\n",
        "\n",
        "    renderer.setSize( window.innerWidth, 800 );\n",
        "\n",
        "  }\n",
        "\n",
        "  //\n",
        "\n",
        "  async function animate() {\n",
        "\n",
        "    requestAnimationFrame( animate );\n",
        "\n",
        "    const data = await fetch(`https://localhost:${serverPort}/`);\n",
        "    const binaryData = await data.arrayBuffer();\n",
        "    console.log(binaryData);\n",
        "\n",
        "    // if(xxx.localeCompare('Script result!') == 0) \n",
        "    // ;\n",
        "    render();\n",
        "    \n",
        "    //stats.update();\n",
        "\n",
        "  }\n",
        "\n",
        "  function render() {\n",
        "    var time = Date.now() * 0.001;\n",
        "\n",
        "    line.rotation.x = time * 0.25;\n",
        "    line.rotation.y = time * 0.5;\n",
        "\n",
        "    renderer.render( scene, camera );\n",
        "  }\n",
        "</script>\n",
        "'''))\n"
      ],
      "execution_count": 0,
      "outputs": []
    },
    {
      "cell_type": "code",
      "metadata": {
        "id": "m4PTP6JC9Ypt",
        "colab_type": "code",
        "outputId": "a266f357-4806-4a73-9886-25aa5bde90c9",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 17
        }
      },
      "source": [
        "%%html\n",
        "<script type=\"module\">\n",
        "import * as THREE from 'https://unpkg.com/three?module';\n",
        "</script>"
      ],
      "execution_count": 0,
      "outputs": [
        {
          "output_type": "display_data",
          "data": {
            "text/html": [
              "<script type=\"module\">\n",
              "import * as THREE from 'https://unpkg.com/three?module';\n",
              "</script>"
            ],
            "text/plain": [
              "<IPython.core.display.HTML object>"
            ]
          },
          "metadata": {
            "tags": []
          }
        }
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "id": "y-D3CG9P-Nl1",
        "colab_type": "code",
        "outputId": "b3a2abd6-5798-40fe-8a36-9b359b898875",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 17
        }
      },
      "source": [
        "# cannot use module yet\n",
        "%%html\n",
        "<script type=\"module\">\n",
        "import Stats from 'https://unpkg.com/stats?module';\n",
        "console.log(Stats)\n",
        "</script>"
      ],
      "execution_count": 0,
      "outputs": [
        {
          "output_type": "display_data",
          "data": {
            "text/html": [
              "<script type=\"module\">\n",
              "import Stats from 'https://unpkg.com/stats?module';\n",
              "console.log(Stats)\n",
              "</script>"
            ],
            "text/plain": [
              "<IPython.core.display.HTML object>"
            ]
          },
          "metadata": {
            "tags": []
          }
        }
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "id": "pEBi7Ro8Cmbq",
        "colab_type": "code",
        "colab": {}
      },
      "source": [
        ""
      ],
      "execution_count": 0,
      "outputs": []
    }
  ]
}