A Web Viewer for Blender.

Overview

BlenderWebViewer

a Web Viewer for Blender.

gif

To get started:

  • Clone the repo
  • Install the add-on for Blender (blenderPlugin.zip)
  • change the path field in the blender add-on to the cloned folder (ie. Users/elia/Documents/BlenderWebViewer)
  • run the following command from the BlenderWebViewer folder to install all the dependencies:
    npm run dependencies (wait a few seconds while it downloads the dependencies)
  • from the same folder, run npm start to start the server
  • click export in the blender add-on
  • visit the page localhost:3000 to view your blender scene in your browser

When you move objects around the plugin is going to hot-reload the page but if you add new elements you might have to refresh the page manually.

It currently does not support Area lights.

to do list:

  • find a way to export/import ambient lights / HDRIs
  • add animations to the web viewer
  • convert area lights from blender to three.js
You might also like...

An OpenStoriesFeed viewer

An OpenStoriesFeed viewer

Dec 17, 2022

🔆🔎👀 Smart Contract Storage Viewer, DataType Guesser, Toolbox & Transaction Decoder

🔆🔎👀  Smart Contract Storage Viewer, DataType Guesser, Toolbox & Transaction Decoder

🔆 🔎 👀 Smart Contract Storage HexViewer Demo Target - the target contract API Endpoint - your infura (or equivalent) api key Retrieves smart contrac

Nov 27, 2022

This is an IFC wrapped on Three js based viewer, I think..

This is an IFC wrapped on Three js based viewer, I think..

ifc-three-js-viewer Project description: This is an IFC wrapped on Three js based viewer, I think.. Features & Screenshots: A simple viewer for render

Dec 14, 2022

A Simple Text/Document Viewer written in JS

A Simple Text/Document Viewer written in JS

