Develop Reference

How can I display a React web page with Three JS

To clarify I am using React Three Fibre/drei, I have a scene and want to display some text as the landing page. I have a component Home that is meant to be the html webpage, but it is not working as expected:
import Home from './pages/Home.jsx'
function App() {
const CanvasContainer = styled(Box) ( () => ({
width: '100%',
height: '100%',
}))
return (
<CanvasContainer>
<Home></Home>
<Canvas dpr={window.devicePixelRatio}>
<gridHelper args={[200,50]}/>
<axesHelper args={[5]}/>
<Suspense fallback={null}>
<OrbitControls
target={[-1,0,1]}
enableZoom={true}
enablePan={true}
enableRotate={true}
zoomSpeed={0.6}
panSpeed={0.5}
rotateSpeed={0.4}
/>
<Earth/>
<MoonAxis/>
</Suspense>
</Canvas>
</CanvasContainer>
)
}
export default App
Depending on if I import Home with curly braces or not I get an error Uncaught SyntaxError: The requested module ____ does not provide an export named 'default'.
This is what Home looks like:
import React from 'react'
const Home = () => {
return (
<div>Home</div>
)
}
export default Home

Uncaught TypeError: Cannot read properties of undefined (reading 'play')

I am trying to create avatar and animations thru readyplay.me and mixamo.
Here is the link where I learned it: https://dev.to/nourdinedev/how-to-use-threejs-and-react-to-render-a-3d-model-of-your-self-4kkf
The code below is my App.js. I am able to pass thru the first part which is have the avatar created and worked in javascript. However, I got an error as in tittle after I replace model.glb with model_animation.glb. Can someone please advise what caused the error?
/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
*/
import React, { useRef, useEffect } from "react";
import { useGLTF, useAnimations } from "#react-three/drei";
export default function Model({ ...props }) {
const group = useRef();
const { nodes, materials, animations } = useGLTF(
"/model_animation.glb"
);
const { actions } = useAnimations(animations, group);
useEffect(() => {
actions["Armature|mixamo.com|Layer0"].play();
});
return (
<group ref={group} {...props} dispose={null}>
<group name="Armature001"></group>
<primitive object={nodes.Hips} />
<skinnedMesh name="Wolf3D_Avatar001" geometry={nodes.Wolf3D_Avatar001.geometry} material={materials['Wolf3D_Avatar.001']} skeleton={nodes.Wolf3D_Avatar001.skeleton} morphTargetDictionary={nodes.Wolf3D_Avatar001.morphTargetDictionary} morphTargetInfluences={nodes.Wolf3D_Avatar001.morphTargetInfluences} />
</group>
)
}
useGLTF.preload('/model_animation.glb')

You have to changed the model file name to match the import in your code.

How to use vanta with nextjs?

I am trying to use vanta with next.js, following this guide. It works completely fine with the Net Effect, however, when I try to use the Globe Effect, I get
[VANTA] Init error TypeError: r.Geometry is not a constructor
at h.onInit (vanta.globe.min.js:1)
at h.init (vanta.globe.min.js:1)
at new r.VantaBase (vanta.globe.min.js:1)
at new h (vanta.globe.min.js:1)
at r.<computed> (vanta.globe.min.js:1)
I have isolated Vanta into an Background Component
//Background.js
import { useState, useRef, useEffect } from "react";
import NET from "vanta/dist/vanta.globe.min"
import * as THREE from "three";
export default function Background({ width, height, children }) {
const [vantaEffect, setVantaEffect] = useState(0);
const vantaRef = useRef(null);
useEffect(() => {
if (!vantaEffect) {
setVantaEffect(
NET({
THREE,
el: vantaRef.current,
})
);
}
return () => {
if (vantaEffect) vantaEffect.destroy();
};
}, [vantaEffect]);
return (
<div ref={vantaRef}>{children}</div>
)
}
And added the THREE script into my _app.js
import '../styles/globals.css'
import Head from "next/head";
import Navbar from "../components/Navbar";
import { useEffect } from "react";
export default function App({ Component, pageProps }) {
useEffect(() => {
const threeScript = document.createElement("script");
threeScript.setAttribute("id", "threeScript");
threeScript.setAttribute(
"src",
"https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"
);
document.getElementsByTagName("head")[0].appendChild(threeScript);
return () => {
if (threeScript) {
threeScript.remove();
}
};
}, []);
return (
<>
<Head>
<title>BrainStorm Tutoring</title>
</Head>
<Navbar />
<Component {...pageProps} />
</>
)
}
and used it like so
//index
import Background from "../components/Background";
export default function Home() {
return (
<Background height="400" width="400">
<h1 className="text-white text-8xl text-left p-36">Fish Bowl</h1>
</Background >
)
}
Is it something wrong with THREE, or is it that next.js can't support vanta?

