What is the correct way to correctly import the Three.js OutlinePass jsm?

Transitioning from plain Javascript Threejs to the node version has presented me with an early roadblock.

OrbitControls seemed to work fine, but as soon as I try to import any postprocessing, I encounter the following error:

https://i.sstatic.net/d7yja.png

The problematic code snippet is as follows:

import * as THREE from 'three';
import {OutlinePass} from 'three/examples/jsm/postprocessing/OutlinePass';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls';
import Stats from 'three/examples/jsm/libs/stats.module';

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.z = 2;

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

var outline = new OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera);

As you can see, I haven't utilized the OutlinePass functionality yet due to my struggles in importing it. The same issue arises when attempting to import EffectsComposer in a similar fashion. Despite intellisense suggesting correct directory paths, the imports refuse to cooperate. Is there something amiss in my approach?

Answer №1

When accessing a website from a local server, using ES6 imports directly may not work. You'll need a build tool to bundle your app and its dependencies into a single build file that can be imported in index.html.

Consider starting with a project like three-jsm which provides an example of a basic build setup.

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

Ways to store a variable in a cookie's value

Is it possible to assign the email variable to the cookie value? The current method I am using does not seem to work with "$email". The $email variable is present in the Newsletter-signup.php file located in the \php\ directory. <?php i ...

Switch out a character with its corresponding position in the alphabet

Starting out, this task seemed simple to me. However, every time I attempt to run the code on codewars, I keep getting an empty array. I'm reaching out in hopes that you can help me pinpoint the issue. function alphabetPosition(text) { text.split ...

Utilizing Javascript to Open a New Tab from Drupal

I'm attempting to trigger the opening of a new tab when a specific menu link is clicked within a Drupal website. My initial approach was to incorporate JavaScript directly into the content of the page, but unfortunately this method has not been succes ...

Exploring the utilization of const within a try-catch block

Revise 2024: Solution: Utilizing the 'var' keyword helps resolve the issue at hand 'const' is a variable defined within a block, so when attempting to scrutinize the code try{ const foo = bar[global.name].foofoo[global.name2]; }ca ...

Using conditional rendering to compare the outcome of an asynchronous function within v-if condition

I have a Vue component for a sidebar with the following template: Vue.component('navigation',{ template:` <ul class="nav"> <li v-if="checkIfUserIsAdmin() == true" id="adminMenu"></li> <li id="userMenu">& ...

Is it possible to embed HTML code within JavaScript strings?

Is my approach to inserting HTML into a JavaScript string correct? In particular, I want to insert an HTML link into a div tag using JavaScript. Here is the HTML: <div id="mydivtag"></div> And here is the JavaScript code: document.g ...

Restrict ng-repeat while exploring the entire array

Having an issue with the search functionality on my website. I am using a ng-init function called getAllStudents to fetch all student data from the database. Later, I am trying to limit the display to only 10 students in the ng-repeat directive. However, ...

How to prevent a directory from being copied in webpack within Vue CLI

Currently, I am working on a Vue3 project created using Vue CLI 5.0.1 In my setup, there is a public folder that contains static assets necessary for serving the application. However, this folder is quite heavy, around 1GB in size. Whenever I run the npm ...

Divide the string into sections and provide an object as output

I encountered a roadblock while working on a tool. My task involves accessing the stylesheet object of a website and specifically retrieving the "CSSFontFaceRule". I managed to accomplish this, but the output in my returned object is a lengthy string. I a ...

Optimal method for updating a state property using React Hooks

If I define my React state using hooks like this: const items = [{name: 'Jack', age: 1},{name: 'Bill', age: 2},{name: 'Jason', age: 4}]; const [content, setContent] = useState<{name: string, age: number}[]>(items); Wh ...

Tips for ensuring the safety of your AJAX requests when using PHP and jQuery

Identifying the Challenge Lately, I have been exploring various AJAX methods to send data to a server for processing and storage in a MySQL database. The backend script that handles the AJAX request, api.php, is equipped with PHP's PDO prepared state ...

Utilizing the jQuery index for organizing JSON keys

Recently, I came across an interesting issue with a jQuery event handler in my code. When clicked, this specific event creates a JavaScript object based on a list of favorite links: $('#saveFavorites').on('click', function(){ a ...

Implementing user profile picture display in express.js: A step-by-step guide

I'm having trouble displaying the profile picture uploaded by users or employees in my application. Although the picture uploads successfully, it doesn't show up and gives an error when I try to redirect to the page. Cannot read property &ap ...

What is the best way to change a string that represents an array into an actual array?

Experimenting with something new... Imagine I have the following HTML code: <div id="helloworld" call="chart" width="350" height="200" value="[[4, 8, 1, 88, 21],[45, 2, 67, 11, 9],[33, 4, 63, 4, 1]]" label="['test1', ...

Issue with 'backface-visibility' CSS3 property not functioning on any versions of Internet Explorer

I'm looking to implement a specific animation in Internet Explorer. The goal is to rotate an image like a coin, displaying a different image on the other side. I suspect that the issue lies with Backface-visibility in IE, but I'm not entirely sur ...

Implementing dynamic element selection with jQuery: combining onClick and onChange events

I am looking to update the appearance of the arrow on a select option. By default, it is styled as caret-down. When a user clicks in the input area, I want to change the style to caret-up. If the select option has been changed or no action has been taken, ...

Vue.js: V-Model input fails to update with JS virtual keyboard

I have integrated JSkeyboard into my webpage and am using v-model to dynamically update the text based on user input. The issue I am facing is that when using a physical keyboard, everything works as expected. However, when using the on-screen JS keyboard, ...

In JavaScript, it is impossible to remove an object key without using quotation marks

I encountered an issue when attempting to remove keys from a JSON object: var data = this.data; Object.keys(data).forEach(function(key) { if (isEmptyProperty(data[key])){ delete data[key]; }; }); The loop above iterates through a ...

Encountering an unforeseen change in the "buttonText" attribute

I've developed a simple Vue.js component for a button. When the button is clicked, it should display the text "I have been clicked." It does work as expected, but I'm also encountering an error that reads: 49:7 error Unexpected mutation of "but ...

Using jQuery libraries in Magento can create conflicts with the prototype.js framework

Need Help Integrating jQuery Library with Magento I've been tasked with working on a project in Magento, which primarily uses prototype.js. However, I often find myself needing to incorporate jQuery events for various functionalities. This leads to c ...