Three.js example.

Former-commit-id: 01a8b1d8382c0de38849004008107728909f694f
This commit is contained in:
sasha240100 2016-07-10 16:03:22 +03:00
parent fc7f3bdf6b
commit 6445e6cf23
6 changed files with 182 additions and 0 deletions

View File

@ -0,0 +1,35 @@
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="WhitestormJS is a 3D Javascript engine based on Three.js (http://threejs.org/). It uses physics and effects libraries to define WhitestormJS API that contains useful scripts for terrain generation, skybox, animation, physics simulation and post-effects. WhitestormJS simplifies Three.js object crafting algorithm to javascript methods with parameters." />
<meta name="keywords" content="three.js,cannon.js,webgl,wagner,WHS.API,3d,web,javascript" />
<meta name="author" content="Alexander Buzin">
<meta property="og:title" content="WhitestormJS 3D Engine" />
<meta property="og:site_name" content="WhitestormJS 3D Engine" />
<meta property="og:type" content="website" />
<meta property="og:locale" content="en_US">
<meta property="og:url" content="http://www.jsdelivr.com/projects/whitestormjs" />
<meta property="og:description" content="WhitestormJS is a 3D Javascript engine based on Three.js (http://threejs.org/). It uses physics and effects libraries to define WhitestormJS API that contains useful scripts for terrain generation, skybox, animation, physics simulation and post-effects. WhitestormJS simplifies Three.js object crafting algorithm to javascript methods with parameters." />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@whitestormjs" />
<meta name="twitter:title" content="whitestormjs" />
<meta name="twitter:description" content="WhitestormJS 3D Engine" />
<link rel="shortcut icon" type="image/x-icon" href="http://whitestormjs.xyz/favicon.ico" />
<link rel="apple-touch-icon-precomposed" href="http://whitestormjs.xyz/favicon.ico" sizes="57x57" />
<meta name="msapplication-square150x150logo" content="../development/art/logo/Icon-72@2.png" />
</head>
<body>
<script src="../../../build/whitestorm.js"></script>
<script src="script.js" defer></script>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.9 KiB

View File

@ -0,0 +1,73 @@
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
'use strict';
var GAME = new WHS.World({
stats: 'fps', // fps, ms, mb
autoresize: true,
gravity: {
x: 0,
y: -100,
z: 0
},
camera: {
far: 10000,
y: 10,
z: 30
},
init: {
scene: false
}
});
var scene = new THREE.Scene();
var obj1 = new THREE.Mesh(new THREE.SphereGeometry(3, 32, 32), new THREE.MeshBasicMaterial({ color: 0xffffff }));
obj1.position.set(6, 6, 0);
scene.add(obj1);
var obj2 = new THREE.Mesh(new THREE.SphereGeometry(3, 32, 32), new THREE.MeshBasicMaterial({ color: 0xffffff }));
obj2.position.set(12, 6, 0);
scene.add(obj2);
GAME.setScene(scene, true);
GAME._initCamera();
GAME._initRenderer();
GAME._initHelpers();
var sphere = new WHS.Shape(new THREE.Mesh(new THREE.SphereGeometry(3, 32, 32), new THREE.MeshBasicMaterial({ color: 0xffffff })));
sphere.addTo(GAME);
sphere.position.y = 3;
new WHS.Plane({
geometry: {
width: 250,
height: 250
},
mass: 0,
material: {
color: 0xff0000,
kind: 'basic'
},
pos: {
x: 0,
y: 0,
z: 0
},
rot: {
x: -Math.PI / 2
}
}).addTo(GAME);
GAME.start();
},{}]},{},[1]);

View File

@ -0,0 +1,4 @@
{% extends '../../layout.html' %}
{% block script %}
<script src="script.js" defer></script>
{% endblock %}

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.9 KiB

View File

@ -0,0 +1,70 @@
const GAME = new WHS.World({
stats: 'fps', // fps, ms, mb
autoresize: true,
gravity: {
x: 0,
y: -100,
z: 0
},
camera: {
far: 10000,
y: 10,
z: 30
},
init: {
scene: false
}
});
const scene = new THREE.Scene();
const obj1 = new THREE.Mesh(new THREE.SphereGeometry(3, 32, 32), new THREE.MeshBasicMaterial({color: 0xffffff}));
obj1.position.set(6, 6, 0);
scene.add(obj1);
const obj2 = new THREE.Mesh(new THREE.SphereGeometry(3, 32, 32), new THREE.MeshBasicMaterial({color: 0xffffff}));
obj2.position.set(12, 6, 0);
scene.add(obj2);
GAME.setScene(scene, true);
GAME._initCamera();
GAME._initRenderer();
GAME._initHelpers();
const sphere = new WHS.Shape(
new THREE.Mesh(new THREE.SphereGeometry(3, 32, 32), new THREE.MeshBasicMaterial({color: 0xffffff}))
);
sphere.addTo(GAME);
sphere.position.y = 3;
new WHS.Plane({
geometry: {
width: 250,
height: 250
},
mass: 0,
material: {
color: 0xff0000,
kind: 'basic'
},
pos: {
x: 0,
y: 0,
z: 0
},
rot: {
x: -Math.PI / 2
}
}).addTo(GAME);
GAME.start();