Skip to content
This repository was archived by the owner on Nov 18, 2024. It is now read-only.

Commit dc17a6b

Browse files
author
Alexander Kovelenov
committed
Import Verge3D 2.7.1 examples
1 parent e7b6b06 commit dc17a6b

File tree

1,340 files changed

+1324396
-2
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

1,340 files changed

+1324396
-2
lines changed

‎README.md‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,16 @@
1-
# verge3d-code-examples
2-
300+ WebGL examples demonstrating the features of the Verge3D framework
1+
# Verge3D Code Examples
2+
3+
On this page you can find 300+ ready-to-use WebGL examples ported to the Verge3D framework from Three.js. Among them:
4+
5+
* Procedural and keyframe-based animation.
6+
* Impressive shading techniques.
7+
* CPU and GPU-based physics simulation.
8+
* Procedural geometry.
9+
* Advanced materials.
10+
* Complex postprocessing effects.
11+
* OBJ, COLLADA, FBX, 3MF, AMF, STL and PLY loaders
12+
* Canvas2D and CSS3 examples.
13+
14+
These applications are based on three.js code examples and distributed under the MIT license. All copyrights belong to the respective owners.
15+
16+
Please also note that some assets (models, textures) from these examples are distributed on the non-commercial basis. Contact the corresponging authors to receive commercial usage rights.

‎blank.html‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
6+
<style>
7+
body {
8+
margin: 30px 20px;
9+
color: #555;
10+
font-family: sans-serif;
11+
font-size: 15px;
12+
line-height: 20px;
13+
tab-size: 4;
14+
overflow: auto;
15+
}
16+
h1 {
17+
color: #333;
18+
font-size: 25px;
19+
font-weight: normal;
20+
margin-top: 10px;
21+
}
22+
</style>
23+
24+
</head>
25+
<body>
26+
<h1>Welcome to Verge3D Code Examples</h1>
27+
<p>
28+
On this page you can find 300+ ready-to-use WebGL examples ported to the Verge3D framework from Three.js.
29+
Among them:
30+
<ul>
31+
<li>Procedural and keyframe-based animation.</li>
32+
<li>Impressive shading techniques.</li>
33+
<li>CPU and GPU-based physics simulation.</li>
34+
<li>Procedural geometry.</li>
35+
<li>Advanced materials.</li>
36+
<li>Complex postprocessing effects.</li>
37+
<li>OBJ, COLLADA, FBX, 3MF, AMF, STL and PLY loaders</li>
38+
<li>Canvas2D and CSS3 examples.</li>
39+
</ul>
40+
</p>
41+
42+
<img src="files/industrial-robot-gallery.jpg" style="width:100%" >
43+
44+
<p>
45+
These applications are based on <a href="https://threejs.org/examples/" target="_blank">three.js code examples</a> and distributed under the MIT license. All copyrights belong to the respective owners.
46+
</p>
47+
48+
<p>
49+
Please also note that some assets (models, textures) from these examples are distributed on the non-commercial basis. Contact the corresponging authors to receive commercial usage rights.
50+
</p>
51+
52+
<h2>How to integrate these examples in your own Verge3D project</h2>
53+
<p>
54+
These examples are mostly intended for programmers and require basic knowledge of JavaScript and undestanding Verge3D application structure and API. Refer to the <a href="https://www.soft8soft.com/docs/" target="_blank">Verge3D user manual</a> for more info.
55+
</p>
56+
<p>
57+
Use <strong>View Source</strong> button to display an example's sources then locate and copy the code you need.
58+
</p>
59+
60+
</body>
61+
</html>

