Rendering Threejs in React dissapears my root element in HTML - reactjs

I'm trying to use Three.js in Typescript react, I render Dodecahedron figure and random stars, I want to add some mark up to my three.js with React but when I render Three.js canvas into HTML it dissapears my root div, and I'm not able to add some other components
THREE.JS
import * as THREE from "three";
export function ThreeCanvas() {
const scene = new THREE.Scene();
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.innerHTML = "";
document.body.appendChild(renderer.domElement);
const geometry = new THREE.DodecahedronBufferGeometry(1.7, 0);
const material = new THREE.MeshStandardMaterial({
color: "#00FF95",
});
const Stars = () => {
const starGeometry = new THREE.SphereGeometry(0.1, 24, 24)
const starMaterial = new THREE.MeshStandardMaterial({color: 0xffffff})
const star = new THREE.Mesh(starGeometry, starMaterial)
const [x, y, z] = Array(3).fill(1).map(() => THREE.MathUtils.randFloatSpread(70))
star.position.set(x, y, z)
scene.add(star)
}
Array(200).fill(100).forEach(Stars)
const light = new THREE.PointLight(0xffffff)
light.position.set(20, 20, 20)
scene.add(light)
camera.position.z = 5;
camera.position.x = 3.5
const Figure = new THREE.Mesh(geometry, material);
scene.add(Figure);
const animate = () => {
requestAnimationFrame(animate);
Figure.rotation.x += 0.01;
Figure.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
window.addEventListener("resize", () => {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
});
return null
}
this is my three.js code what I do in react
React
import ReactDOM from "react-dom"
import { ThreeCanvas } from "./Components/Three";
import Landing from "./Components/Landing";
import "./Style/Style.css"
const FirstSection = () => {
return (
<div className="container">
<Landing />
<ThreeCanvas />;
</div>
);
}
ReactDOM.render(<FirstSection />, document.getElementById("root"));
Landing is my markup component when I open console I dont see anywhere my Landing element but in react tools I see, how to fix that issue I have no idea

You're removing document.body in Three.JS component which is why the body only contains the canvas. You might want to use a reference to the element instead of targeting document.body so that it's not disturbing the DOM structure which is why your markdown does not show. As a rule of thumb, you should never be interacting with the DOM via the document.
document.body.innerHTML = "";
I've quickly refactored the Three.JS component to use a React element reference so that you can add additional markup.
Refactored ThreeCanvas Component
import * as React from "react";
import * as THREE from "three";
export function ThreeCanvas() {
const ref = React.useRef();
const [loaded, setLoaded] = React.useState(false);
React.useEffect(() => {
if (!loaded && ref) {
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
const geometry = new THREE.DodecahedronBufferGeometry(1.7, 0);
const material = new THREE.MeshStandardMaterial({
color: "#00FF95"
});
const Stars = () => {
const starGeometry = new THREE.SphereGeometry(0.1, 24, 24);
const starMaterial = new THREE.MeshStandardMaterial({
color: 0xffffff
});
const star = new THREE.Mesh(starGeometry, starMaterial);
const [x, y, z] = Array(3)
.fill(1)
.map(() => THREE.MathUtils.randFloatSpread(70));
star.position.set(x, y, z);
scene.add(star);
};
Array(200).fill(100).forEach(Stars);
const light = new THREE.PointLight(0xffffff);
light.position.set(20, 20, 20);
scene.add(light);
camera.position.z = 5;
camera.position.x = 3.5;
const Figure = new THREE.Mesh(geometry, material);
scene.add(Figure);
const animate = () => {
requestAnimationFrame(animate);
Figure.rotation.x += 0.01;
Figure.rotation.y += 0.01;
renderer.render(scene, camera);
};
const resize = () => {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
};
animate();
ref.current.appendChild(renderer.domElement);
window.addEventListener("resize", resize);
setLoaded(true);
return () => window.removeEventListener("resize", resize);
}
}, [ref, loaded]);
return <div ref={ref} />;
}
export default ThreeCanvas;
Typescript Version: ThreeCanvas.tsx
import * as React from "react";
import * as THREE from "three";
export function ThreeCanvas() {
const ref = React.useRef<HTMLDivElement>(null);
const [loaded, setLoaded] = React.useState(false);
React.useEffect(() => {
if (!loaded && ref.current) {
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
const geometry = new THREE.DodecahedronBufferGeometry(1.7, 0);
const material = new THREE.MeshStandardMaterial({
color: "#00FF95"
});
const Stars = () => {
const starGeometry = new THREE.SphereGeometry(0.1, 24, 24);
const starMaterial = new THREE.MeshStandardMaterial({
color: 0xffffff
});
const star = new THREE.Mesh(starGeometry, starMaterial);
const [x, y, z] = Array(3)
.fill(1)
.map(() => THREE.MathUtils.randFloatSpread(70));
star.position.set(x, y, z);
scene.add(star);
};
Array(200).fill(100).forEach(Stars);
const light = new THREE.PointLight(0xffffff);
light.position.set(20, 20, 20);
scene.add(light);
camera.position.z = 5;
camera.position.x = 3.5;
const Figure = new THREE.Mesh(geometry, material);
scene.add(Figure);
const animate = () => {
requestAnimationFrame(animate);
Figure.rotation.x += 0.01;
Figure.rotation.y += 0.01;
renderer.render(scene, camera);
};
const resize = () => {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
};
animate();
ref.current.appendChild(renderer.domElement);
window.addEventListener("resize", resize);
setLoaded(true);
return () => window.removeEventListener("resize", resize);
}
}, [ref, loaded]);
return <div ref={ref} />;
}
export default ThreeCanvas;

Related

How to use canvas HTML5 on smartphone

I have code written on react js, using canvas html 5. It is image eraser: it should properly erase front image and when only some persent of it left, it trigger another action(i haven not done another action yet). It works fine in browser, but when i choose adaptive for any smatphone, it stops working. I tried to change mouse events to touch events but it didn't help.
Here is the code:
import './DrawingCanvas.css';
import {useEffect, useRef, useState} from 'react';
const DrawingCanvas = () => {
const canvasRef = useRef(null);
const contextRef = useRef(null);
const [isDrawing, setIsDrawing] = useState(false);
const [persent, setPersent] = useState(100);
useEffect(() => {
const url = require('../../images/one.jpg');
const canvas = canvasRef.current;
const img = new Image();
img.src = url;
const context = canvas.getContext("2d");
img.onload = function () {
let width = Math.min(500, img.width);
let height = img.height * (width / img.width);
canvas.width = width;
canvas.height = height;
context.drawImage(img, 0, 0, width, height);
contextRef.current = context;
context.lineCap = "round";
context.lineWidth = 350;
contextRef.current.globalCompositeOperation = 'destination-out';
};
}, []);
useEffect(() => {
console.log(persent);
if(persent<=0.1) return alert('hello')
}, [persent]);
const startDrawing = ({nativeEvent}) => {
const {offsetX, offsetY} = nativeEvent;
contextRef.current.beginPath();
contextRef.current.moveTo(offsetX, offsetY);
contextRef.current.lineTo(offsetX, offsetY);
// contextRef.current.stroke();
setIsDrawing(true);
nativeEvent.preventDefault();
};
const draw = ({nativeEvent}) => {
if (!isDrawing) {
return;
}
const {offsetX, offsetY} = nativeEvent;
contextRef.current.lineTo(offsetX, offsetY);
contextRef.current.stroke();
nativeEvent.preventDefault();
let pixels = contextRef.current.getImageData(0, 0, canvasRef.current.width, canvasRef.current.height);
let transPixels = [];
for (let i = 3; i < pixels.data.length; i += 4) {
transPixels.push(pixels.data[i]);
}
let transPixelsCount = transPixels.filter(Boolean).length;
setPersent((transPixelsCount / transPixels.length) * 100);
};
const stopDrawing = () => {
contextRef.current.closePath();
setIsDrawing(false);
};
return (
<div>
<canvas className="canvas-container"
ref={canvasRef}
onMouseDown={startDrawing}
onMouseMove={draw}
onMouseUp={stopDrawing}
onMouseLeave={stopDrawing}
>
</canvas>
</div>
)
}
export default DrawingCanvas;
.canvas-container {
background-image: url("https://media.istockphoto.com/id/1322277517/photo/wild-grass-in-the-mountains-at-sunset.jpg?s=612x612&w=0&k=20&c=6mItwwFFGqKNKEAzv0mv6TaxhLN3zSE43bWmFN--J5w=");
}
Maybe it all can be done through touch events, but idk how to do that properly

Three js animation creating multiple blender models

I am trying to play an animation that comes from a blender model while simultaneously having the model auto-rotate from OrbitControls. However I am getting the model to be duplicated, one model is animated on top of a stationary copy of the model that is unanimated:
I've tried removing the orbit controls code and update however I am still getting this result. Any advice would be greatly appreciated.
import {
AmbientLight,
Color,
DirectionalLight,
Mesh,
AnimationMixer,
MeshPhongMaterial,
PerspectiveCamera,
Scene,
SphereBufferGeometry,
UniformsUtils,
Vector2,
WebGLRenderer,
sRGBEncoding,
PointLight,
Clock,
} from 'three';
import { cleanRenderer,
cleanScene,
removeLights,
modelLoader,
textureLoader, } from 'utils/three';
import { GLTFLoader, OrbitControls, RenderPixelatedPass } from 'three-stdlib';
import { render } from 'react-dom';
export const ScifiWorkerRobot = props => {
const theme = useTheme();
const [loaded, setLoaded] = useState(false);
const { rgbBackground, themeId, colorWhite } = theme;
const start = useRef(Date.now());
const canvasRef = useRef();
const mouse = useRef();
const renderer = useRef();
const camera = useRef();
const scene = useRef();
const lights = useRef();
const uniforms = useRef();
const material = useRef();
const geometry = useRef();
const sphere = useRef();
const reduceMotion = useReducedMotion();
const isInViewport = useInViewport(canvasRef);
const windowSize = useWindowSize();
const rotationX = useSpring(0, springConfig);
const rotationY = useSpring(0, springConfig);
const { measureFps, isLowFps } = useFps(isInViewport);
const cameraXSpring = useSpring(0, cameraSpringConfig);
const cameraYSpring = useSpring(0, cameraSpringConfig);
const cameraZSpring = useSpring(0, cameraSpringConfig);
const controls = useRef();
const animations = useRef();
const mixer = useRef();
const clock = useRef();
const animationFrame = useRef();
const mounted = useRef();
const sceneModel = useRef();
//Setting up initial scene
useEffect(() => {
//mounted.current = true;
const { innerWidth, innerHeight } = window;
mouse.current = new Vector2(0.8, 0.5);
renderer.current = new WebGLRenderer({
canvas: canvasRef.current,
antialias: false,
alpha: true,
powerPreference: 'high-performance',
failIfMajorPerformanceCaveat: true,
});
renderer.current.setSize(innerWidth, innerHeight);
renderer.current.setPixelRatio(1);
renderer.current.outputEncoding = sRGBEncoding;
camera.current = new PerspectiveCamera(54, innerWidth / innerHeight, 0.1, 100);
camera.current.position.z = 5;
camera.current.position.x = 0;
camera.current.position.y = 0;
scene.current = new Scene();
clock.current = new Clock();
const ambientLight = new AmbientLight(colorWhite, 0.9);
const dirLight = new DirectionalLight(colorWhite, 0.8);
dirLight.position.set(0,0,0);
const lights = [ambientLight, dirLight];
lights.forEach(light => scene.current.add(light));
controls.current = new OrbitControls(camera.current, canvasRef.current);
controls.current.enableZoom = true;
controls.current.enablePan = true;
controls.current.enableDamping = true;
controls.current.rotateSpeed = 0.5;
controls.current.autoRotate = true;
const loader = new GLTFLoader();
loader.load(veribot, function ( gltf ) {
scene.current.add( gltf.scene );
animations.current = gltf.animations;
mixer.current = new AnimationMixer(gltf.scene);
mixer.current.timeScale = 0.8;
animations.current.forEach((clip, index) => {
const animation = mixer.current.clipAction(clip);
animation.play();
});
}, undefined, function ( error ) {
console.error( error );
} );
return () => {
//mounted.current = false;
cancelAnimationFrame(animationFrame.current);
removeLights(lights);
cleanScene(scene.current);
cleanRenderer(renderer.current);
};
}, []);
useEffect(() => {
let animation;
const animate = () => {
animation = requestAnimationFrame(animate);
const delta = clock.current.getDelta();
if (mixer.current){
mixer.current.update(delta);
}
controls.current.update();
renderer.current.render(scene.current, camera.current);
measureFps();
};
animate();
return () => {
cancelAnimationFrame(animation);
};
}, [isInViewport, measureFps, reduceMotion, isLowFps, rotationX, rotationY]);
return (
<Transition in timeout={2000}>
{visible => (
<canvas
aria-hidden
className={styles.canvas}
data-visible={visible}
ref={canvasRef}
{...props}
/>
)}
</Transition>
);
};

How to dynamically change a mesh color with React and Three.js

I know this is a trivial question but I assure you I've been trying to solve this for several hours.
The color prop is a string (e.g '#f56d3d') and it should change the mesh material color. I'm using useEffect to initialize the scene and I've tried to use another to change the color
function Scene({ color, shape }) {
const cubeRef = useRef(null);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer({ alpha: true });
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color });
const cube = new THREE.Mesh(geometry, material);
const animate = () => {
requestAnimationFrame(animate);
cube.material.color.setStyle(color);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
useEffect(() => {
renderer.setSize(window.innerWidth, window.innerHeight);
cubeRef.current.appendChild(renderer.domElement);
scene.add(cube);
camera.position.z = 5;
animate();
},[]);
return (
<div ref={cubeRef}>
</div>
)
}
export default Scene
What comes to my mind is a way to let know the renderer that the cube inside the scene has changed.
What I've tried so far is:
cube.material.needsUpdate = true;
renderer.render(scene, camera);
cube.material = new THREE.MeshBasicMaterial({ color });
All of these inside a useEffect with `color as dep.
Thanks
If you dont mind creating a new object then you can rearrange the variables in the useEffect like this:
const cubeRef = useRef(null);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer({ alpha: true });
const geometry = new THREE.BoxGeometry();
let cube, material;
const animate = () => {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
useEffect(() => {
material = new THREE.MeshBasicMaterial({color});
cube = new THREE.Mesh(geometry, material);
renderer.setSize(window.innerWidth, window.innerHeight);
cubeRef.current.innerHTML = '';
cubeRef.current.appendChild(renderer.domElement);
scene.add(cube);
camera.position.z = 5;
animate();
}, [color])
Also you might need to save the previous positioning or rotation somewhere.

Can i call a specific function inside `useEffect` in React?

I have a canvas component in react. I am using useEffect to get the canvas element. So i have defined all needed functions in useEffect, as you can see below
import { useEffect, useRef } from "react"
import * as blobs2Animate from "blobs/v2/animate"
export const CornerExpand = () => {
const canvasRef = useRef<HTMLCanvasElement>(null)
useEffect(() => {
const canvas = canvasRef.current!
const ctx = canvas.getContext("2d")
const animation = blobs2Animate.canvasPath()
const width = canvas.clientWidth * window.devicePixelRatio
const height = canvas.clientHeight * window.devicePixelRatio
canvas.width = width
canvas.height = height
const renderAnimation = () => {
if (!ctx) return
ctx.clearRect(0, 0, width, height)
ctx.fillStyle = "#E0F2FE"
ctx.fill(animation.renderFrame())
requestAnimationFrame(renderAnimation)
}
requestAnimationFrame(renderAnimation)
const size = Math.min(width, height) * 1
const defaultOptions = () => ({
blobOptions: {
seed: Math.random(),
extraPoints: 36,
randomness: 0.7,
size,
},
canvasOptions: {
offsetX: -size / 2.2,
offsetY: -size / 2.2,
},
})
const loopAnimation = () => {
animation.transition({
duration: 4000,
timingFunction: "ease",
callback: loopAnimation,
...defaultOptions(),
})
}
animation.transition({
duration: 0,
callback: loopAnimation,
...defaultOptions(),
})
const fullscreen = () => {
const options = defaultOptions()
options.blobOptions.size = Math.max(width, height) * 1.6
options.blobOptions.randomness = 1.4
options.canvasOptions.offsetX = -size / 2
options.canvasOptions.offsetY = -size / 2
animation.transition({
duration: 2000,
timingFunction: "elasticEnd0",
...options,
})
}
}, [canvasRef])
return (
<div>
<canvas className="absolute top-0 left-0 h-full w-full" ref={canvasRef} />
</div>
)
}
export default CornerExpand
Everything works as well, but now I have a problem. I want to execute the fullscreen() function when a button is clicked in the parent component. Since I have defined the function in useEffect, I can't call it directly, isn't it? What can I do to solve this?
You can do it like this.
export const CornerExpand = React.forwardRef((props, ref) => {
//....
{
//...
const fullscreen = () => {
const options = defaultOptions()
options.blobOptions.size = Math.max(width, height) * 1.6
options.blobOptions.randomness = 1.4
options.canvasOptions.offsetX = -size / 2
options.canvasOptions.offsetY = -size / 2
animation.transition({
duration: 2000,
timingFunction: "elasticEnd0",
...options,
})
}
ref.current = fullscreen;
}, [canvasRef]);
You can wrap this comp with React.forwardRef. And call it from parent.
<CornerExpand ref={fullscreenCallbackRef} />
And then call like this
fullscreenCallbackRef.current()

d3 / React / Hooks - Updates do not clean up old rects and Groups

I am working on a realtime updating bar chart implementation using d3 with React and Hooks.
Though the new 'g' groups and rects do get added to the svg, the old groups do not seem to be getting cleared up. So, the rects just get added on top of the old rects, as do the axis groups.
I am using the .join() API so I shouldn't need to do manually clean up with exit.remove() right? I am completely new to d3 so forgive the uncertainty.
app:
import React, { useRef, useEffect, useState } from 'react';
import * as firebase from 'firebase';
import Chart from './Chart';
function useInterval(callback, delay) {
const savedCallback = useRef();
// Remember the latest callback.
useEffect(() => {
savedCallback.current = callback;
}, [callback]);
// Set up the interval.
useEffect(() => {
function tick() {
savedCallback.current();
}
if (delay !== null) {
let id = setInterval(tick, delay);
return () => clearInterval(id);
}
}, [delay]);
}
function App() {
const [menu, setMenu] = useState([]);
const db = firebase.firestore();
useEffect(() => {
db.collection('dishes')
.get()
.then((res) => {
let data = [];
for (let doc of res.docs) {
data.push(doc.data());
}
setMenu(data);
});
}, []);
useInterval(() => {
let newMenu = [];
newMenu = [...menu];
if (newMenu[0] && newMenu[0].hasOwnProperty('orders')) {
newMenu[0].orders += 50;
setMenu(newMenu);
}
}, 3000);
return (
<div className="App">{menu.length > 0 ? <Chart data={menu} /> : null}</div>
);
}
export default App;
Chart component:
import React, { useRef, useEffect } from 'react';
import * as d3 from 'd3';
const Chart = ({ data }) => {
const height = 600;
// Generate a ref instance
const svgRef = useRef();
useEffect(() => {
const svg = d3.select(svgRef.current);
const margin = { top: 20, right: 20, bottom: 100, left: 100 };
const graphWidth = 600 - margin.left - margin.right;
const graphHeight = height - margin.top - margin.bottom;
// Find the maximum order value
const max = d3.max(data, (d) => d.orders);
// Establish the y scale
// i.e., map my max value to the pixel max value ratio
const y = d3
.scaleLinear()
.domain([0, max * 1.25])
.range([graphHeight, 0]);
// Calculates width and coordinates for each bar
// Can add padding here
const x = d3
.scaleBand()
.domain(data.map((item) => item.name))
.range([0, graphHeight])
.padding(0.25);
const graph = svg
.append('g')
.attr('width', graphWidth)
.attr('height', graphWidth)
.attr('transform', `translate(${margin.left}, ${margin.top})`);
// Creat axis groups for legends and labels
const xAxisGroup = graph
.append('g')
.attr('transform', `translate(0,${graphHeight})`);
const yAxisGroup = graph.append('g');
// Append the graph to the DOM
graph
.selectAll('rect')
.data(data, (entry, i) => entry)
.join(
(enter) => enter.append('rect'),
(update) => update.append('class', 'new'),
(exit) => exit.remove()
)
.transition()
.duration(300)
.attr('width', x.bandwidth)
.attr('height', (d) => graphHeight - y(d.orders))
.attr('fill', 'orange')
.attr('x', (d) => x(d.name))
.attr('y', (d) => y(d.orders));
// Create the axes
const xAxis = d3.axisBottom(x);
const yAxis = d3
.axisLeft(y)
// .ticks(3)
.tickFormat((d) => d + ' orders');
// Append the axes to the graph
xAxisGroup.call(xAxis);
yAxisGroup.call(yAxis);
xAxisGroup
.selectAll('text')
.attr('transform', 'rotate(-40)')
.attr('text-anchor', 'end');
}, [data]);
return (
<div>
<svg ref={svgRef} height={height} width="600" />
</div>
);
};
export default Chart;

Resources