Forum

Materials are change after deploy

26 February 2019 08:20
I have attached file for your ref.
26 February 2019 20:58
Oh, I see what you did now. You tried to run the HTML file locally on your computer. The trouble is, you cannot do that so simply because it violates CORS policy:

CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

You should not be worried by that error. Once you finish your project and upload it to its final destination on a website, this will not be a problem.

Do not test and run your projects by opening them locally on your computer. Instead, better run them through the B4W Project Manager because it emulates a LOCALHOST on your system, namely the B4W Development server:


This was provided exactly because you need a server environment on your computer to run your projects on, you can't just run them locally under the file:// protocol, because that causes problems.

And if you want to test a project on a different browser than your computer's default browser, you simply copy the URL of the running project, for example

http://localhost:6687/apps_dev/tutorials/cartoon_interior/cartoon_interior.html

and paste it into the URL bar of the browser you want to test it in.
27 February 2019 18:26
Thank you very much sir , it has worked when we deployed the project in server.

I have other doubt it is possible to auto rotate object on load in web page. without using player. i have tried this code but it has not worked for me

<!DOCTYPE html>
<html>

<head>

<title>html_buttons_drive_logic_nodes</title>

<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">

<link rel="stylesheet" href="html_buttons_drive_logic_nodes.css" type="text/css">

<script type="text/javascript" src="b4w.js"></script>
<script type="text/javascript" src="b4w.min.js"></script>
<script type="text/javascript" src="camera_anim.js"></script>
<script type="text/javascript" src="camera_animation.js"></script>
<script type="text/javascript" src="b4w.simple.min.js"></script>



<script>

var m_app = b4w.require("app");
var m_data = b4w.require("data");
var m_cam = b4w.require("camera_anim");

m_app.init({
canvas_container_id: "container_id",
callback: load_cb,
show_fps: true,
console_verbose: true,
autoresize: true
})

function load_cb() {
m_data.load("Renault_Captur.json", loaded_cb);
}

function loaded_cb() {

m_app.enable_camera_controls();
m_cam.auto_rotate(1);
}

</script>
</head>

<body>
<div id="main_canvas_container"></div>

</body>

</html>\
27 February 2019 20:40
This code does not look right at all. Where did you get this from? B4W-related code like the init call should be in its own .js file, why was it moved over to the .html file? Also, you are loading several versions of B4W at the same time, and there should be no need to load modules like camera separately in the HTML in B4W v18.05.

If you create a new custom project of the "Copy" type in B4W v18.05, you get an HTML file which only loads b4w.js and the project's javascript file, nothing else. Like this:
<script type="text/javascript" src="..\..\dist\b4w.js"></script>

<script type="text/javascript" src="html_buttons_drive_logic_nodes.js"></script>

Then you add your code in the .js file under where it says "place your code here". Maintaining this structure is important because these files will be compiled and minimized upon deployment. After deployment, the project's .js and b4w.js are fused into a single "project.min.js".

You run and test your project through the Project Manager, and you only edit the "source" version in your project folder within the B4W installation. You never edit the "build" or "deployed" version.



Do the following: In a previous post, I attached for you the project.zip of the "html_buttons_drive_logic_nodes" project. Start over and go back to that project. Unzip it and copy the folder "html_buttons_drive_logic_nodes" (with its subfolders) to the projects folder of your B4W installation. If you run the Project Manager, you should see that project on the list of projects, and you should be able to run it by clicking on its "dev:" link in the second column.

To add camera rotation, add the following line in the html_buttons_drive_logic_nodes.js file below the line // place your code here:

m_cam_anim.auto_rotate(1);

And now, because you are using a module you have not used before, namely m_cam_anim (camera animation), you need to register that module at the top of the file. Go to the beginning of the file where it says:

var m_app = require("app");
var m_cfg = require("config");
var m_data = require("data");
var m_preloader = require("preloader");
var m_ver = require("version");

