Real Newb - Javascript
10 October 2015 17:47
Hi everyone, great tool you have here!
So, I was wondering what is the best starting point for learning how to use javascript and how to take the code given and put it into my scene. For example, I want to put the mouse hover over glow into my existing project. Very basic, I know, but what I've found seems to be more advanced and I need an "absolute beginner" version.
I'm a quick learner if I can get going in the right direction. I've done some basic python coding for Blender.
Thanks!
So, I was wondering what is the best starting point for learning how to use javascript and how to take the code given and put it into my scene. For example, I want to put the mouse hover over glow into my existing project. Very basic, I know, but what I've found seems to be more advanced and I need an "absolute beginner" version.
I'm a quick learner if I can get going in the right direction. I've done some basic python coding for Blender.
Thanks!
10 October 2015 18:36
Hi Wole and welcome!
Hope this helps!
So, I was wondering what is the best starting point for learning how to use javascript and how to take the code given and put it into my scene.JavaScript is a very easy language to learn. I would recommend to start from Creating an Interactive Web Application.
For example, I want to put the mouse hover over glow into my existing project. Very basic, I know, but what I've found seems to be more advanced and I need an "absolute beginner" version.This particular case is covered in this tut (search for enable_mouse_hover_outline, see also API reference).
Hope this helps!
11 October 2015 04:58
Thanks for the input! I'm still trying to get over the hump and I'm sorry if I'm asking for someone to hold my hand too much. Here's what I did as a test.
1. Took the new project .blend with the cube selected and checked "Selectable" and "Enable Outlining", resaved
2. Exported to .html
3. Changed the code to read as below - added var m_mouse = require("mouse"); and m_mouse.enable_mouse_hover_outline();
4. Loaded the .html into Chrome to no avail
I also tried the .json export option to no avail. I combed through the new years example and the interactive example. Maybe I'm missing a key point here about where these addons are coming from. Any help would be appreciated!
1. Took the new project .blend with the cube selected and checked "Selectable" and "Enable Outlining", resaved
2. Exported to .html
3. Changed the code to read as below - added var m_mouse = require("mouse"); and m_mouse.enable_mouse_hover_outline();
4. Loaded the .html into Chrome to no avail
I also tried the .json export option to no avail. I combed through the new years example and the interactive example. Maybe I'm missing a key point here about where these addons are coming from. Any help would be appreciated!
"use strict"
// register the application module
b4w.register("glow-test", function(exports, require) {
// import modules used by the app
var m_app = require("app");
var m_data = require("data");
var m_cfg = require("config");
var m_mouse = require("mouse");
/**
* export the method to initialize the app (called at the bottom of this file)
*/
exports.init = function() {
m_app.init({
canvas_container_id: "main_canvas_container",
callback: init_cb,
show_fps: true,
autoresize: true
});
}
/**
* callback executed when the app is initizalized
*/
function init_cb(canvas_elem, success) {
if (!success) {
console.log("b4w init failure");
return;
}
load();
}
/**
* load the scene data
*/
function load() {
m_data.load("glow-test.json", load_cb);
}
/**
* callback executed when the scene is loaded
*/
function load_cb(data_id) {
m_app.enable_controls();
m_app.enable_camera_controls();
m_mouse.enable_mouse_hover_outline();
// place your code here
}
});
// import the app module and start the app by calling the init method
b4w.require("glow-test").init();"use strict"
// register the application module
b4w.register("glow-test", function(exports, require) {
// import modules used by the app
var m_app = require("app");
var m_data = require("data");
var m_cfg = require("config");
var m_mouse = require("mouse");
/**
* export the method to initialize the app (called at the bottom of this file)
*/
exports.init = function() {
m_app.init({
canvas_container_id: "main_canvas_container",
callback: init_cb,
show_fps: true,
autoresize: true
});
}
/**
* callback executed when the app is initizalized
*/
function init_cb(canvas_elem, success) {
if (!success) {
console.log("b4w init failure");
return;
}
load();
}
/**
* load the scene data
*/
function load() {
m_data.load("glow-test.json", load_cb);
}
/**
* callback executed when the scene is loaded
*/
function load_cb(data_id) {
m_app.enable_controls();
m_app.enable_camera_controls();
m_mouse.enable_mouse_hover_outline();
// place your code here
}
});
// import the app module and start the app by calling the init method
b4w.require("glow-test").init();
11 October 2015 06:03
Hi Wole.
The HTML export is completely self contained. It uses no external Javascript files. The JSON export relies on the b4w engine and the one that you, the developer, write. I am in the middle of a making a video tutorial to help complete beginners with building a basic application (as opposed to a self contained HTML export). I hope to have it out later this week.
The HTML export is completely self contained. It uses no external Javascript files. The JSON export relies on the b4w engine and the one that you, the developer, write. I am in the middle of a making a video tutorial to help complete beginners with building a basic application (as opposed to a self contained HTML export). I hope to have it out later this week.
11 October 2015 06:37
Thanks Will. BTW, your videos have been a great help! I've watched and learned a lot from them all. Looking forward to following you as far down the rabbit hole as I can. Also as an 8 year Blender vet, I 100% percent agree with your statement that figuring out how to make something work is the majority of the battle. Glad to have guys like you helping demystify this new frontier.
11 October 2015 07:27
It good to know a Blender Vet, I have only dabbled in it over the years. I am working on a basic "Hello World" app that uses all the basic components of a Blend4Web application; HTML, CSS, Javascript and of course Blender.
Here is my progress so far:
http://williamwelker.com/b4w/Hello_World/
http://williamwelker.com/b4w/Hello_World.zip
I still need to comment all the code and make the video, so it is not done yet.
My thoughts are that there are many web developers who don't know Blender and many Blender developers that don't know HTML, CSS and Javascript. And plenty of up and coming developers who know none of it. So I think there is a need to start from the absolute beginning and people can just skip the parts they know.
This app might be more basic than your needs but it is a start.
Here is my progress so far:
http://williamwelker.com/b4w/Hello_World/
http://williamwelker.com/b4w/Hello_World.zip
I still need to comment all the code and make the video, so it is not done yet.
My thoughts are that there are many web developers who don't know Blender and many Blender developers that don't know HTML, CSS and Javascript. And plenty of up and coming developers who know none of it. So I think there is a need to start from the absolute beginning and people can just skip the parts they know.
This app might be more basic than your needs but it is a start.
12 October 2015 03:39
Thanks Will. I should amend my statement…I am more of a Blender National Guard than a hardcore vet. I'm a civil engineer who has been producing project videos using CAD 3d models and Blender for a few years but I was a hobbyist before that.
So I've downloaded your zip and ran the index.html. I see in the text description on the page that there is supposed to be something in the background but all I see is the colored block. There is no blend4web viewer there. Is this still in development or have I mucked it up again?
So I've downloaded your zip and ran the index.html. I see in the text description on the page that there is supposed to be something in the background but all I see is the colored block. There is no blend4web viewer there. Is this still in development or have I mucked it up again?
12 October 2015 03:57
So unlike the self contained HTML file, this type of export can not be opened directly. The security settings on your browser do not allow JavaScript files to be executed from your local machine. It must be run from a server. Happily, your SDK comes with one. When you open your SDK with the button inside Blender, you are using the local server. The root directory of your server is the Blend4Web folder. So if you place the Hello_World folder inside your Blend4Web folder then put the address in your browser, it will work.
See my attached image.
This server is running whenever you open Blender (assuming you have the Blend4Web SDK installed). For convenience, I placed a shortcut in my bookmarks bar to localhost:6687.
See my attached image.
This server is running whenever you open Blender (assuming you have the Blend4Web SDK installed). For convenience, I placed a shortcut in my bookmarks bar to localhost:6687.
12 October 2015 07:17
Hey, I should also mention there is a way to show the errors in your browser when something isn't working.
Browsers have a console you can open, I just did a post on it HERE.
Browsers have a console you can open, I just did a post on it HERE.