9
$\begingroup$

I am making a webpage, and I am using WebGL for animation and making characters in blender. I want to know how to make those characters hyperlink so that when I click on any character it takes me to another webpage.

$\endgroup$
1
  • 2
    $\begingroup$ I'm voting to close this question as off-topic because it's a WebGL question, not a Blender question. If you intend this to be a Blender question, please edit it to be more clear. $\endgroup$
    – Matt
    Commented May 27, 2016 at 14:04

1 Answer 1

12
$\begingroup$

First (if you haven't already), download the Blend4Web SDK and be sure to install it correctly. The SDK is different from the standalone add-on, so make sure you get the SDK (which includes the full-featured add-on, and also a lot more).

Set your render engine to Blend4Web.

Setting the render engine to Blend4Web

Enable Blend4Web's Logic Editor and create a new node tree by clicking the [+] button.

Enabling Blend4Web's Logic Editor and creating a node tree

In Blender's Node Editor, set the node tree type to Blend4Web logic, and select your node tree.

Selecting/specifying your node tree

Make a node setup like this to instruct it to redirect to another URL when an object is clicked:

Blend4Web Logic Editor node setup for a URL redirect

This node setup specifies that IF Suzanne (the monkey) is clicked, the redirect will happen, ELSE go back to listening for a click. That's why the "Miss" output routes back into the "Previous" input in a loop.

You can click the Fast Preview button on the right of the 3D Viewport's menu to preview it in your browser.

Once you're happy with the results, choose File > Export > Blend4Web (.html) to generate the standalone HTML file with all the 3D and interactivity data bundled into it.

Here's an example .blend (requires that the Blend4Web SDK be installed):

And here's an example HTML file generated from the .blend to demonstrate the functionality (requires that WebGL be enabled in your browser).

$\endgroup$
0

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .