Code Monkey home page Code Monkey logo

xyz3d.js-blender-plugin's Introduction

xyz3d.js Blender Plugin

This plugin adds custom properties to the selected objects which are read by the xyz3d.js library.

https://www.youtube.com/watch?v=3mRjiqz_XWI

overview

how to use

Models

Select an object and while it's the active object choose a corresponding option in the models section.

INTERACTABLE MESHES

If the object is "clickable" or "hoverable"

  1. set it as "interactable"
  2. add a bounding (convex) mesh around it that will work as bounds the user clicks
  3. set viewport visibility of this bounding mesh to bounds only (optionally)
  4. click the bounding mesh, then it's interactable mesh counterpart, and select "Set Raycast Mesh". (AKA selected=interactable, active=raycast mesh)

SCENE ZONES

This is how xyz3d groups models and compartmentalizes interactive/background components. Only buttons in the currently viewing scene zone are interactable. Each scene zone requires a Camera Anchor mesh, this is where the camera will move to when you enter the scene zone. The camera will then be moved back if the vertices of your interactable and background meshes are not in the camera's frustum. Note, a camera anchor order is mandatory - this starts at 0.

  1. Enter a scene zone name at the top of the plugin, ie Home or Demo
  2. Create a box for the camera anchor (recommended to set viewport visibility to bounds)
  3. Move this box to where you would like the camera to be for this zone
  4. Click this box and set it as a camera anchor via the apply button, also click the set scene zone button and set it's camera anchor order.
  5. Select the meshes corresponding to this zone and also click "Apply" to "Set Zone"
  6. Repeat for all scene zones.

ANIMATIONS

Looping animations will play continuously, Hover Animations play when the user hovers over the model, as Click animations fire on user clicks, and Camera animations fire on user clicks as well. Note, only interactable meshes are raycasted against, so this means click, hover, and camera animations will only fire on the interactable types.

  1. Open the dope sheet, then navigate to the action editor
  2. Copy the name of the animation you would like to add to your model
  3. Paste this name into the animation text box found via the plugin
  4. Apply this animation to any animation types as required via the Apply buttons

gltf export settings

gltf export settings

xyz3d.js-blender-plugin's People

Contributors

64blit avatar

Stargazers

MotionDrive avatar Paul Mulvaney avatar Aditia A. Pratama avatar Dale Bradshaw avatar  avatar Caio Leone Fonseca Casanova Soeiro avatar  avatar Samuel Deng avatar

Watchers

Aditia A. Pratama avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.