Loading a JSON camera and light in Three.js

In my work with Blender, I am utilizing io_three for exporting an entire scene including a Torus, a Sphere, Suzanne (also known as the Money Head), a Camera, and a Point of Light (Lamp). When I receive the JSON file from this export, it contains these elements nested as children:

"object":{
    "type":"Scene",
    "matrix":[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],
    "uuid":"3FF28BA1-D2C4-4191-B85E-6CF740855E1C",
    "children":[{
        "name":"Camera",
        "uuid":"B7190F03-3E64-4CE9-80C4-4C4830CDE149",
        ...
     }]
}

Now, in order to import the complete scene using the Object Loader so that I have everything together rather than separate objects:

var Sphere;
var Monkey;
var BlenderCam;

var loader = new THREE.ObjectLoader();
// load a resource
loader.load(
    // resource URL
    'models/suzane/scene.json',
    // Function when resource is loaded
    function ( loadedScene ) {
        ...

        loop();
    }
);

I can handle meshes like the Torus, Suzanne, and Sphere successfully. However, I am facing difficulty in handling the Camera or Lamp objects.

I attempted to locate each child object using:

BlenderCam = loadedScene.children[ 0 ];

Even after trying various indexes from 0 to 4 (there are 5 children), only three of them are recognized by Three.js, ignoring the Camera and Lamp objects. Moving the Lamp's position in the JSON file didn't change this behavior, where only children[0], children[1], and children[2] are accessed, with children[0] representing the Sphere instead of the Camera. Hence, the Camera is seemingly being overlooked.

My questions are:

  1. Is there a method to utilize the Camera defined in the JSON file?
  2. Can the Lamp object from the JSON file be utilized?

Essentially, I aim to design everything in Blender and then seamlessly import the whole scene including objects, camera, and light to Three.js. Any guidance on this matter would be highly appreciated. Thank you in advance for your assistance!

Answer №1

For me, this method is working perfectly. If you try a console.log(BlenderCam), you'll be able to see your camera represented as a JSON object (using Firefox's built-in developer tools).

In my case, I utilized my own JSON data exported from Blender:

{
"textures":[],
"images":[],
"metadata":{
    "type":"Object",
    "sourceFile":"scene.blend",
    "version":4.4,
    "generator":"io_three"
},
"materials":[],
"object":{
    "type":"Scene",
    "matrix":[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],
    "uuid":"E0F9A974-447E-4CEA-B027-B6456FBBC425",
    "children":[{
        "name":"Camera",
        "uuid":"BC347E50-122A-46CD-940F-16E2B12CFDFE",
        "matrix":[1,3.25841e-07,1.00656e-07,0,-3.3837e-07,0.984808,0.173648,0,-4.25448e-08,-0.173648,0.984808,0,-4.37114e-06,-6.61029,49.9782,1],
        "visible":true,
        "type":"OrthographicCamera",
        "far":5000,
        "near":1,
        "left":-43.9843,
        "right":43.9843,
        "top":25.8771,
        "bottom":-25.8771
    },{
        "name":"Plane",
        "uuid":"C0EB7E6E-9C9E-4AD1-917F-6FF31A1B956E",
        "matrix":[-1,0,0,0,0,0,1,0,0,1,0,0,0,4.48201,-5.35856,1],
        "visible":true,
        "type":"Mesh",
        "castShadow":true,
        "receiveShadow":true,
        "geometry":"88218586-75A2-43BA-96E7-F6C70558CD1C"
    },{
        "name":"Plane.001",
        "uuid":"F5255EE0-8CAA-45C9-9DFA-395B8AFDE8C7",
        "matrix":[-0.1541,0.0340519,0.683852,0,0.667744,-0.147553,0.157817,0,0.151432,0.685295,1.05509e-08,0,-14.3255,-6.97558,-0.000347044,1],
        "visible":true,
        "type":"Mesh",
        "castShadow":true,
        "receiveShadow":true,
        "geometry":"C1549503-40B8-495F-874B-9C58CFEA65BB"
    }]
},
"geometries":[{
    "type":"Geometry",
    "data":{

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Converting a JSON string into a dynamic object through serialization

Apologies if my terminology is incorrect, but I am trying to achieve the following: Retrieve a JSON string from a URL Parse this string into an object Usually this would be simple for me as the JSON objects I work with have static names. However, the ch ...

How can one activate a function using jQuery and then proceed to activate another function once the first function has finished executing?

My current assignment involves implementing a task using jquery. Upon loading the page, the initial jquery function will be executed. After the successful completion of the first function, it should seamlessly transition to the next function on its own. ...

Exploring the Array Relationship within Props

I've successfully passed props from a parent component to its child. Note: Within the list of objects received by the CardList component as props, there is an array called langs that looks like this: langs: ["React", "html", "CSS"]. import React fro ...

What exactly do `dispatch` and `commit` represent in vuex?

Recently, I came across a Typescript project in Vue.js with a Vuex store that had the following code: async getUserProfile ({ dispatch, commit }: any) {} I found working with any cumbersome as it doesn't provide helpful autocomplete features in the ...

Can one attempt to change the data type while working with Rust's serde JSON?

I am currently facing an issue with using rust serde json to deserialize a JSON string. Due to limitations in front-end JavaScript handling of the i64 data type, the server side is converting the i64 to a string by default. This default action causes the R ...

Unable to retrieve data for the initial keystroke in jQuery autocomplete

I'm currently working on setting up jQuery autocomplete with a specific method involving a separate source function and an intermediary variable for data storage. My main goal right now is to successfully pass the data to the source part of the autoCo ...

Generating JSON output in PHP

I've been struggling to figure out why I can extract some parts of the JSON data but not others... Essentially, I am retrieving JSON from a URL (). In my PHP code (using Laravel5), I have the following: $url = 'https://public-crest.eveonline.co ...

Increasing the size of my div with every refresh interval due to JQuery AJAX div reload

I'm currently working on a project with Laravel and Voyager, and I am facing an issue where I need to reload data from the database on one page without manually refreshing the whole page. To achieve this, I have used jQuery/AJAX. The data reload works ...

SpineJS combined with Express

Are there any recommended tutorials or case studies showcasing the integration of SpineJS and Express in applications? I have experimented with both technologies, but am currently facing some challenges. My backend is set up to run Express by using coffee ...

I have the capability to capture HTTPS requests with Jmeter, however encountering difficulties when trying to input the data

When using Jmeter's proxy settings to record HTTPS requests and enabling the "Use this Proxy for all protocols," I encounter an issue. After logging into the application and entering a value in the search field, upon clicking on search, the system ret ...

Tips on introducing a random pattern into a Javascript gaming experience

To kick off the game, let's generate a pattern randomly. Follow these steps: -Include a function that generates the pattern. (Hint: JavaScript's Math.random function might come in handy) -Invoke your new function from the startGame function I&a ...

Broadcast a public message with the sender specified using Socket.io

As I dive into using socket.io, I've managed to send private messages successfully. However, I'm now curious about how to send a message to all users at once. In the code snippet below (used for testing purposes), the first user receives a privat ...

Using app.use in Express/node.js for routing causes the client to experience excessive delays

After setting up the server-side code in app.js, I encountered an issue: console.log("Server started. If you're reading this then your computer is still alive."); //Unnecessary test command to make sure everything works. var express = require("expre ...

Setting up the Materialize autocomplete feature by fetching data from an API using AJAX and jQuery

Welcome everyone, I have integrated materialize.css into my PHP application I am trying to initialize the auto-complete data using an API call. The .autocomplete () function initializes the data using a JSON array called " data ":, which I ret ...

What is the optimal location to implement the sin() function in plane geometry in order to generate a particle wave using three.js?

Check out this picture! I've been experimenting with creating a particle wave effect in three.js and I'm feeling a bit stuck. Does anyone have any ideas on how I could achieve this? Here's the code I've been working on: // Geometry, Ma ...

Deactivate an element completely, preventing any interaction with it, including disabling links that trigger other JavaScript functions

<li class=" active"> <input class="check-shopby" type="checkbox" onclick="$(this).next().click()" checked="checked"> <a class="checked" href="http://mysite/~dev433/products//cooking/cook-tops.html" onclick="$(this).previous().checked = f ...

Angular: Leveraging Nested Callbacks for Efficient HTTP Queries

I'm currently facing an issue with structured English. GET HTTP Resource FOR every data item received do GET another HTTP Resource Alter the original data from the outer loop with data from the inner GET RETURN altered data How can ...

Encountering problems due to the addition of an event listener on my webpage

Currently working on a nodejs app utilizing react and encountering an issue when running yarn start. The error message "TypeError: btn_bmi.addEventListener is not a function" keeps popping up. This setup has worked for me before but now I'm unsure abo ...

Guide to transforming a complex Json array into a List object in an Android application

I have a JSON string that looks like the one below, and I need to convert it into a List object in an Android application. [ { "name":"Name1", "images":["http://abc.jpg", "http://aaa.jpg"] }, { "name": "Name2", "images":["dads", "dsa ...

Problem encountered with JSON web service response compression triggered by JBOSS 4.2.3

Implemented Axis2 JSON web services in JBOSS Appserver and set up response compression in the connector (in the server.xml file). Successfully tested the service using a Java client and received the compressed (GZIP) response, monitored through a TCP/IP mo ...