A New Way of 3D Programming, using only HTML and CSS.
- 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.
With npm:
npm install solidx.js --saveOr 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:
- https://cdn.jsdelivr.net/npm/solidx.js/assets/preset.css
- https://cdn.jsdelivr.net/npm/solidx.js/dist/index.js
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--.
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')
);<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>