‎canvas_ascii_effect.html‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>Verge3D - ASCII Effect</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
7+
<style>
8+
body {
9+
font-family: Monospace;
10+
background-color: #f0f0f0;
11+
margin: 0px;
12+
overflow: hidden;
13+
}
14+
</style>
15+
</head>
16+
<body>
17+
18+
<script src="../build/v3d.js"></script>
19+
20+
<script src="js/controls/TrackballControls.js"></script>
21+
<script src="js/effects/AsciiEffect.js"></script>
22+
23+
<script src="js/renderers/Projector.js"></script>
24+
<script src="js/renderers/CanvasRenderer.js"></script>
25+
26+
<script src="js/libs/stats.min.js"></script>
27+
28+
<script>
29+
30+
var container, stats;
31+
32+
var camera, controls, scene, renderer;
33+
var effect;
34+
35+
var sphere, plane;
36+
37+
var start = Date.now();
38+
39+
init();
40+
animate();
41+
42+
function init() {
43+
44+
var width = window.innerWidth || 2;
45+
var height = window.innerHeight || 2;
46+
47+
container = document.createElement('div');
48+
document.body.appendChild(container);
49+
50+
var info = document.createElement('div');
51+
info.style.position = 'absolute';
52+
info.style.top = '10px';
53+
info.style.width = '100%';
54+
info.style.textAlign = 'center';
55+
info.innerHTML = 'Drag to change the view';
56+
container.appendChild(info);
57+
58+
camera = new v3d.PerspectiveCamera(70, width / height, 1, 1000);
59+
camera.position.y = 150;
60+
camera.position.z = 500;
61+
62+
controls = new v3d.TrackballControls(camera);
63+
64+
scene = new v3d.Scene();
65+
scene.background = new v3d.Color(0xf0f0f0);
66+
67+
var light = new v3d.PointLight(0xffffff);
68+
light.position.set(500, 500, 500);
69+
scene.add(light);
70+
71+
var light = new v3d.PointLight(0xffffff, 0.25);
72+
light.position.set(- 500, - 500, - 500);
73+
scene.add(light);
74+
75+
sphere = new v3d.Mesh(new v3d.SphereGeometry(200, 20, 10), new v3d.MeshLambertMaterial());
76+
scene.add(sphere);
77+
78+
// Plane
79+
80+
plane = new v3d.Mesh(new v3d.PlaneBufferGeometry(400, 400), new v3d.MeshBasicMaterial({ color: 0xe0e0e0 }));
81+
plane.position.y = - 200;
82+
plane.rotation.x = - Math.PI / 2;
83+
scene.add(plane);
84+
85+
renderer = new v3d.CanvasRenderer();
86+
renderer.setSize(width, height);
87+
// container.appendChild(renderer.domElement);
88+
89+
effect = new v3d.AsciiEffect(renderer);
90+
effect.setSize(width, height);
91+
container.appendChild(effect.domElement);
92+
93+
stats = new Stats();
94+
container.appendChild(stats.dom);
95+
96+
//
97+
98+
window.addEventListener('resize', onWindowResize, false);
99+
100+
}
101+
102+
function onWindowResize() {
103+
104+
camera.aspect = window.innerWidth / window.innerHeight;
105+
camera.updateProjectionMatrix();
106+
107+
renderer.setSize(window.innerWidth, window.innerHeight);
108+
effect.setSize(window.innerWidth, window.innerHeight);
109+
110+
}
111+
112+
//
113+
114+
function animate() {
115+
116+
requestAnimationFrame(animate);
117+
118+
stats.begin();
119+
render();
120+
stats.end();
121+
122+
}
123+
124+
function render() {
125+
126+
var timer = Date.now() - start;
127+
128+
sphere.position.y = Math.abs(Math.sin(timer * 0.002)) * 150;
129+
sphere.rotation.x = timer * 0.0003;
130+
sphere.rotation.z = timer * 0.0002;
131+
132+
controls.update();
133+
134+
effect.render(scene, camera);
135+
136+
}
137+
138+
</script>
139+
</body>
140+
</html>

