Trying to assign a value to a property that is not defined

I'm attempting to initiate the loading and exhibition of a .stl file through three.js by implementing the following code:

var stlLoader = new THREE.STLLoader();
stlLoader.load('assets/Cap.stl', function (object){
    object.position.y = - 100;  
    scene.add(object);
    console.log("Object inserted.");  
    fitCameraToObject(camera,object,2,controls);
    controls.update();
    animate();
},
function ( xhr ) {
    console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
},
function (err) 
{
    console.error(err);
} 
);

(Lines 142-158)

However, when I load my webpage, my console shows this error:

webGLLoader.js:156 TypeError: Cannot set property 'y' of undefined
    at webGLLoader.js:144
    at Object.onLoad (STLLoader.js:80)
    at XMLHttpRequest.<anonymous> (three.js:35998)
(anonymous) @ webGLLoader.js:156
(anonymous) @ STLLoader.js:86
(anonymous) @ three.js:35998
load (async)
load @ three.js:35976
load @ STLLoader.js:76
(anonymous) @ webGLLoader.js:143

It's puzzling me as to why this issue is occurring, considering I can successfully adjust an object's position using the same method with other loaders.

javascriptthree.js

Answer №1

An STL file consists of geometric data only. The STLLoader function in Three.js returns a BufferGeometry object. Unlike a BufferGeometry, a Mesh does have a position property which can be utilized.

// Using three.js version r113

let loader = new THREE.STLLoader();
loader.load("./file.stl", function(geo){
  let mesh = new THREE.Mesh(geo, new THREE.MeshBasicMaterial({color:"red"}) );
  mesh .position.y = -100;
  scene.add(mesh);
});

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

Using multiple main.js files with RequireJs in Play Framework 2.1.1 Java: A step-by-step guide

While working on a single-page app with AngularJs + RequireJs in Play Framework 2.1.1, I encountered an issue regarding the structure of my application. The project consists of two main sections - an admin dashboard and a normal website - both housed withi ...

javascriptangularjsrequirejsminifyplayframework-2.1

Discover the Google Chrome Extension that allows you to easily obtain JSON data from your

Here is the structure I have: And below is my manifest.json: { "manifest_version": 2, "name": "Doktor-MD", "description": "Share links on Doktor-MD through the browser.", "version": "1.0", "permissions": [ "http://www.google.com/" ], "browser_action": ...

javascriptjsongoogle-chromegoogle-chrome-extension

Positioning JQuery sliders

I've been working on a jQuery slider for my header, but I'm encountering an issue where the previous image drops down to the next container instead of staying in place and transitioning smoothly. It seems like there might be an error in my HTML/C ...

javascriptjqueryhtmlcss

Implement a function that runs upon Page Load using Javascript

Here is some Javascript code that loads a map with different regions. When you hover or click on a country, additional information about that country is displayed on the right side of the map. I would like to have a random country already displaying infor ...

javascriptjquerycsspageloadregion

Struggling to implement a Datepicker in the date column of a table created using HTML and JavaScript

I am encountering an issue while creating a table in html and javascript. I am unable to use a Datepicker in the date column when inserting a new row, even though it works fine when using in normal html code. Below is the javascript function: //Script fo ...

javascriptphpjqueryhtmlcss

Use jQuery's .each method to reiterate through only the initial 5 elements

Is there a way to loop through just the initial 5 elements using jQuery's each method? $(".kltat").each(function() { // Restrict this to only the first five elements of the .kltat class } ...

javascriptjqueryeach

Session Redirect Error in Express.js

Encountering an error consistently when running my code with the pseudocode provided below (Just to clarify, my code is built on the react-redux-universal-hot-example) Error: Can't set headers after they are sent. [2] at ServerResponse.OutgoingMe ...

javascriptnode.jssessionexpressfrontend

Unexpected Issues with the Ant Design Sidebar Layout Demo

My React webapp is utilizing the Ant design component framework version 4. I attempted to integrate this example from the Antd documentation into my webapp: https://codesandbox.io/s/ymspt However, when I implemented the code in my webapp, the result didn ...

javascriptcssreactjsantd

Setting a default value for Autocomplete in MaterialUI and React.js

Is there a way to set a default value for an Autocomplete TextField component from Material UI in React.js? I want to load a pre-populated value from the user's profile that can then be changed by selecting another option from a list. Check out my co ...

javascriptreactjsmaterial-ui

Vue-Router functions only on specific routes

While my vue-router correctly routes the URL for all menu buttons, it's not displaying each Vue component properly. You can see a demonstration here. Here is a snippet of my HTML (using Vuefy) <div class="navbar-start"> <a ...

javascriptcssvue.jsvuejs2vue-router

What is the proper way to change this JavaScript variable into JSON format?

I have a JavaScript variable containing data that I need to convert into valid JSON format for easier parsing. The current variable structure is as follows: { "machines": [{ "category": "Category 1", "items": [{ "name": "Te ...

javascriptjson

Incorrect Reactjs installation technique

When I try to run create-react-app on my Windows PC, only dependencies are being installed with no folders other than node_modules. Even when using Yarn, I haven't been able to progress further. Please assist and thank you in advance for any help. Thi ...

javascriptnode.jsreactjs

The addScript feature seems to be experiencing difficulties upon the initial website load

Currently, I am utilizing the jquery.flexslider plugin and it is performing well. However, I have a specific requirement where I do not want to load the plugin for screens that are smaller than 600px. After experimenting with various scripts, I have final ...

javascriptjqueryhtml

JSON response is not being successfully passed in PHP Ajax form validation

I've been struggling to solve my code for the past few days but haven't had any success. I'm attempting to validate my login form using AJAX, however, it seems like there's an issue with my Jquery AJAX script. Every time I try, the con ...

javascriptphpjqueryjsonajax

What could be causing the Firebase email verification to result in a 400 error?

I've been struggling to implement email verification in my React website. Every time I try to use the sendSignInLinkToEmail function, I keep encountering this error: XHRPOSThttps://identitytoolkit.googleapis.com/v1/accounts:sendOobCode?key=XXXXXXXXXXX ...

javascriptreactjsjsonfirebasefirebase-authentication

Switching Json to Typescript

I have a file named items.ts with the following interface: export interface item{ Name: string; IsSystemItem: string; ConfiguredSegments: ConfiguredSegments; } export interface ConfiguredSegments { LiveA: LiveA; } export interface LiveA { Weig ...

javascriptnode.jsangulartypescript

Can you explain the distinction between String[] and [String] in TypeScript?

Can you explain the distinction between String[] and [String] in typescript? Which option would be more advantageous to use? ...

javascriptarraystypescript

Customizing the default settings of a d3 funnel chart

I recently used the following link to create a funnel chart using D3: jakezatecky/d3-funnel Everything was working perfectly. However, I wanted to adjust the block heights in proportion to their weight as mentioned in the tutorial by changing the D3 defau ...

javascriptd3.js

Preventing child element clicks in Angular 5: A helpful guide

I have checked numerous references, but unfortunately haven't received any responses. That's why I have turned to this platform in hopes of improving my code with your assistance. I need to add an element with text on click. Currently, it works ...

javascriptangular

obtaining Json format from an array: a comprehensive guide

Hey there, I am looking to convert my array into JSON format. Currently, my array structure looks like this: Array[0] abc: Array[1] 0: "English" length: 1 abc1: Array[2] 0: "English" 1: "Urdu" length: 2 Here is the structure that I want in JSON using Jav ...

javascriptarraysjson