Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Three.js update #13

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Three.js update #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 19 additions & 68 deletions README.markdown
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,85 +1,36 @@
Thingiview.js
=============

A javascript (using Canvas and WebGL if available) 3D model viewer. Uses the [Three.js](http://github.com/mrdoob/three.js) 3D Engine. Check out the [Examples](http://replimat.com/thingiview/examples/).
A javascript (using Canvas and WebGL if available) 3D model viewer. Uses the [Three.js](http://github.com/mrdoob/three.js) 3D Engine.

# Features

* supports binary and ascii STL and OBJ files without requiring any preprocessing, all the parsing is done on the client in javascript
* everything is done client side in javascript, requires no plugins for most browsers
* should work in all browsers, including iPhone/iPad (might require [Google Chrome Frame](http://code.google.com/chrome/chromeframe) for IE)
* uses HTML canvas or automatically detects and enables webgl if browser supports it
* configurable colors
* does all the standard Three.js things
* is made of awesome

# Example

<pre><code>
&lt;script src="/javascripts/Three.js"&gt;&lt;/script&gt;
&lt;script src="/javascripts/plane.js"&gt;&lt;/script&gt;
&lt;script src="/javascripts/thingiview.js"&gt;&lt;/script&gt;
&lt;script src="js/three.min.js">&lt;/script>
&lt;script src="js/Thingiview.js">&lt;/script>
&lt;script src="js/NormalControls.js">&lt;/script>

&lt;script>
window.onload = function() {
thingiurlbase = "/javascripts";
thingiview = new Thingiview("viewer");
thingiview.setObjectColor('#C0D8F0');
thingiview.initScene();
thingiview.loadSTL("/objects/cube.stl");
var filename = "/some/3d/model.js"; // URL of a Three.js model
var thingiview = new Thingiview();

loader = new THREE.JSONLoader(false);
loadCallback = function ( geometry, materials ) {
thingiview.addModel( geometry );
};
loader.load(filename, loadCallback);

var animate = function() {
requestAnimationFrame( animate );
thingiview.render();
}
animate();
&lt;/script&gt;

&lt;div id="viewer" style="width:300px;height:300px"&gt;&lt;/div&gt;
</code></pre>

# Usage

It's important that everything is done within window.onload.

## thingiurlbase = "/javascripts";

Must be set to the path where the javascript files are located so that related scripts can be loaded dynamically.

## thingiview = new Thingiview("id of viewer's container div");

Pass the id of the div to place the viewer into. You can set the width and height on the css for that div.

## thingiview.initScene();

Loads the scene into the container div.

## thingiview.loadSTL("/path/to/model.stl"); or thingiview.loadOBJ("/path/to/model.obj");

Make sure you pass the full url path to the model file you want to load. This will make an ajax call to the server to fetch it.

## thingiview.setShowPlane(true);

`true or false`. Show or hide the 100x100 grid plane under the object.

## thingiview.setBackgroundColor('#ffffff');

Sets the background color of the viewer's container.

## thingiview.setObjectMaterial('solid');

`solid or wireframe`. Changes the object's material.

## thingiview.setObjectColor('#C0D8F0');

Yep, it sets the object's color.

## thingiview.setRotation(true);

`true or false`. This causes the object to slowly rotate around the z axis.

## thingiview.setCameraView('top');

Possible values include: `top, side, bottom, diagonal`. Resets the camera view to the desired angle.

## thingiview.setCameraZoom(5);

Pass a positive number to zoom the camera in or a negative number to zoom out.

## thingiview.displayAlert("This is a message");

Displays the text passed in a window inside the viewer with an Ok button to then hide it.
models can be converted to the Three.js JSON format via [mersh](https://github.com/tbuser/mersh) or any of the other exporters included in the three.js project
81 changes: 81 additions & 0 deletions example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>thingiview</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
background:#ffffff;
padding:0;
margin:0;
font-weight: bold;
overflow:hidden;
}

#info {
position: absolute;
top: 0px; width: 100%;
color: #ffffff;
padding: 5px;
font-family:Monospace;
font-size:13px;
text-align:center;
z-index:1000;
}

a {
color: #ffffff;
}

#oldie a { color:#da0 }
</style>
</head>

<body>

<script src="js/three.min.js"></script>
<script src="js/Thingiview.js"></script>
<script src="js/NormalControls.js"></script>
<script src="js/Detector.js"></script>

<script>

if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

// parse opts
var argv = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
argv[key] = value;
});
// set this to a debug model
if ( argv['file']==undefined )
argv['file'] = '/example.js';

var thingiview = new Thingiview();
if ( parseInt(argv['width']) && parseInt(argv['height']) )
thingiview.resize( parseInt(argv['width']), parseInt(argv['height']) );

var self = thingiview;
loader = new THREE.JSONLoader(true);
loader.statusDomElement.style.left = "0px";
loader.statusDomElement.style.width = "auto";
document.body.appendChild( loader.statusDomElement );
loadCallback = function ( geometry, materials ) {
self.addModel( geometry );
document.body.removeChild( loader.statusDomElement );
};
loader.load( argv['file'], loadCallback );

var animate = function() {
requestAnimationFrame( animate );
thingiview.render();
}
animate();

</script>

</body>
</html>


47 changes: 47 additions & 0 deletions example.js
View file
Open in desktop

Large diffs are not rendered by default.

137 changes: 0 additions & 137 deletions examples/client_side_ajax.html
View file
Open in desktop

This file was deleted.

Loading