Snippet:
let loader = new THREE.TextureLoader();
let texture = loader.load('resources/earth.png');
let geometry = new THREE.SphereGeometry( 3.7, 32, 32 );
let material = new THREE.MeshBasicMaterial( { map: texture });
let sphere = new THREE.Mesh(geometry, material);
sphere.position.y=4;
scene.add(sphere);
Outcome: dark sphere
Anticipated outcome: textured sphere
I have attempted various image formats but the results remained consistent.
Are you utilizing a render loop? If your rendering is only occurring once, the issue may be due to the texture not finishing loading. Textures are loaded asynchronously, so you must continue rendering until the sphere is drawn with the texture after it has fully loaded, or you can wait for the texture to load by implementing a callback in the loader.
If I were to execute your code as-is, it would result in a black sphere being displayed.
<canvas id="c"></canvas>
<script type="module">
import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r115/build/three.module.js';
function main() {
const scene = new THREE.Scene();
var loader = new THREE.TextureLoader();
var texture = loader.load('https://i.imgur.com/eCpD7bM.jpg');
var geometry = new THREE.SphereGeometry(3.7, 32, 32);
var material = new THREE.MeshBasicMaterial({ map: texture });
var sphere = new THREE.Mesh(geometry, material);
sphere.position.y=4;
scene.add(sphere);
const canvas = document.querySelector('#c');
const renderer = new THREE.WebGLRenderer({canvas});
const fov = 75;
const aspect = 2; // the canvas default
const near = 0.1;
const far = 500;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(0, 4, 8);
scene.background = new THREE.Color('red');
renderer.render(scene, camera);
}
main();
</script>However, if I incorporate a requestAnimationFrame loop in the rendering process, the texture will eventually appear on the sphere.
<canvas id="c"></canvas>
<script type="module">
import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r115/build/three.module.js';
function main() {
const scene = new THREE.Scene();
var loader = new THREE.TextureLoader();
var texture = loader.load('https://i.imgur.com/eCpD7bM.jpg');
var geometry = new THREE.SphereGeometry(3.7, 32, 32);
var material = new THREE.MeshBasicMaterial({ map: texture });
var sphere = new THREE.Mesh(geometry, material);
sphere.position.y=4;
scene.add(sphere);
const canvas = document.querySelector('#c');
const renderer = new THREE.WebGLRenderer({canvas});
const fov = 75;
const aspect = 2; // the canvas default
const near = 0.1;
const far = 500;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(0, 4, 8);
scene.background = new THREE.Color('red');
function render() {
renderer.render(scene, camera);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
}
main();
</script>If you are still unable to view the texture locally, then, as mentioned by others, loading textures in WebGL requires the use of a web server. You can use a simple one.
Additionally, familiarize yourself with the JavaScript console to identify any error messages.
I'm attempting to enable inline editing by cell, rather than by row, when double-clicking. Although the initial setup is working, it's not updating the record as expected - the "SaveCustomer" call to the controller isn't triggered. Can anyon ...
My goal is to create two button groups. When a button in the second group is clicked, I want to dynamically add a new button to the first group with the same label as the clicked button. Using var name = this.textContent works well when the click handler ...
I have developed a basic ToDo List App. The functionality to display tasks from the input form is working correctly, but I am facing issues with deleting tasks when the Delete button is clicked. export class TaskList extends Component { constructor(pr ...
After a user selects an option from my dropdown list, I want to create a new element. However, the result I'm getting is not what I expected. The current outcome looks like this: As you can see, the link 'remove' gets incremented every time ...
I'm currently working on creating a basic login form for users to access a website, where I plan to store their session data in a session cookie. The express-session documentation provides the following example for setting it up: app.post('/login ...
Currently, I am delving into the world of ThreeJS and grappling with some basic principles. Let's say there is a camera positioned in 3D space, focusing on a specific target (specified in the camera.target property). The coordinates of the camera are ...
I am currently utilizing a .load() script to update the content on a webpage in order to navigate through the site. This is resulting in URLs such as: www.123.com/front/#index www.123.com/front/#about www.123.com/front/#contact However, I am encountering ...
Issue: I have a container set to 100vh, but as the screen size changes, I want the font size to adjust accordingly and always stay within the container without overflowing. Thoughts: While I understand this can be achieved easily with @media CSS rules, I& ...
https://i.sstatic.net/26XrD.png Hey there, I've been attempting to retrieve data from a database using AJAX posts but I'm facing some issues. The first column's data is splitting into other columns (member names are appearing in the image f ...
I've been following the Bonanza.com Bonapitit documentation and managed to make their Python fetchToken script work. However, I'm now attempting to replicate this script in Node.js for my ExpressJS backend instead of using Python. Here's ho ...
I am working on an ASP.NET web form that contains two input boxes. The requirement is that when the onkeypress event occurs in box A, a tooltip should pop up over box B. To achieve this functionality, I have included a JavaScript function in the onkeypres ...
Imagine there are 10 divs on the page styled as squares, collectively known as the home page. Among these 10: 3 divs belong to the .event1 class, 5 divs belong to the .event2 class, and 2 divs belong to the .event3 class. <div class="boxes event1"> ...
As a developer skilled in d3, I am navigating the world of VEGA charts and seeking guidance on how to incorporate an image in a tooltip. Do you have any suggestions for me? For example, considering this particular scenario: If we assume there is an addit ...
My current project involves utilizing Mailchimp to integrate a subscribe form onto my website, which includes nearly 40 interest groups as checkboxes. To showcase the form in a popup upon clicking, I have implemented jQuery Modal for this purpose. Howeve ...
I've utilized e.preventDefault() previously to stop a click event, but I'm struggling to understand why it's not functioning in this particular case. I've assigned all anchor tags in a column a classname, then obtained references to the ...
<hmtl> <head> <!--<script src='main.js'></script>--> </head> <body> <canvas id='myCanvas'> </canvas> <script> function shape(x,y){ this.x=x; this.y=y; var canvas = document.get ...
I am in the process of developing my own lorem ipsum application and keen on maintaining clean code by storing my word bank in separate files. How can I retrieve an array stored in a different JavaScript file? Rather than manually inputting harry = ["", "" ...
Hey everyone, I'm currently in the process of developing a mobile application using phonegap. I'm facing an issue where I want to disable the functionality of the back button from navigating to the previous page. I simply want it to do nothing or ...
I am currently in the process of developing a registry system using node.js and HTML. However, I have encountered an issue where my HTML page is rendered by node.js, but when trying to call it back to the node.js file, it appears that the JS file cannot be ...
I am in search of a JavaScript framework that offers the following features: MV* Well-structured HTML file as template Fast rendering (possibly using virtual DOM) Ability to combine and be compatible with other plugins or libraries Edit on tablet IDE app ...