MelonLand Wiki

Trace: • three.js

This is an old revision of the document!

Table of Contents

Three.js

Check out MelonEngine, a Mini Three.js Game Engine!

Three.js is a JavaScript library for creating 3D Worlds on a webpage. Fundamental JavaScript knowledge is required for working with Three.js. If you aren't comfortable with JavaScript, no worries! Skip to the next section!

Known Worlds

Example files

from Three.js's Creating a Scene page

index.html
<html>
  <head>
    <meta charset="utf-8">
    <title>My first three.js app</title>
    <style>
      body { margin: 0; }
    </style>
  </head>
  <body>
    <script type="module" src="/main.js"></script>
  </body>
</html>
main.js
import * as THREE from 'three';
 
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
 
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animate );
document.body.appendChild( renderer.domElement );
 
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
 
camera.position.z = 5;
 
function animate() {
 
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
 
  renderer.render( scene, camera );
 
}

A-Frame

A-Frame is a web framework based on Three.js for making 3D and VR scenes. JavaScript knowledge is not required, as models are added to a scene directly in the HTML, similar to X3D.

Known Worlds

  • TODO

Example file

from A-Frame's Getting Started page

index.html
<html>
  <head>
    <script src="https://aframe.io/releases/1.7.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>