Simply add a line for the camera animation module:

var m_cam_anim = require("camera_anim");

While coding, whenever you use a new API module, you need to add it to that list (once), otherwise the browser console will throw an error. It happens quite often during coding that one forgets to add the modules at the top, so always have the console open and look at it for errors when you test your stuff!

Save the file and run the project from the Project Manager. You should now see the camera view rotating around the cube.
28 February 2019 14:10
Thanks a lot , it has worked like a charm !!!! but i have other doubt

auto_rotate(auto_rotate_ratio, callbackopt, disable_on_mouse_wheelopt)

on Mouse click i need to stop rotation is it possible , i have tried using above function as syntax but it is not working could you please give us any solution.


Also it is possible to make object only rotate , drag (Movement "TO and Fro") should not take place.
28 February 2019 21:15
on Mouse click i need to stop rotation … using above function as syntax but it is not working
Well, that's not true because the rotation does stop on clicking any mouse button with this API method, and normally, you don't need any user HTML buttons to control this.

The idea of auto_rotate is that the object is presented like in a show room situation. A typical configurator made with B4W will often rotate around the object automatically until the user intervenes with a click, and the B4W default for this is

* clicking (and holding) LEFT mouse button will rotate the camera
* clicking (and holding) MIDDLE or RIGHT will move the camera
* using the wheel will zoom in/out the camera

However, if the user stays inactive for a pre-defined amount of seconds, the rotation will resume again. This is a pretty good, natural interaction style.

To make the camera restart the rotation, you must make use of the callback function which is fired every time the animation stops (= the user clicks), combined with a frame callback. What you do is, you constantly monitor the current engine time in the frame callback. The other callback records that a stop occurred and WHEN. Now, if the current time minus the recorded last stop time exceeds a certain amount of seconds (let's say 20 seconds), you issue a new m_cam_anim.auto_rotate call to restart the rotation. It's really simple.


Also it is possible to make object only rotate , drag (Movement "TO and Fro") should not take place.
Yes, by setting the camera movement speeds in Blender in the Camera object panel.

In your case, if you set the Zoom Velocity to zero, it will block the zoom completely.

I appended a new html_buttons_drive_logic_nodes.js with commented code. Overwrite the previous version with this one. It does the things discussed above. Read through the code, from this you can learn how to define and use your own variables, how to make a CONFIGURATION object, and how to use callback functions.

Important:

You must set the camera velocities in Blender. You can set the Zoom velocity to zero if you don't want to allow Zoom.

You should also set the TRANSLATION velocity (camera movement) to zero because this simple demo is not prepared to transition the Camera Pivot back to the Cube. That means if you allow the user to move the camera, he will drag the camera off-center and when the rotation kicks back in, the camera will rotate around the wrong axis. We can discuss resetting the pivot if you need it.
04 March 2019 14:47
Thanks for your support , i have created logic nodes , i have called this node logic from html .
single click nodes not started triggering , on second click logic node is triggered.
how to make logic node to work on single click.
04 March 2019 19:47
I can barely read this. Better post PNG images or reduce compression.

Looks like you have a control variable that is toggled between 0/1 with each click. This variable is set to 1 at scene launch through the green Entry Point. Set it to 0 at scene launch and the first click's behavior should be inverted.
07 March 2019 20:00
Thank you so much for your support !! finally mistake has been identified , but now objects when i click it take around 1 minute to change its properties , for example to change colour from red to orange it takes so many minutes , through HTML Coding but previously it has worked very fine.
07 March 2019 20:31
Well, as always, I would need the sources to look into it. Can you attach the zipped project? You create a zip of your project by clicking on EXPORT PROJECT(S) in the B4W Project Manager, select your project and then click on EXPORT again at the bottom.

You can mail me the zip if you don't want to share it publicly. My address is my username at protonmail.com.
 
Please register or log in to leave a reply.