Basic

There are two root elements in <three-canvas>: three-engine and three-canvas. The former is a bit more complex than the latter but fully customizable. The latter is easy but less customizable.

Fully customizable manner is as follows:

<three-engine width="200" height="200">
  <three-renderer antialias="true" clear-color="#000000"></three-renderer>
  <three-scene>
    <three-camera position="0,0,8" look-at="0,0,0"></three-camera>
    <three-light position="0.577,0.577,0.577" color="#cccccc"></three-light>
    <three-light type="ambient" color="#333333"></three-light>
    <three-mesh>
      <three-material color="#ffffff" map="../images/earth.jpg"></three-material>
      <three-sphere-geometry radius="1"></three-sphere-geometry>
    </three-mesh>
  </three-scene>
</three-engine>

If you know well about three.js, this code must be very straight-forward for you because tag names and their structure correspond to three.js objects. If you don't know about three.js very well, please don't worry. There are some syntax sugars to make this more simple.

• three-canvas element is a substitution of three-engine element, which adds a three-render element and a three-scene element implicitly.
• three-sphere element is a substitution of three-mesh element, which adds a three-material element and a three-sphere-geometry element implicitly.
• If a defaultLight attribute in a three-engine element or a three-canvas element is set to "true", the element will have a default light without any three-light element.

By utilizing these all sugars, tags to show the earth become as follows:

<three-canvas width="200" height="200" antialias="true" clear-color="#000000" default-light="true">
  <three-camera position="0,0,8" look-at="0,0,0"></three-camera>
  <three-sphere radius="1" color="#ffffff" map="../images/earth.jpg"></three-sphere>
</three-canvas>

It's simple enough, isn't it?