Struggling to locate images in Three.js

Question

Struggling to locate images in Three.js

I'm facing a challenge with my Vue Cli app where I am attempting to use Three.js for rendering 3D objects within it.

The issue arises when I attempt to load an image to utilize as a texture.

let scene = new Three.Scene();

const spaceTexture = new Three.TextureLoader().load(
  "@/assets/images/space-background.jpg"
);
scene.background = spaceTexture;

What puzzles me is that it doesn't seem to be an import or image problem since I can successfully add it to the DOM:

<template>
  <div id="container"></div>
  <img src="@/assets/images/space-background.jpg" />
</template>

https://i.stack.imgur.com/nypz0.png

I'm at a loss on how to proceed, as I have tried various types of paths without success. Any suggestions would be greatly appreciated.

javascript vue.js three.js

Answer 1

Answer №1

Incorporating the require keyword into your load method can greatly enhance its functionality:

<template>
  <div>Greetings</div>
</template>
<script setup>
import * as THREE from "three";
const scene = new THREE.Scene();
const spaceTexture = new THREE.TextureLoader().load(
  require("@/assets/img/space.jpeg")
);
scene.background = spaceTexture;
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

function animate() {
  requestAnimationFrame(animate);

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
}

animate();
</script>

This segment of code works effectively in achieving the desired outcome

const spaceTexture = new THREE.TextureLoader().load(
  require("@/assets/img/space.jpeg")
);

Answer 2

Incorporating the require keyword into your load method can greatly enhance its functionality:

<template>
  <div>Greetings</div>
</template>
<script setup>
import * as THREE from "three";
const scene = new THREE.Scene();
const spaceTexture = new THREE.TextureLoader().load(
  require("@/assets/img/space.jpeg")
);
scene.background = spaceTexture;
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

function animate() {
  requestAnimationFrame(animate);

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
}

animate();
</script>

This segment of code works effectively in achieving the desired outcome

const spaceTexture = new THREE.TextureLoader().load(
  require("@/assets/img/space.jpeg")
);

Struggling to locate images in Three.js

Answer №1

Similar questions

Component fails to trigger @click handler

Have you ever encountered issues with Promises.all not functioning properly within your vuex store?

Mapping the Way: Innovative Controls for Navigation

Controlling the angular bootstrap modal form with ease

Ways to attribute a numeric worth to a choice in a JavaScript form

The fitBounds() method in Google Maps API V3 is extremely helpful for adjusting

In Vue, the concept of using the debounce method is not clearly defined

Working with JSON in AJAX with Javascript and C# to handle array data

Leveraging the power of the vuejs plugin within the main.js script

Website automation can be simplified by utilizing the Webdriver.io pageObject pattern, which allows for element selectors

What is the best way to execute multiple Protractor test suites simultaneously?

Nuxt.js has exceeded the maximum call stack size

Unable to launch React Native project on emulator now

Nested Promises in Angular's $q Library

Integrating a fresh element into the carousel structure will automatically generate a new row within Angular

Guidance on toggling elements visibility using Session Service in AngularJS

The D3js visualization is failing to display properly for the user, with the D3 source code residing on the server

Expo BarCodeScanner becomes unresponsive (specifically, the camera) upon exiting the application

Automating testing with JavaScript and Selenium WebDriver

Unspecified tag name attribute in Vue that can be accessed in the browser