Adding an object to a scene in Three.js

I've been experimenting with a code example I found online and my goal is to incorporate a textured cube into the project while specifying its position. However, despite my efforts, the cube doesn't seem to be showing up. Here's what I have attempted so far:

var frametexture = new THREE.ImageUtils.loadTexture( 'https://threejs.org/examples/textures/crate.gif' );
var artwork = new THREE.BoxBufferGeometry( 200, 200, 20 );
var material = new THREE.MeshBasicMaterial( { map: frametexture } );
artframe = new THREE.Mesh( artwork, frametexture );
scene.add( artframe );
artwork.scale( - 1, 1, 1 );

You can view my code on JSFIDDLE

javascriptthree.js

Answer №1

var frametexture = new THREE.ImageUtils.loadTexture( 'https://example.com/textures/image.gif' );

Instead of 

var frametexture = THREE.ImageUtils.loadTexture( 'https://example.com/textures/image.gif' );

and 

artframe = new THREE.Mesh( artwork, frametexture );

should be 

artframe = new THREE.Mesh( artwork, material);

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

Having trouble with an Ajax request in jQuery

Need some help with the code below - I can't seem to get the success or error event to fire. Even though the server returns a 200 OK response with the required data. Any assistance would be greatly appreciated! $('body').on('click&apos ...

javascriptjqueryajaxjquery-ui

Utilizing object properties to dynamically update components in VueJS

Are you familiar with dynamically changing a component using object props? App.vue <template> <div id="app"> <component :is="current['test'].target.name"> </component> <input type="bu ...

javascriptvue.jsvuejs2

What is the syntax for implementing a nested for loop in JavaScript within this particular scenario?

var entries = [ { "item": "something", "steps": [{ "node": {"name": "test0"}, "status": {"name": "test"}, "time": {"name": "test"} },{ "node": {"name": "test1"}, ...

javascriptvue.js

Determine if a specific value is present in an array of objects using AngularJS

var arr = [ { id:1}, {id:2} ]; var obj = {id:1}; var result = arr.indexOf(obj.id) == -1; console.log(result); I am trying to determine if obj.id exists in the array arr[]. Please note: arr[] is an array of objects ...

javascriptangularjs

Unpredictable order of replies retrieved using $http.get

I am struggling to create a function that sends multiple requests to the server based on the number of Ids in the idArray. The issue I am encountering is that the data being pushed into the dataArray does not align with the corresponding Ids of the idArr ...

javascriptangularjsangularjs-http

Calculate the sum of a specific column in an HTML table using JavaScript after

I have a function called CalColumnHistDEPOSITO() that I use to sum a table column as it loads from the server side into my HTML page. However, when I apply a filter, it continues to sum the entire table ignoring the filter. (function() { 'use stric ...

javascripthtml

Clicking on a row in the Gridview should trigger the expansion or collapse of the Nested

My current issue involves a nested GridView setup like this: <asp:GridView ID="gvParent" runat="server" DataKeyNames="id"> <Columns> <asp:TemplateField> <ItemTemplate> <asp:GridView ID="gv ...

javascriptc#jqueryasp.netgridview

There was a TweenJS import issue: Unable to assign to a read-only property 'exports' of object '#<Object>'

Combining NuxtJS and ThreeJS, I encountered an issue. Upon importing TWEEN, using the following code: import { TWEEN } from 'three/examples/jsm/libs/tween.module.min.js' An error occurred: Cannot assign to read only property 'exports&apos ...

webpackthree.jsnuxt.jstween.js

Display a photo transitioning from black and white to color in a loading fashion, moving from left to right

Is there a way to enhance the clarity of the question's title? I have an interesting effect where text starts off in grey color and then transitions to black using keyframes in CSS with the animate property. I'm curious about how I can achieve ...

javascriptjqueryhtmlcss

We're sorry, but the server couldn't locate the URL you were looking for in React

I recently uploaded my React.js website to Strato, but I encountered an error. When I try to access a different page like /status, I get a "Not Found The requested URL was not found on this server" error message. The homepage works fine, but the route page ...

javascriptreactjs

What is the best way to turn off default CSS styling in KendoUI?

I am facing an issue in my application where I am using global CSS definitions for "INPUT", "SELECT", and other elements. The problem arises when I try to incorporate KendoUI widgets, as they override my default CSS styles. For instance, my CSS code looks ...

javascriptjqueryhtmlcsskendo-ui

I'm currently working on developing a chat system, but I'm facing an issue where I am unable to send multiple messages consecutively. It seems like there is a problem with the form

My chat application is not allowing me to post multiple messages. Here is the code snippet responsible for sending messages: window.typing = false; var posted = 0; var canPost = 1; var donotrefresh = 0; document.forms['send'].addEventListener(& ...

javascriptjqueryajaxchat

Changing the name of '_next' to 'next' within the output folder: NextJS

While developing my NextJS chrome extension, I encountered an issue when trying to 'load unpacked' extension. An error message popped up stating that "Cannot load extension with file or directory name _next. Filenames starting with _ are reserved ...

javascriptreactjsnext.js

What is the reason this straightforward regex functions perfectly in all cases, except for when applied to the html5

This particular HTML input turns red to signify that the pattern has not matched when the value in the input field is "1". var newInput = document.createElement ('input'); newInput.pattern = '^\d+\.?\d*$'; document.getEl ...

javascripthtml

"Exploring the versatility of NextJS with dynamic route parameters

Can NextJS be configured to handle dynamic routes that match both /country and /country/city, while excluding matches like /country/city/whatever_content_here? The goal is to display the same content for either of the specified routes, regardless of whethe ...

javascriptreactjsroutesnext.js

Modify the width of the progress bar in Bootstrap using AngularJS

I'm new to AngularJS and I'm attempting to dynamically update the width of a progress bar based on changes in my controller. Here is what I currently have: <span id="percentage">$ {{getTotal()}} ({{getPercentage()}}%)</span> <div ...

javascripthtmlcssangularjstwitter-bootstrap

JavaScript/Typescript is throwing an error because it is unable to access the property 'username' of an undefined object

In my project, I am attempting to compile a list of Profile objects and then extract specific elements from each object in the list. To accomplish this, I have defined a public interface named Profile, imported it into my component, and instantiated a new ...

javascriptangulartypescript

Having trouble with the $.get function in AJAX with Rails 4? It seems

After working with Rails for a few years, I decided to dip my toes into the world of AJAX. With a Rails 4 app in hand, I'm currently testing out some functions. My end goal is to reload a partial on the edit page located at app/views/stories/edit.html ...

javascriptjqueryajaxruby-on-rails-4get

The thickness of the line on the Google line chart is starting to decrease

Currently, I am utilizing a Google line chart in my application. However, I have noticed that for the first two data points, the lineWidth is thick, while for the last two points it is very thin. How can I resolve this issue and ensure that the lineWidth r ...

javascriptjquerychartsgoogle-visualization

Is it possible to dynamically update the contents of a modal body and modal footer using

I'm dealing with a modal that dynamically populates two sections: modal-body and modal-footer. However, the issue is that only the content of modal-body changes dynamically while modal-footer remains static. Here's an example of the HTML code (w ...

javascriptjqueryhtml