I have that issue with Halo, so i think the THREE object was not available or was not defined in the HALO.js file.
So i go to the official github repo of Vanta and take the source of Halo and Net (the tutorial effect) file, and i found constructor was missing in the Halo file. So i take the one of Net and put in the Halo file.
constructor(userOptions) {
THREE = userOptions.THREE || THREE;
super(userOptions);
}
Then i import my custom Halo file for the effect and it works.

I was playing around with this and found that, if I keep the Three.js version to 122. I don't get the error. Apparently any version after that has a breaking change.

pixi.js PIXI.Texture.from() can't add images

I'm using react with pixi.js to development a simple web game
and I want to add some images to pixi.js from local directory
here is the website I studied
https://pixijs.io/examples/#/demos-basic/container.js
and here are the codes
import * as PIXI from 'pixi.js'
import React from 'react'
export default class PixiTestPage extends React.Component{
componentDidMount(){
//Create a Pixi Application
const app = new PIXI.Application({
backgroundColor: 0x1099bb
});
//Add the canvas that Pixi automatically created for you to the HTML document
document.body.appendChild(app.view);
const texture = PIXI.Texture.from("./bunny.png")
const bunny = new PIXI.Sprite(texture);
bunny.anchor.set(0.5)
bunny.x = app.screen.width / 2;
bunny.y = app.screen.height / 2;
app.stage.addChild(bunny);
}
render(){
return (
<div>
</div>
)
}
}
but the browser keep showing error message
Uncaught (in promise)
same as I use #inlet/react-pixi
https://reactpixi.org/
import * as PIXI from 'pixi.js'
import React from 'react'
import { Stage, Sprite } from '#inlet/react-pixi';
export default class PixiTestPage extends React.Component{
componentDidMount(){
}
render(){
return (
<div>
<Stage>
<Sprite image="./bunny.png" x={100} y={100} />
</Stage>
</div>
)
}
}
the Uncaught (in promise) error still there
but when I using the url like
https://pixijs.io/examples/examples/assets/bunny.png
it worked
how to use images in pixi.js with local directory?
here is the image path
path

Oh I forgot react must use import images...
so the solution is
import React from 'react'
import { Stage, Sprite } from '#inlet/react-pixi';
import bunny from './bunny.png'
export default class PixiTestPage extends React.Component{
componentDidMount(){
}
render(){
return (
<div>
<Stage>
<Sprite image={bunny} x={100} y={100} />
</Stage>
</div>
)
}
}

React is showing "Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render"

Heres the main game.js and app.js file:
//Heres the game file//
import React, { Component } from "react";
class Game extends Component {
constructor(props) {
super(props);
this.state = { num: 0 };
this.numPicker = this.numPicker.bind(this);
}
numPicker(e) {
let rand = Math.floor(Math.random() * this.props.maxNum);
return rand;
}
render() {
return (
<div>
<h1>Hellow World {this.numPicker}</h1>
</div>
);
}
}
export default Game;
//Heres the main file://
import React from "react";
import "./App.css";
import Game from "./game";
function App() {
return (
<div className="App">
<Game maxNum={1} />
</div>
);
}
export default App;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
on the game.js file I used the numPicker function inside an H1. Now I am getting this error:
Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.

You need to invoke the numPicker function that returns a data which can then be rendered
<h1>Hellow World {this.numPicker()}</h1>