The planebuffergeometry does not fall within the three namespace

I am currently working on a project using three.js and next.js, but I keep encountering this error:

'planeBufferGeometry is not part of the THREE namespace. Did you forget to extend? See:

As a beginner in three.js, I'm unsure what exactly is causing this issue.

In my page.js file (app.js):

"use client"
import Image from 'next/image'
import styles from './page.module.css'
import { Canvas } from '@react-three/fiber'
import { Sky } from '@react-three/drei'
import Ground from './components/Ground'
import { Physics } from '@react-three/cannon'

export default function Home() {
  return (
    <>
      <Canvas>
        <Sky sunPosition={[100, 20, 100]} />
        <ambientLight intensity={0.5} />
        <Physics>
          <Ground />
        </Physics>
      </Canvas>
    </>
  )
}

In Ground.js:

import { usePlane } from "@react-three/cannon";
import { groundTexture } from "../images/textures"
import * as THREE from "three";

const Ground = (props) => {
    const [ref] = usePlane(() => ({
        rotation: [-Math.PI / 4, 0, 0], position: [0, 0, 0]
    }))
    groundTexture.magFilter = THREE.NearestFilter;
    groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping;
    groundTexture.repeat.set(100, 100);

    return (
        <mesh ref={ref}>
            <planeBufferGeometry attach="geometry" args={[100, 100]} />
            <meshStandardMaterial attach="material" map={groundTexture} />
        </mesh>
    )
}

export default Ground

As a newcomer to three.js, I would appreciate any help or guidance regarding this problem.

Answer №1

Within three.js, the use of the BufferGeometry alias was phased out for all geometry generators starting from version r144. By version r154, these aliases were completely removed from the project.

It is recommended to always refer to geometries by their specific names such as PlaneGeometry or BoxGeometry.

Answer №2

It is currently recommended to use planeGeometry instead of planeBufferGeometry as the latter is now deprecated.

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

"Clicking on a handler will replace the existing value when the same handler is used for multiple elements in

import React, { useState, useEffect } from "react"; const Swatches = (props) => { const options = props.options; const label = Object.keys(options); const values = Object.values(options); const colors = props.colors; const sizes = p ...

Having trouble displaying child nodes in MatTreeView with Angular 14?

In an Angular project, I am attempting to display a private group's data from GitLab (utilizing a public one for testing purposes). To achieve this, I have implemented the NestedTreeView component. While the parent nodes are displaying correctly, I am ...

Adjusting color of fixed offcanvas navbar to become transparent while scrolling

After creating a navbar with a transparent background, I am now using JavaScript to attempt changing the navigation bar to a solid color once someone scrolls down. The issue is that when scrolling, the box-shadow at the bottom of the navbar changes inste ...

Guide on implementing hover effects in React components

Within my component SecondTest, I have defined an object called useStyle which sets the background color to red. Is it feasible to add a hover effect to this object? const useStyle = { backgroundColor: "red", }; function SecondTest() { return < ...

Modifying button appearance based on state change in AngularJS

I have a button with a grey color and I want to create two different states for it: one that is selected (blue) and another that is in an idle state (grey). Currently, I am working on Angularjs but I am fairly new to this platform. Could you kindly provid ...

What could be the reason for Google Maps producing a static map instead of a dynamic one?

Here is a snippet of code that showcases Google Map integration: <div class="col span_1_of_3 gMapHolder"> </div> Utilizing JQuery: $(document).ready(function () { alert($(".mapUse").text()); var k = $(".mapUse").text(); var embed ...

Is there a way to use grease/tampermonkey to automatically redirect the current definition from Dictionary.com to Thesaurus.com?

Is there a way to use Greasemonkey or Tampermonkey to automatically open the definition on Dictionary.com at Thesaurus.com, and vice versa, when clicking specific links? (Shown in red) My initial thought is to retrieve the word being searched from the URL ...

Tips for improving the speed of loading infinite scroll pages

I am currently working on scraping over 100k rows from the provided URL. The data goes back approximately a month, loading in batches of 7-8 rows at a time. My current approach involves using a macro to scroll down the page slowly, which is effective but ...

Exploring the advanced features of OpenOffice Draw for improved geometry analysis

Struggling with the draw:enhanced-geometry section that involves draw:enhanced-path and draw:equation. I'm working on an OOo converter but can't seem to find any concrete solutions or extensive documentation about this part. Any suggestions on ho ...

Create a toggle effect using attribute selectors in CSS and JavaScript

I am looking to switch the "fill: #000;" from the CSS property "svg [id^='_']". Usually, I would use a method like this, but it seems that I can't do so because "svg [id^='_']" is not an element, correct? pub.toggleClass = functi ...

Angular: Navigating to another URL causes the page to revert back to the default route

Currently, I am working with Angular 1.3.10, ui-router 0.2.10, and Express 4.14.0 to develop a Reddit-style application, and I'm facing some issues with routing. The simplified version of my Express routes: router.get('/api/home', function ...

Ways to trigger an event or invoke a function after initializing Stripe JS

My checkout page is optimized with the new Stripe Payment Element for fast loading using SSR. However, I am facing an issue where the element sometimes causes the page to reload 2 or more times before functioning properly. Occasionally, it also displays ...

JavaScript: Employ array destructuring for improved code readability (eslintprefer-destructuring)

How can I resolve the ESLint error that says "Use array destructuring. eslint(prefer-destructuring)"? The error occurs on this line of my code: let foo = 1; foo = obj.data[i][1]; //ESLint error on this line If anyone could provide assistance in fixing thi ...

Incorporate user input into Alert Dialog Boxes

Would you be able to assist me in displaying the input value from the "email" field in my alert box? The code seems to be working fine, but I'm having trouble getting the alert box to show the email form value. I decided to use Bootstrap for som ...

The JavaScript alert message pops up two times consecutively

I encountered an issue while attempting to utilize a module named disclaimer in Drupal 7. The alert message "You must enter the year you were born in." appears twice and then redirects to a URL that should only be accessed after verifying that you are over ...

Tips for Organizing an Array: Grouping Categories and Products

I have a single array and I am looking to separate categories from the products listed within it. const product = [{ id: 1, name: 'Cloth', cat: ['fashion', 'man', 'women'] }, { id: 2, name: &apos ...

Closing the Material UI dialog from an inner component

In my application, I have implemented a sign-in dialog using Material UI. However, I have separated the login button into its own component. I am trying to figure out how to close the dialog when the submit button in the SigninForm component is clicked. I ...

Issue alert before running tests on component that includes a Material UI Tooltip

This is a follow-up regarding an issue on the Material-UI GitHub page. You can find more information here. Within my Registration component, there is a button that is initially disabled and should only be enabled after accepting terms and conditions by ch ...

Distinguishing Response Headers in XMLHttpRequest and jQuery AJAX FunctionUniqueness:

Hello, I'm facing an issue that is not a duplicate. Here is the code snippet: var data = {'userId': window.cookie.get('userId'), 'sessionId': window.cookie.get('sessionId')} $.post(window.DbUrl + '/t ...

Passing a class as a parameter in Typescript functions

When working with Angular 2 testing utilities, I usually follow this process: fixture = TestBed.createComponent(EditableValueComponent); The EditableValueComponent is just a standard component class that I use. I am curious about the inner workings: st ...