Solidx.js NPM | npm.io

Core Features

Declarative: No need to learn a new language, simply use HTML and CSS.
Performance: Powered by babylon.js and lit.
Lightweight: Code splitting, tree shaking, and lazy loading supported.
Extensible: Create your own components for your scenes.

Getting Started

Install

With npm:

npm install solidx.js --save

Or with CDN:

<link rel="stylesheet" href="https://registry.npmmirror.com/solidx.js/latest/files/assets/preset.css" />
<script src="https://registry.npmmirror.com/solidx.js/latest/files/dist/index.js"></script>

NOTE: If you are outside of China, please use BELOW CDN:

Usage

Render a simple box with inline attributes:

<head>
  <link rel="stylesheet" href="https://registry.npmmirror.com/solidx.js/latest/files/assets/preset.css" />
</head>

<body>
  <xr-scene>
    <xr-camera radius="6" beta="75"></xr-camera>
    <xr-mesh geometry="primitive://box" material="primitive://pbr?albedo-color=#ffc069"></xr-mesh>
  </xr-scene>

  <script src="https://registry.npmmirror.com/solidx.js/latest/files/dist/index.js"></script>
</body>

also you can use CSS to style your mesh:

<head>
  <link rel="stylesheet" href="https://registry.npmmirror.com/solidx.js/latest/files/assets/preset.css" />

  <style>
    .camera {
      ---radius: 6;
      ---beta: 75;
    }
    .box {
      ---geometry: 'primitive://box';
      ---material: 'primitive://pbr?albedo-color=#ffc069';
    }
  </style>
</head>

<body>
  <xr-scene>
    <xr-camera class="camera"></xr-camera>
    <xr-mesh class="box"></xr-mesh>
  </xr-scene>

  <script src="https://registry.npmmirror.com/solidx.js/latest/files/dist/index.js"></script>
</body>

NOTE:

Inline attributes have higher priority than CSS variables.
To distinguish from normal CSS variables, we use --- instead of --.

via react

import React from 'react';
import ReactDOM from 'react-dom';

import 'solidx.js/assets/preset.css';
import 'solidx.js';

ReactDOM.render(
  <xr-scene>
    <xr-camera radius='6' beta='75'></xr-camera>
    <xr-mesh geometry='primitive://box' material='primitive://pbr?albedo-color=#ffc069'></xr-mesh>
  </xr-scene>,
  document.getElementById('root')
);

via vue

<template>
  <xr-scene>
    <xr-camera radius="6" beta="75"></xr-camera>
    <xr-mesh geometry="primitive://box" material="primitive://pbr?albedo-color=#ffc069"></xr-mesh>
  </xr-scene>
</template>

<script>
import 'solidx.js/assets/preset.css';
import 'solidx.js';

export default {
  name: 'App',
};
</script>