pissang/index.html

## index.html
<html>
<body>
    <canvas id="main" style="width:400px;height:400px;"></canvas>
    <script src="./dist/bundle.js"></script>
</body>
</html>

## main.js
import Renderer from 'claygl/src/Renderer';
import Timeline from 'claygl/src/animation/Timeline';
import Scene from 'claygl/src/Scene';
import Shader from 'claygl/src/Shader';
import Material from 'claygl/src/Material';
import PerspectiveCamera from 'claygl/src/camera/Perspective';
import Geometry from 'claygl/src/Geometry';
import Mesh from 'claygl/src/Mesh';

const vertexShader = `
attribute vec3 position: POSITION;
void main() {
    gl_Position = vec4(position, 1.0);
}
`;

const fragmentShader = `
void main() {
    gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
}
`;

const TRIANGLE_POSITIONS = [
    [-0.5, -0.5, 0],
    [0.5, -0.5, 0],
    [0, 0.5, 0]
];

const renderer = new Renderer({
    canvas: document.getElementById('main')
});
renderer.resize(400, 400);
const scene = new Scene();
const dummyCamera = new PerspectiveCamera();
const triangleGeo = new Geometry();
const timeline = new Timeline();

triangleGeo.attributes.position.fromArray(TRIANGLE_POSITIONS);

const mesh = new Mesh({
    geometry: triangleGeo,
    material: new Material({
        shader: new Shader(vertexShader, fragmentShader)
    })
});
scene.add(mesh);

// Start the render loop
timeline.on('frame', function () {
    renderer.render(scene, dummyCamera);
});

timeline.start();

## webpack.config.js
var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: ['./src/main.js'],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    plugins: [
        new webpack.optimize.ModuleConcatenationPlugin()
    ]
}
	<html>
	<body>
	<canvas id="main" style="width:400px;height:400px;"></canvas>
	<script src="./dist/bundle.js"></script>
	</body>
	</html>
	import Renderer from 'claygl/src/Renderer';
	import Timeline from 'claygl/src/animation/Timeline';
	import Scene from 'claygl/src/Scene';
	import Shader from 'claygl/src/Shader';
	import Material from 'claygl/src/Material';
	import PerspectiveCamera from 'claygl/src/camera/Perspective';
	import Geometry from 'claygl/src/Geometry';
	import Mesh from 'claygl/src/Mesh';

	const vertexShader = `
	attribute vec3 position: POSITION;
	void main() {
	gl_Position = vec4(position, 1.0);
	}
	`;

	const fragmentShader = `
	void main() {
	gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
	}
	`;

	const TRIANGLE_POSITIONS = [
	[-0.5, -0.5, 0],
	[0.5, -0.5, 0],
	[0, 0.5, 0]
	];

	const renderer = new Renderer({
	canvas: document.getElementById('main')
	});
	renderer.resize(400, 400);
	const scene = new Scene();
	const dummyCamera = new PerspectiveCamera();
	const triangleGeo = new Geometry();
	const timeline = new Timeline();

	triangleGeo.attributes.position.fromArray(TRIANGLE_POSITIONS);

	const mesh = new Mesh({
	geometry: triangleGeo,
	material: new Material({
	shader: new Shader(vertexShader, fragmentShader)
	})
	});
	scene.add(mesh);

	// Start the render loop
	timeline.on('frame', function () {
	renderer.render(scene, dummyCamera);
	});

	timeline.start();
	var path = require('path');
	var webpack = require('webpack');

	module.exports = {
	entry: ['./src/main.js'],
	output: {
	path: path.resolve(__dirname, 'dist'),
	filename: 'bundle.js'
	},
	plugins: [
	new webpack.optimize.ModuleConcatenationPlugin()
	]
	}