‎canvas_camera_orthographic.html‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>Verge3D canvas - camera - orthographic</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
7+
<style>
8+
body {
9+
font-family: Monospace;
10+
background-color: #f0f0f0;
11+
margin: 0px;
12+
overflow: hidden;
13+
}
14+
</style>
15+
</head>
16+
<body>
17+
18+
<script src="../build/v3d.js"></script>
19+
20+
<script src="js/renderers/Projector.js"></script>
21+
<script src="js/renderers/CanvasRenderer.js"></script>
22+
23+
<script src="js/libs/stats.min.js"></script>
24+
25+
<script>
26+
27+
var container, stats;
28+
var camera, scene, renderer;
29+
var frustumSize = 1000;
30+
31+
init();
32+
animate();
33+
34+
function init() {
35+
36+
container = document.createElement('div');
37+
document.body.appendChild(container);
38+
39+
var info = document.createElement('div');
40+
info.style.position = 'absolute';
41+
info.style.top = '10px';
42+
info.style.width = '100%';
43+
info.style.textAlign = 'center';
44+
info.innerHTML = '<a href="https://www.soft8soft.com/verge3d" target="_blank" rel="noopener">Verge3D</a> - orthographic view';
45+
container.appendChild(info);
46+
47+
var aspect = window.innerWidth / window.innerHeight;
48+
camera = new v3d.OrthographicCamera(frustumSize * aspect / - 2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / - 2, 1, 2000);
49+
camera.position.y = 400;
50+
51+
scene = new v3d.Scene();
52+
scene.background = new v3d.Color(0xf0f0f0);
53+
54+
// Grid
55+
56+
var gridHelper = new v3d.GridHelper(1000, 20);
57+
scene.add(gridHelper);
58+
59+
// Cubes
60+
61+
var geometry = new v3d.BoxGeometry(50, 50, 50);
62+
var material = new v3d.MeshLambertMaterial({ color: 0xffffff, overdraw: 0.5 });
63+
64+
for (var i = 0; i < 100; i++) {
65+
66+
var cube = new v3d.Mesh(geometry, material);
67+
68+
cube.scale.y = Math.floor(Math.random() * 2 + 1);
69+
70+
cube.position.x = Math.floor((Math.random() * 1000 - 500) / 50) * 50 + 25;
71+
cube.position.y = (cube.scale.y * 50) / 2;
72+
cube.position.z = Math.floor((Math.random() * 1000 - 500) / 50) * 50 + 25;
73+
74+
scene.add(cube);
75+
76+
}
77+
78+
// Lights
79+
80+
var ambientLight = new v3d.AmbientLight(Math.random() * 0x10);
81+
scene.add(ambientLight);
82+
83+
var directionalLight = new v3d.DirectionalLight(Math.random() * 0xffffff);
84+
directionalLight.position.x = Math.random() - 0.5;
85+
directionalLight.position.y = Math.random() - 0.5;
86+
directionalLight.position.z = Math.random() - 0.5;
87+
directionalLight.position.normalize();
88+
scene.add(directionalLight);
89+
90+
var directionalLight = new v3d.DirectionalLight(Math.random() * 0xffffff);
91+
directionalLight.position.x = Math.random() - 0.5;
92+
directionalLight.position.y = Math.random() - 0.5;
93+
directionalLight.position.z = Math.random() - 0.5;
94+
directionalLight.position.normalize();
95+
scene.add(directionalLight);
96+
97+
renderer = new v3d.CanvasRenderer();
98+
renderer.setPixelRatio(window.devicePixelRatio);
99+
renderer.setSize(window.innerWidth, window.innerHeight);
100+
container.appendChild(renderer.domElement);
101+
102+
stats = new Stats();
103+
container.appendChild(stats.dom);
104+
105+
//
106+
107+
window.addEventListener('resize', onWindowResize, false);
108+
109+
}
110+
111+
function onWindowResize() {
112+
113+
var aspect = window.innerWidth / window.innerHeight;
114+
115+
camera.left = - frustumSize * aspect / 2;
116+
camera.right = frustumSize * aspect / 2;
117+
camera.top = frustumSize / 2;
118+
camera.bottom = - frustumSize / 2;
119+
120+
camera.updateProjectionMatrix();
121+
122+
renderer.setSize(window.innerWidth, window.innerHeight);
123+
124+
}
125+
126+
//
127+
128+
function animate() {
129+
130+
requestAnimationFrame(animate);
131+
132+
stats.begin();
133+
render();
134+
stats.end();
135+
136+
}
137+
138+
function render() {
139+
140+
var timer = Date.now() * 0.0001;
141+
142+
camera.position.x = Math.cos(timer) * 800;
143+
camera.position.z = Math.sin(timer) * 800;
144+
camera.lookAt(scene.position);
145+
146+
renderer.render(scene, camera);
147+
148+
}
149+
150+
</script>
151+
152+
</body>
153+
</html>

0 commit comments

Comments
 (0)