I have this project about development of an augmented reality application to train firefighters with three js. I managed to create the fire scene, now the problem is i have to add a dynamic aspect to the programmed solution so as to represent the propagation of the fire as a function of the elapsed time.
Here is below my scilab program , the propagation have to follow this model. now i've been told that i have to search how to manipulate vertices of a geometry and manipulate them with the VECTOR3 on three js but i didnt know how to solve it. any help is appreciated
scilab program
and this is the code for the fire, i ran it on visual basic Fire
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>fire fire</title>
<style>
body{margin: 0; background: #333;}
canvas{display: block;}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.js"></script>
<script src="../dist/three-particle-fire.js"></script>
<script>
//
// prepare to use
//
particleFire.install( { THREE: THREE } );
var width = window.innerWidth,
height = window.innerHeight,
clock = new THREE.Clock(),
scene,
camera,
renderer,
loader = new THREE.JSONLoader(),
textureLoader = new THREE.TextureLoader();
scene = new THREE.Scene();//
scene.fog = new THREE.Fog( 0x333333, 8, 20 );
camera = new THREE.PerspectiveCamera( 40, width / height, 0.1, 100 );
camera.position.z = 10;
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( width, height );
renderer.setClearColor( 0x333333 );
renderer.setPixelRatio( window.devicePixelRatio );
document.body.appendChild( renderer.domElement );
scene.add( new THREE.DirectionalLight( 0xffffff ) );
scene.add( new THREE.AmbientLight( 0x666666 ) );
var fireRadius = 2;// 43 45 parametre de la geometry fire
var fireHeight = 20;
var particleCount = 5200;
/
var geometry0 = new particleFire.Geometry( fireRadius, fireHeight, particleCount );
var material0 = new particleFire.Material( { color: 0xff2200 , wireframe: true } );
material0.setPerspective( camera.fov, height );
var particleFireMesh0 = new THREE.Points( geometry0, material0 );
particleFireMesh0.position.set( 0, -1, 0 );
scene.add( particleFireMesh0 );
var groundColor = textureLoader.load( 'grass_diffuse.png' );//85 95 creation ground et l ajouter a la scene
groundColor.repeat.set( 10, 10 );
groundColor.wrapS = groundColor.wrapT = THREE.RepeatWrapping;
var ground = new THREE.Mesh(
new THREE.PlaneBufferGeometry( 50, 50, 1, 1 ),
new THREE.MeshPhongMaterial( { map: groundColor } )
);
ground.position.y = -1;
ground.rotation.x = THREE.Math.degToRad( -90 );
scene.add( ground );
particleFire = [];
( function update () {
var delta = clock.getDelta();
var elapsed = clock.getElapsedTime();
particleFireMesh0.geometry.verticesNeedUpdate = true;
requestAnimationFrame( update );
particleFireMesh0.material.update( delta * 0.1 );
camera.position.set(6,5,10);
camera.lookAt( particleFireMesh0.position );
renderer.render( scene, camera );
} )();
window.addEventListener( 'resize', function () {
var width = window.innerWidth;
var height = window.innerHeight;
camera.aspect = width / height;
camera.updateProjectionMatrix();
renderer.setSize( width, height );
particleFireMesh0.material.setPerspective( camera.fov, height );
//particleFireMesh1.material.setPerspective( camera.fov, height );//
} );
console.log("vertices: ", geometry0.vertices);
console.log( geometry0.isBufferGeometry );
</script>
</body>
</html>
Related
Not usually a JS programmer. I setup a new WebStorm project, used npm to install three.js, everything looks fine, but when I try to import it the import statement is fine, but you can't use it, nothing is code completed.
Clearly I am missing something important. Three appears correctly in the package.json and lock json and I have all the files in the usual node_modules. Any use of the import THREE shows nothing. There are no errors, just warnings about the unused items and WebGLRenderer is undefined.
This is the default WebStorm setup with ECMAScript 6.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script type="module">
import * as THREE from 'three';
function main()
{
const canvas = document.querySelector('#c');
const renderer = new THREE.WebGLRenderer({canvas});
}
</script>
<canvas id="c"></canvas>
</body>
</html>
Restarting Webstorm made it work again. The app was running for a couple weeks, so perhaps there is memory leak or other issue.
Before you down vote, I know this question has been asked but I have a different twist to the question. Here is the original stack-overflow question, once read, I will post my twist at the end.
"I'm hoping that there's a relatively simple way to rotate a webpage a little bit, 30 degrees or so, while still leaving it fully functional and usable.
I completely control the page, and can modify it to make this easier if needed. I'd rather not re-write the whole thing in SVG, though, but perhaps javascript and CSS/HTML will work?
Is there a way using CSS, Javascript, or some other cross browser method that would allow me to accomplish this?"
Twist: I have the code that rotates only -30 degrees once (which is written in HTML). I will like to have a button where once you press it, it will rotate the webpage by -30 degrees more than what it is currently at. Appreciate it.
Code (that is static in turning the webpage):
<html>
<head>
<style type="text/css" media="screen">
body {
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.86602540, M12=0.50000000, M21=-0.50000000, M22=0.86602540,sizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.0, M12=0.50000000, M21=-0.50000000, M22=0.86602540,sizingMethod='auto expand');
-moz-transform: matrix(0.86602540, -0.50000000, 0.50000000, 0.86602540, 0, 0);
-webkit-transform: matrix(0.86602540, -0.50000000, 0.50000000, 0.86602540, 0, 0);
-o-transform: matrix(0.86602540, -0.50000000, 0.50000000, 0.86602540, 0, 0);
}
</style>
</head>
<body>
<p>Testing</p>
<p>Matrix calculator here</p>
</body>
</html>
You can use javascript for rotation on button click.
Hope below code will help you.
<html>
<body onLoad="rotate()">
<div class="rot">
<p>Testing</p>
<p>Matrix calculator here</p>
<button id="btn">Rotate</button>
</div>
<script>
var initial_rotation=0;
var btn=document.getElementById("btn");
var rotateDiv=document.querySelector(".rot");
btn.addEventListener("click",rotate);
function rotate(){
initial_rotation -=30;
rotateDiv.style.WebkitTransform="rotate(" + initial_rotation + "deg)";
rotateDiv.style.msTransform="rotate(" + initial_rotation + "deg)";
rotateDiv.style.transform="rotate(" + initial_rotation + "deg)";
}
</script>
</body>
</html>
From the script in the html page, I'm trying to control what happens in the Adobe Animate CC animations I've created. For example, here you'll see a script that doesn't work that's trying to tell the ship animation to gotoAndPlay(5). Anyhow, the ship animation is not responding to that. I'm guessing it's because I'm not addressing/naming it correctly. Help me talk to my animations. See the code below.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Lets talk to each other</title>
<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.6.1.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.8.1.min.js"></script>
<script src="ship.js"></script>
<script src="car.js"></script>
<script>
function init () {
var canvas, stage, exportRoot;
canvas = document.getElementById("canvas_ship");
exportRoot = new libs_ship.ship();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(libs_ship.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
canvas = document.getElementById("canvas_car");
exportRoot = new libs_car.car();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(libs_car.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
function Tell_Canvas_Ship_to_gotoAndPlay5(){
canvas_ship.gotoAndPlay(5);
}
</script>
</head>
<body onload="init();" style="background-color:#D4D4D4">
<canvas id="canvas_ship" width="300" height="250" style="background-color:#FFFFFF"></canvas>
<canvas id="canvas_car" width="300" height="250" style="background-color:#FFFFFF"></canvas>
</body>
</html>
It looks like "canvas_ship" is the ID of your actual canvas element. I think what you are trying to do is control the content you are adding to it.
If so, you can call gotoAndPlay on the exportRoot, which is a MovieClip instance with that API.
exportRoot.gotoAndPlay(5);
The issue you will have though, is that once you create your canvas_ship stage and content, you are overwriting the variables. I recommend changing the name of the second canvas, exportRoot, and stage.
You could also add both elements to one canvas. Is there any reason you are using two canvases, other than that you used the exported content from 2 FLAs?
var stage = new createjs.Stage("canvas_ship");
var ship = new libs_ship.ship();
var car = new libs_car.car();
stage.addChild(ship, car);
createjs.Ticker.addEventListener("tick", stage);
Where is your Tell_Canvas_Ship_to_gotoAndPlay5 method getting called from? Is it a frame script in Animate/Flash?
I've received help and will now share the answer. You are welcome. Just invite me over for breakfast sometime.
In Adobe Animate, you'll need to change the library namespace (in the Publish settings in the Advanced tab I think) to lib_jerry or whatever custom name you come up with... so long as it's different than the other animation. Then just follow the setup in this code. You can call the functions from within the Animate animations.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Container</title>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="tommy.js"></script>
<script src="jerry.js"></script>
<script>
var canvas, stage, tomtom, jerjer;
function init() {
var exportRoot;
//Tommy
canvas = document.getElementById("canvas_tommy");
tomtom = new lib_tommy.tommy();
stage = new createjs.Stage(canvas);
stage.addChild(tomtom);
stage.update();
createjs.Ticker.setFPS(lib_tommy.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
//Jerry
canvas = document.getElementById("canvas_jerry");
jerjer = new lib_jerry.jerry();
stage = new createjs.Stage(canvas);
stage.addChild(jerjer);
stage.update();
createjs.Ticker.setFPS(lib_jerry.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
function button_from_tommy_was_clicked(){
tomtom.gotoAndPlay(5);
}
function button_from_jerry_was_clicked(){
jerjer.gotoAndPlay(5);
}
</script>
</head>
<body onload="init();" style="background-color:#D4D4D4;margin:0px;">
<canvas id="canvas_tommy" width="970" height="90" style="background-color:#727272"></canvas>
<canvas id="canvas_jerry" width="970" height="90" style="background-color:#727272"></canvas>
</body>
</html>
If I were to write an application that controls another application which I don't have the binaries to,
For example, an application that by itself would open Google Earth and place the camera in a specific point my application would tell it, say -24,131, and then command google earth to save the image to a specific folder.
What is the approach to this?
How can I know the functions that are being executed and fire them on behalf of a control program like that?
Also, I will also need to know that downloading of images was finished so I can grab the image.
I saw there is an API for google earth, but I don't know if I can use it to control google-earth (the application itself)
You can use the Google Earth API (developers.google.com/earth/) to control a Google Earth globe instance.
See Javascript code snapshot here:
var ge;
google.load("earth", "1");
function init() {
google.earth.createInstance('map3d', initCB, failureCB);
}
function initCB(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
ge.getOptions().setStatusBarVisibility(true);
ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);
ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true);
var lookAt = ge.createLookAt('');
lookAt.setLatitude(41.26);
lookAt.setLongitude(-100.00);
lookAt.setRange(800000.0);
ge.getView().setAbstractView(lookAt);
}
function failureCB(errorCode) {
alert(errorCode);
}
google.setOnLoadCallback(init);
See HTML code here:
<!DOCTYPE html>
<head>
<script src="http://www.google.com/jsapi"></script>
</head>
<style>
body {
margin:20px;
height:100%;
width:98%;
}
#map3d {
width:75%;
float:right;
}
</style>
<body>
<div id="map3d"></div>
</body>
</html>
The you can use wkhtml2pdf (code.google.com/p/wkhtmltopdf/) function wkhtmltoimage, or PhantomJs (github.com/ariya/phantomjs/wiki/Screen-Capture) to get an image version.
Hope it helps!
Cheers,
Mihai
I'd like to know what languages and tools (debuggers, IDEs, profilers, libraries, etc) are available for those wanting to develop for Palm Pre.
Also, I'd like to know what technological restrictions exists that one has to be aware of.
There is a library of JavaScript functions for interacting with the base system (phone-level stuff) and CSS tags, styles, etc, for rendering in the Palm WebOS style.
The SDK comes with a script "palm-generate" which builds a set of configuration files and folder structure. The "palm-package" script builds an isntaller, and nother script, "palm-install" load the installer into the emulator's file system (or a real palm, I believe...mine is on order and should be here Monday!!!).
It is easy enough to find this code, and it isn't at all original, but I thought it would be valuable to give a glimpse here...
Hello World - copied from the tutorial in the palm webos sdk
HelloWorld/appinfo.json - meta-information for this application, including a unique name (domain-style), and the root of the application ("index.html")
{
"id": "com.yourdomain.hello",
"title": "Hello World",
"type": "web",
"main": "index.html",
"icon": "icon.png",
"version": "1.0.0",
"vendor": "Your Company"
}
HelloWorld/sources.json - manifest
[
{
"source": "app\/assistants\/stage-assistant.js"
},
{
"source": "app\/assistants\/first-assistant.js",
"scenes": "first"
}
]
helloWorld/app/assistants/stage-assistant.js - controller for the application. each application consists of a Stage with multiple Scenes; the StageAssistant.setup() method gets control first, providing time to initialize data, connections, etc.
function StageAssistant () {
}
StageAssistant.prototype.setup = function() {
this.controller.pushScene('first');
}
HelloWorld/index.html - the view for the Stage
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPECTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Hello, World!</title>
<script src="/usr/palm/frameworks/mojo/mojo.js" type="text/javascript" x-mojo-version="1"></script>
</head>
<body>
Hello, World! 2:59
</body>
</html>
helloWorld/app/assistants/first-assistant.js - view for the "first" scene
<div id="main" class="palm-hasheader">
<div class="palm-header">Header</div>
<div id="count" class="palm-body-text">count</div>
<div id="MyButton" name="MyButton1" x-mojo-element="Button"></div>
</div>
helloWorld/app/assistants/first-assistant.js - controller for the "first" scene
function FirstAssistant() {
/* this is the creator function for your scene assistant object. It will be passed all the
additional parameters (after the scene name) that were passed to pushScene. The reference
to the scene controller (this.controller) has not be established yet, so any initialization
that needs the scene controller should be done in the setup function below. */
}
FirstAssistant.prototype.handleButtonPress = function(event){
// increment the total and update the display
this.total++;
this.controller.get('count').update(this.total);
}
FirstAssistant.prototype.setup = function() {
/* this function is for setup tasks that have to happen when the scene is first created */
/* use Mojo.View.render to render view templates and add them to the scene, if needed. */
/* setup widgets here */
/* add event handlers to listen to events from widgets */
// set the initial total and display it
this.total=0;
this.controller.get('count').update(this.total);
// a local object for button attributes
this.buttonAttributes = {};
// a local object for button model
this.buttonModel = {
buttonLabel : 'TAP HERE',
buttonClass : '',
disabled : false
};
// set up the button
this.controller.setupWidget("MyButton", this.buttonAttributes, this.buttonModel);
// bind the button to its handler
Mojo.Event.listen(this.controller.get('MyButton'), Mojo.Event.tap, this.handleButtonPress.bind(this));
}
FirstAssistant.prototype.activate = function(event) {
/* put in event handlers here that should only be in effect when this scene is active. For
example, key handlers that are observing the document */
}
FirstAssistant.prototype.deactivate = function(event) {
/* remove any event handlers you added in activate and do any other cleanup that should happen before
this scene is popped or another scene is pushed on top */
}
FirstAssistant.prototype.cleanup = function(event) {
/* this function should do any cleanup needed before the scene is destroyed as
a result of being popped off the scene stack */
this.controller.stopListening(this.controller.get('MyButton'), Mojo.Event.tap, this.handleButtonPress.bind(this));
}
Its very much like writing web applications but you'll need to download the webOS SDK from http://developer.palm.com/ and a palm emulator.
All the information is there and its easy to get going if you use the eclipse IDE
It is a web-based OS, so I would assume it's somewhat similar to doing PhoneGap development, if you are at all familiar with their framework.
Javascript with custom API calls will drive most of the applications and it looks like they are configuring their SDK to work well with Eclipse IDE. Of course HTML and CSS will cover the front end of things.
A good beginner page explaining what you are looking for can be found here: http://developer.palm.com/index.php?option=com_content&view=article&id=1603