> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/appendix/three.js/ex/startup.md). # startup [three.js](/web/appendix/three.js.md) ⟩ [examples](/web/appendix/three.js/ex.md) ⟩ startup {% tabs %} {% tab title="πŸ’ˆη―„δΎ‹" %} {% embed url="" %} {% endtab %} {% tab title="JS" %} * [replit](https://replit.com/@pegasusroe/threejs-startup-example), require: [Director](/web/appendix/three.js/director.md), [Node+ext](/web/browser/dom/type/node/+ext.md) ```javascript import * as T from './js/threejs.js'; import {$} from "./js/Node+ext.js"; const {log} = console; // HTML elements const html = $('html'); const body = $('body'); const canvas = $('#canvas3D'); const info = $('#info'); // geometries const box = T.Geometry.Box( 1, 1, 1 ); // three const threejs = new T.ThreejsManager({ // canvas element canvas: $('#canvas3D'), // camera settings camera: { far: 5, }, // models models: { // light light: T.Light.Directional(0xFFFFFF, 1), // cubes cubes: [0x8844aa, 0x44aa88, 0xaa8844].map(color => T.Mesh(box, T.Material.Mesh.Phong({color})) ), // line line: T.Line( T.Geometry.Buffer.fromPoints([ [-3, 0, 0], [0, 3, 0], [3, 0, 0] ].map(c => T.Vector(...c))), T.Material.Line.Basic({color: 0x0000ff}) ), }, // further setup setup: function() { // this.camera.position.set( 0, 0, 5 ); // this.camera.lookAt( 0, 0, 0 ); this.camera.position.z = 2; // light this.models.light.position.set(-1, 2, 4); // models [-2, 0, 2].forEach((x,i) => { const model = this.models.cubes[i]; model.position.x = x; }); }, // update function for animate loop update: function(t) { this.models.cubes.forEach((cube,i) => { const speed = 1 + .1 * i; cube.rotation.x = t * speed; cube.rotation.y = t * speed; }) } }); threejs.animate(); // event handlers window.onresize = () => { info.innerHTML = `

window

canvas

`; }; window.onresize(); // log // ----------------------------------------------- ;[ `πŸ˜ƒ Have a nice day!`, `width : ${threejs.width}`, `height: ${threejs.height}`, `aspect: ${threejs.aspect.toFixed(2)}`, `${threejs.renderer.domElement === canvas}`, // true ].forEach(x => log(x)); ``` {% endtab %} {% tab title="HTML" %} ```html three.js playground
test
``` {% endtab %} {% tab title="CSS" %} ```css html, body { margin: 0; /* body {margin: 5px} by default */ height: 100%; /* fill the window */ } html { background: tomato; } body { background: #333; } #canvas3D { /* 100% the size of its container (body) */ width: 100%; height: 100%; /* - canvas {display: inline} by default. - inline elements can end up adding "whitespace" to what is displayed. - setting `display: block` removes that issue. */ display: block; } #info { position: fixed; top: 20px; left: 20px; color: orange; opacity: 0.8; } p { color: dodgerblue; } span { color: gray; } ``` {% endtab %} {% endtabs %}