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

Unable to make anchor tag inside button effectively collapse another div

Ordering and displaying data with AngularJS

Tips for managing image uploads while incorporating pre-set error detection into a form

How can you effectively blend Vue/Angular with other JavaScript resources to enhance your development process?

I'd like to be able to click on the navbar and have the text color change using tailwind CSS

Iterating through form elements for validation using jQuery

Attempting to transfer elements from an iteration into a separate array

Does Vuex have a feature similar to mapDispatchToProps in Redux for managing actions and state?

"Using version 4.2.6 of NodeJS, create a constructor that takes a literal object as a

The hydration error in next js is causing this code to malfunction

Creating an Ajax Post request for API invocation

Display intricate header and preview in a printed datatable

Choosing specific anchors based on their corresponding div ids

Experience the powerful combination of Nuxt 3 paired with TailwindCSS and heroicons. Elevate your

Executing JavaScript code within ASP.NET Visual Basic

The timing of the JavaScript dialog with the AJAX call is off-kilter

Remove a div using JavaScript

Utilizing the split function within an ngIf statement in Angular

issue with AngularJS model not initially binding to select dropdown

Troubleshooting problems with scrolling on JavaScript in Edge, Opera, and Chrome