3d-svg-engine

3D SVG engine

Lightweight 3d engine that uses SVG as a rendering environment.

Used technologies:

• Webpack for build project
• Typescript as main language engine

Getting started

You can link to a 3d SVG engine files hosted online. You can use these links:

<script src="https://cdn.jsdelivr.net/gh/manInit/3d-svg-engine/dist/3dengine.dist.js"></script>

and

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/manInit/3d-svg-engine/dist/3dengine.css">

A sample HTML page might look like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Starter template</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/manInit/3d-svg-engine/dist/3dengine.css">
</head>
<body>
  <div id="world"></div>
  <script src="https://cdn.jsdelivr.net/gh/manInit/3d-svg-engine/dist/3dengine.dist.js"></script>
  <script>
    add(cube(10))
  </script>
</body>
</html>

Root elem for render is element with id = "world". This element should be in document

How to control camera

For pointer lock you should click on root tag.

You can rotate camera with mouse movement. And next keys to control camera:

keys

Examples

Here some examples usage this library

• Simple model solar system: Example
• Voxel draw: Example

Documentation

Basic figures

cube(size, x, y, z, color)

Create object of cube

Parameters:

pyramid(size, x, y, z, color)

Create object of pyramid

Parameters:

parallelepiped(sizea, sizeb, sizec, x, y, z, color)

Create object of parallelepiped

Parameters:

sphere(r, x, y, z, color)

Create object of sphere

Parameters:

Basic figures methods

All figures have methods for moving and rotating

.translate(x, y, z)

Мove the figure. Arguments define how much the figure moves in each direction.

Parameters:

.rotate(ax, ay, az)

Rotate figure around the center coordinates (Angles in degrees).

Parameters:

Player object

You have access to the global player object which contains information about the camera position and direction of view. You can set these properties too. Like this:

    player.position = { x: 100, y: 150, z: 100 }

Properties

Basic functions

add(...objects)

Add objects on scene

parameters:

update(callbackFunction)

Use custom function to update state scene. Like move figures or rotate and etc. This function will be called every frame

Parameters:

setBackground(urlImage)

Set background image to scene. This image will be translated left/right with rotate camera.

Parameters:

saveScreen()

Capture screenshot and download as SVG file

Parameters:

Without params