Unable to render Blender model in threeJS scene due to undefined condition

I've tried following solutions from Stack Overflow to resolve this issue, but I'm still unable to load external objects (Blender).

Essentially, I exported it as a ThreeJS JSON file, here is the content of my JSON file:

{
    "textures":[],
    "animations":[{
        "fps":24,
        "tracks":[],
        "name":"default"
    }],
    "geometries":[{
        "materials":[{
            "colorEmissive":[0,0,0],
            "DbgName":"Material.113",
            "DbgIndex":0,
            "shading":"phong",
            "specularCoef":50,
            "transparent":false,
            "visible":true,
            "blending":1,
            "depthWrite":true,
            "DbgColor":15658734,
            "doubleSided":false,
            "wireframe":false,
            "colorSpecular":[0.5,0.5,0.5],
            "opacity":1,
            "depthTest":true,
            "colorDiffuse":[0.0396404,0.0396404,0.0396404]
        },{
            "colorEmissive":[0,0,0],
            "DbgName":"Material.112",
            "DbgIndex":1,
            "shading":"lambert",
            "transparent":false,
            "visible":true,
            "blending":1,
            "depthWrite":true,
            "DbgColor":15597568,
            "doubleSided":false,
            "wireframe":false,
            "opacity":1,
            "depthTest":true,
            "colorDiffuse":[0.8,0.443066,0.182712]
        },{
            "colorEmissive":[0,0,0],
            "DbgName":"Material.114",
            "DbgIndex":2,
            "shading":"phong",
            "specularCoef":50,
            "transparent":false,
            "visible":true,
            "blending":1,
            "depthWrite":true,
            "DbgColor":60928,
            "doubleSided":false,
            "wireframe":false,
            "colorSpecular":[0.5,0.5,0.5],
            "opacity":1,
            "depthTest":true,
            "colorDiffuse":[0.8,0.614231,0.407028]
        }],
        "data":{
            "uvs":[],
            "normals":[-0,0,1,-1,-0,0,1,-0,-0,-0,-1,0,-1,4.76837e-07,0,-1,-0,0,-2.38419e-07,-1,2.38419e-07,-2.38419e-07,-1,2.38419e-07,-2.38419e-07,-1,2.38419e-07 },
        "type":"Geometry",
        "uuid":"639CD2C2-56FB-4D8F-B53B-B8C3E040803C",
        "name":"Cube.111Geometry.4"
    }],
    ...

I've omitted some data in the normals array, but essentially I'm trying to load it as follows:

var objLoader = new THREE.ObjectLoader();
objLoader.load('assets/dama.json', function (geometry) {
  this.scene.add(geometry);
});

It locates the file but I encounter an error: Cannot read property 'scene' of undefined

Perhaps the issue lies in the export settings, but I've already switched from buffergeometry to geometry and checked the scene checkbox. What could I be missing? :S

javascriptjsonthree.jsblender

Answer №1

Uncertainty surrounds this issue. Nevertheless, you might want to consider the following approach:

let self = this;
let objectLoader = new THREE.ObjectLoader();
objectLoader.load('assets/dama.json', function (geometry) { 
    self.scene.add(geometry); 
});

Assuming that your scene is a property of an object, it is possible that you have referenced it as this.scene. The problem arises when using this inside the load function, as it will refer to THREE.ObjectLoader. To access the underlying object using this, consider creating a copy of it first.

If you are not utilizing an object to store the scene, simply replace scope.scene.add() and this.scene.add() with scene.add(geometry).

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

Is it possible to integrate the extension library of three.js (including OBJLoader, SceneUtils, etc.) with Angular 6?

Attempting to implement the below code, however, it is not functioning as expected. npm install --save three-obj-loader import * as ThreeObjLoader from 'three-obj-loader'; const OBJLoader = ThreeObjLoader(THREE); let loader = new OBJLoader(): ...

angularthree.jsangular6

The effectiveness of the javascript widget is hindered by the absence of the meta viewport tag,

As I work on creating a widget to appear at the bottom of webpages, I've encountered a styling issue. The widget's display varies based on whether the webpage includes a specified meta viewport tag or not. <meta name="viewport" content="width ...

javascriptjquerycsswidget

Enable hyperlink to open in a new browser tab after user clicks on button embedded inside an iFrame

<head> </head> <div> <iframe src="https://....."></iframe> </div> https://i.sstatic.net/dk21i.png I'm looking for a way to open the link in a new tab when clicking on this button. Currently, the page loads wi ...

javascripthtmlvue.js

One-page application featuring preloaded data from a backend API

Imagine building a single-page application that relies heavily on client-side interactions communicating with the server through API methods. When we land on the index page that displays all records from the database, we essentially make two initial requ ...

javascriptajaxjsonapi

Utilize Vue.js to transmit HTTP requests with specified headers and parameters

I'm trying to figure out how to create a LinkedIn login component, but I'm having trouble finding information about headers and parameters. Can someone help me understand how to send a GET or POST request with parameters and headers? Here's ...

javascriptvue.jsaxioslinkedin-api

Converting Vue HTML to PDF without relying on html2canvas functionality

My current challenge involves creating a PDF file from either HTML or Vue component. I have experimented with various libraries such as jsPDF, html2pdf, and vue-html2pdf, but it seems like they all rely on html2canvas, causing the UI to freeze for a few ...

javascriptreactjsvue.jspdfvuejs2

Oops! An error has occurred: The requested method 'val' cannot be called on an undefined object

I am struggling with this issue. This is the code that I am currently working on: http://jsfiddle.net/arunpjohny/Jfdbz/ $(function () { var lastQuery = null, lastResult = null, // new! autocomplete, processLocation = function ...

javascriptjquery

JavaScript issues in FireFox and Internet Explorer when using JQuery

I have developed a PHP GD image for generating captcha images, saved as image.php. Each time it creates a unique captcha image. Inside the signup.php file: <img alt="" src="image.php"> <input type="button" id="btn" value="cannot read captcha"&g ...

phpjavascriptjqueryajax

Unable to conceal an Ajax loading image that is dynamically inserted within my web application

I have been working on a project using asp.net web application, and within it, I am attempting to accomplish the following tasks: Calling 2 REST APIs Displaying an AJAX loading image Creating a list of the results Hiding the loading image Below is the c ...

javascriptjqueryasp.netajax

Saving iFrame as Image using Codemirror and html2canvas

Here are a few experiments I conducted with html2canvas: Fiddle 1 (Using html2canvas): Fiddle 2 (Using html2canvas without Codemirror): Fiddle 3 (Using html2canvas with Codemirror): Fiddle 4 (Using html2canvas with Codemirror): I recently wante ...

javascriptjqueryiframecodemirrorhtml2canvas

The message will not appear to indicate whether the room is valid or not

Take a look at this create_session.php application: Application Upon opening the application, you will encounter a CourseId textbox. Enter 'info101' in the textbox and click submit. You should see all the features listed below. Without entering ...

phpjavascriptjqueryajaxjson

Transform the CSV file into a JSON format, incorporating nested JSON structures for every distinct column

My CSV file consists of the following data: a b c d e f 1 3 6 11 16 21 1 4 7 12 16 21 2 3 8 13 18 23 2 4 9 14 18 23 2 5 10 15 18 23 I aim to convert this CSV data into JSON format as shown below: { {"a": ...

pythonjsonpandas

Tips for efficiently updating state in recompose by utilizing setTimeout?

Curious to learn more about recompose, my journey began with a basic component: const timer: React.SFC<MyProps | any> = ({ seconds }) => ( <span>{ seconds }</span> ); I wanted to find a way to pass the seconds prop using recompose, ...

javascriptreactjsrecompose

Utilizing HTML 5 Video and the src Attribute in Vue Components

I am facing an issue with loading an HTML 5 video dynamically on my page. I am using vue for this purpose and in my js controller, I set a variable containing the video path. Here is how I am trying to use the variable in my page: <video width="450" co ...

javascriptvue.js

What steps should be taken to fix the sinopia installation error?

While operating on redhat5.9, I encountered an exception related to 'make'. I am curious about what they are trying to create. It seems like it's related to JavaScript. [root@xxxx bin]# npm install -g sinopia --python=/usr/local/clo/ven/pyt ...

javascriptnode.jsnpmsinopia

Encountering Issues with File Uploads in Express.js with Multer

Currently, I am immersing myself in Node.js through the guidance of a book titled "Web Development with Nodejs and MongoDB." However, I have hit a roadblock when attempting to upload an image using Multer. The code snippet causing me trouble is as follows: ...

javascriptnode.jsmongodbexpressmulter

Exploring the variance in outcomes when directly accessing an AuthService state versus utilizing a function in a React AuthContext

I am currently working on creating an AuthContext, but I am encountering an issue with changing the state of a variable. Here is the code snippet: index.js import Head from "next/head"; import Image from "next/image"; import styles fro ...

javascriptreactjsreact-context

Generate a visually dynamic representation of a live website page

I'm curious if it's possible to create a login page similar to the one shown in this image, using HTML, CSS, and Javascript. Instead of a traditional background image, I want the background to display the actual layout of another website, such a ...

javascripthtmlcss

Error encountered when running the production build server for android in Meteor: TypeError - Unable to access property 'slice' of null

Here's a demo I'm working on: https://github.com/pc-magas/pupAndroidDemo I'm trying to build this demo for Android. I've already installed the Android SDK and configured the necessary environmental parameters. Following the instructio ...

javascriptandroidnode.jsmeteor

Breaking down a Fully Qualified Domain Name (FQDN) parameter into sections for easy storage in a variable within an ARM template

My current project involves creating an Azure ARM template to deploy multiple VMs into an existing Active Directory. In order to join the Active Directory, I am utilizing jsonaddomainextension. However, I need to specify a particular Organizational Unit (O ...

jsonazureazure-rm-template