Doku Doku.js is a terminal ui text/document viewer that supports a custom documentation syntax called doky. Features Border colors. (all common termin

Sep 9, 2022

A viewer for Arc System Works scripts and hitboxes written in Godot.

A viewer for Arc System Works scripts and hitboxes written in Godot.

ASWViewer A viewer for Arc System Works scripts and hitboxes written in Godot. Currently only supports Guilty Gear -Strive-. It also displays the mode

Sep 20, 2022

Chat app using Azure Web PubSub, Static Web Apps and other Azure services

Chat app using Azure Web PubSub, Static Web Apps and other Azure services

Chatr - Azure Web PubSub Sample App This is a demonstration & sample application designed to be a simple multi-user web based chat system. It provides

Dec 31, 2022

A pure JavaScript Web Page to retrieve real-time OTP through a web page and generate/scan QR codes.

A pure JavaScript Web Page to retrieve real-time OTP through a web page and generate/scan QR codes.

2FA-Solver A pure JavaScript Web Page to retrieve real-time OTP through a web page and generate/scan QR codes. It can be used as an offline web page b

Dec 7, 2022

This is a full-stack exercise tracker web application built using the MERN (MongoDB, ExpressJS, ReactJS, NodeJS) stack. You can easily track your exercises with this Full-Stack Web Application.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Dec 25, 2021

La extensión web que muestra el precio de los juegos de la web de Xbox, PlayStation, Nintendo y Epic Games Store con los impuestos de Argentina incluidos. Conocé cuanto vas a pagar por tus juegos 💚💙❤️

La extensión web que muestra el precio de los juegos de la web de Xbox, PlayStation, Nintendo y Epic Games Store con los impuestos de Argentina incluidos. Conocé cuanto vas a pagar por tus juegos 💚💙❤️

Conocido anteriormente como Xboxito Impuestito - Conocé el precio real de los juegos Impuestito calcula y muestra el precio de los juegos de la web de

Dec 4, 2022
Comments
  • Bump three from 0.122.0 to 0.125.0 in /gltfjsx

    Bump three from 0.122.0 to 0.125.0 in /gltfjsx

    Bumps three from 0.122.0 to 0.125.0.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • File Not Found error in the BlenderWebViewer.py file after clicking on the export button

    File Not Found error in the BlenderWebViewer.py file after clicking on the export button

    Clicking on the export button throws this "File Not Found" error.

    Python: Traceback (most recent call last):
      File "Blender Foundation\Blender\3.0\scripts\addons\BlenderWebViewer.py", line 108, in execute
        export_gltf(apply_modifiers, path)
      
    File "Blender Foundation\Blender\3.0\scripts\addons\BlenderWebViewer.py", line 21, in export_gltf
        bpy.ops.export_scene.gltf(filepath=path, export_format='GLB', use_selection=True, export_apply=apply_modifiers, export_lights=True, export_cameras=True)
    
    File "Blender Foundation\Blender 3.0\3.0\scripts\modules\bpy\ops.py", line 132, in __call__
        ret = _op_call(self.idname_py(), None, kw)
    RuntimeError: Error: Python: Traceback (most recent call last):
     
    File "Blender Foundation\Blender 3.0\3.0\scripts\addons\io_scene_gltf2\__init__.py", line 637, in execute
        return gltf2_blender_export.save(context, export_settings)
    
    File "Blender Foundation\Blender 3.0\3.0\scripts\addons\io_scene_gltf2\blender\exp\gltf2_blender_export.py", line 51, in save
        __write_file(json, buffer, export_settings)
      
    File "Blender Foundation\Blender 3.0\3.0\scripts\addons\io_scene_gltf2\blender\exp\gltf2_blender_export.py", line 142, in __write_file
        gltf2_io_export.save_gltf(
     
    File "..\blender\exp\gltf2_io_export.py", line 80, in save_gltf
        file = open(export_settings['gltf_filepath'], "wb")
    
    FileNotFoundError: [Errno 2] No such file or directory: 'F:\\Blender Add ons\\BlenderWebViewer\\public\\scene.glb'
    
    location: Blender Foundation\Blender 3.0\3.0\scripts\modules\bpy\ops.py:132
    
    location: <unknown location>:-1
    
    

    Also, running npm run dependencies gave this error👇

    npm ERR! code ERESOLVE
    npm ERR! ERESOLVE unable to resolve dependency tree
    npm ERR!
    npm ERR! While resolving: [email protected]
    npm ERR! Found: [email protected]
    npm ERR! node_modules/react
    npm ERR!   react@"^17.0.0" from the root project
    npm ERR!   peer react@"^16.8.0  || >=17.0.0 || >=18.0.0" from @react-spring/web@
    9.4.5
    npm ERR!   node_modules/@react-spring/web
    npm ERR!     @react-spring/web@"^9.2.4" from the root project
    npm ERR!
    npm ERR! Could not resolve dependency:
    npm ERR! peer react@"^18.1.0" from [email protected]
    npm ERR! node_modules/react-dom
    npm ERR!   peer react-dom@"^16.8.0  || >=17.0.0 || >=18.0.0" from @react-spring/
    [email protected]
    npm ERR!   node_modules/@react-spring/web
    npm ERR!     @react-spring/web@"^9.2.4" from the root project
    npm ERR!
    npm ERR! Fix the upstream dependency conflict, or retry
    npm ERR! this command with --force, or --legacy-peer-deps
    npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
    

    So I tried running npm run dependencies --legacy-peer-deps and it compiled successfully but showed "1 high severity vulnerability"

    bug 
    opened by knightcube 2
  • Export to AR functionality

    Export to AR functionality

    Let's add an "Export to AR" button below the "Export" button in Blender.

    Clicking on it will allow artists to view their scene in AR.

    How do we export the scene on the artist's phone? Asking the artist to set up port forwarding in chrome to launch the localhost server on his or her phone is a long technical process. Any better ideas?🤔

    enhancement 
    opened by knightcube 0
Owner
eliaorsini
eliaorsini
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
An opensource 360° media viewer written in JavaScript using Electron and Marzipano

open360viewer open360viewer is an opensource 360° media viewer. It is based on electron and marzipano. It currently supports opening equirectangular 3

null 4 Oct 9, 2022
An alternative viewer for DevDAO NFT with a ✨holographic✨ twist

Holo DevDAO An alternative viewer for DevDAO NFT with a ✨ holographic ✨ twist. Pre-requisites node version >= 15.0.1 & npm >= 7.20.6. If you have nvm

Naomi Hauret 19 Dec 17, 2022
[ThatProject] ESP32 LoRa GPS Data Viewer

Map Viewer for MCU with LoRa & GPS Data ThatProject Channel LoRa module has caught the attention of many people for a number of reasons. Being able to

Eric 6 Aug 7, 2022
Custom Element: interactive panorama viewer

<little-planet> This project is a Custom HTML Element (AKA Web Component) that renders an interactive view of a panoramic photo. Can be used with no J

Ondřej Žára 12 Nov 25, 2022
JavaScript Online DWG/DXF Viewer

dwg-viewer-js A DWG viewer you can buy for $420 (US) I had originally made this for a software company but they cancelled at the last moment so if any

Savir Singh 4 Jul 6, 2022
Embed panorama photos on your website with Panorama Viewer

#Panorama Viewer by Pete R. Embed interactive Panorama Pictures on your site with this simple plugin. Created by Pete R., Founder of Travelistly and B

Pete R. 474 Oct 8, 2022
Quick spreadsheet viewer in vanilla JS

Heihō Quick spreadsheet viewer in vanilla JS What it does ? The heiho.js script is quick and simple spreadsheet viewer. It is meant to preview the con

Kaloyan Tsvetkov 18 Sep 8, 2022