How to properly (dynamically) change color of a mesh into group?

2022-05-04 11:05 simplesample imported from Stackoverflow

I have a model:

<group ref={group} {...props} dispose={null} onDoubleClick={e => {e.stopPropagation(); clickHandler(e)}}>
    <mesh geometry={nodes.Mesh7_Group3_Group2_Group1_G_2016_Lexus_LX570__1_1_Lexus_LX570_.geometry} material={nodes.Mesh7_Group3_Group2_Group1_G_2016_Lexus_LX570__1_1_Lexus_LX570_.material} position={[-72.7, 0.53, 4.83]} rotation={[1.83, -0.26, 0]} scale={2.05} />
    <mesh geometry={nodes.Mesh740_black1_Group8_Group1_G_2016_Lexus_LX570__1_1_Lexus_LX57.geometry} material={materials.black_plastic_matt} position={[-72.75, 0, 4.83]} rotation={[1.83, 0.24, -0.13]} scale={2.05} />
    <mesh geometry={nodes.Mesh468_plasstik_r1_Group8_Group1_G_2016_Lexus_LX570__1_1_Lexus.geometry} material={nodes.Mesh468_plasstik_r1_Group8_Group1_G_2016_Lexus_LX570__1_1_Lexus.material} position={[-72.75, 0, 4.83]} rotation={[1.83, 0.24, -0.13]} scale={2.05} />
</group>

By this function I can change color of a clicked target, but it triggers changing color of a material generally and all parts with this material changing its color.

const clickHandler = (e: any) => { 
                e.object.material.color = {r: 0, g: 1, b: 0} 
      }

I also tried to edit my meshes:

From:

<mesh geometry={nodes.toyota_alphard039.geometry} material={materials.black_plastic_gloss} rotation={[Math.PI / 2, 0, 0]}/>

to:

<mesh geometry={nodes.toyota_alphard039.geometry} material={materials.black_plastic_gloss} rotation={[Math.PI / 2, 0, 0]}>
    <meshBasicMaterial color="red" />
</mesh>

It forced me to an idea of creation a function that will adding into mesh the node <meshBasicMaterial color="red" />

How to implement it correctly?

1 answer

answered 2022-05-04 11:35 benkov

to change one element color , you need to clone its material first, apply changes to the new material, and then add the material to the clicked element. Something like this

const clickHandler = (e: any) => { 
       new_material = e.object.material.clone();
       new_material.color.setRGB(0,1,0);
       e.object.material = new_material;
       e.object.material.needsUpdate = true
       // and need to call your render function to apply changes to scene
       }

See also questions close to this topic

How can I drag camera on three.js?

I'd like to create this camera effect on my project: https://2021.fanzone36.com/fr/home https://bruno-simon.com/

How can I drag the camera like this? I can't find the right "control". Now I'm using OrbitControls but I need to move on a plane (along x axe).
Why can't I declare a position in my multidimensional array?
I'm trying to do a 3d version of an L-Syste. But I cannot declare elements in my multidimensional array. When I debug, I see that the element stays the same. I call for example arraygrowth [0][1] = 100; But the Element at that position stays 0
```
let arraygrowth =[];
arraygrowth.push(new THREE.Vector3(0,0,0)); 
arraygrowth.push(new THREE.Vector3(0,0,0));
arraygrowth.push(new THREE.Vector3(0,0,0));

arraygrowth [0][1] = 100;
arraygrowth [1][1] = 100;
arraygrowth [2][1] = 100;
```

Resizing THREE.js Object using HTML div

I have two divs that I want to place side-by-side, and one of them contains my THREE.JS window/canvas. Basically, I don't want the THREE.js to take up the entire screen (only 50% of the width or however I adjust it), and so I want to do this with the div I put it in (threejs-container) or with HTML if there's another way. On the left side beside it, I want to be able to put an image or text. For some reason, the renderer canvas is not obeying my div and resizing. How do I fix this?

P.S. I know I can resize it manually using THREE.js, but I also want to be able to easily right-adjust my canvas, so I want to try to avoid doing that. The canvas centers itself on the page, and I also don't know how to change that.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>VRChat</title>
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/styles.css">
</head>

<body>
    <div class="container">
        <div class="nav-wrapper">
            <!-- WIP -->
        </div>

        <!-- This is everything below the nav bar -->
        <div class="content-wrapper">
            <div class="two-column-wrapper">
                <div class="profile-image-wrapper">
                    <img src="https://data.whicdn.com/images/350807092/original.jpg">
                </div>

                <div id="threejs-container" style="width: 50%">
                    <script type="module">

                        import * as THREE from 'https://cdn.skypack.dev/three@0.128.0/build/three.module.js';            
                        import { OrbitControls } from 'https://cdn.skypack.dev/three@0.128.0/examples/jsm/controls/OrbitControls.js';
                        import { FBXLoader } from 'https://cdn.skypack.dev/three@0.128.0/examples/jsm/loaders/FBXLoader.js';
            
                        let camera, scene, renderer;
            
                        init();
                        animate();
            
                        function init() {            
                            // https://www.youtube.com/watch?v=FwcXultcBl4
                            camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 2000 );
                            camera.position.set(0, 1.3, 3);
            
                            scene = new THREE.Scene();
                            scene.background = new THREE.Color( 0xa0a0a0 );
            
                            const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
                            hemiLight.position.set( 0, 200, 0 );
                            scene.add( hemiLight );
            
                            const dirLight = new THREE.DirectionalLight( 0xffffff );
                            dirLight.position.set( 0, -50, 100 ); // Adjust the direction from which light shines
                            dirLight.castShadow = true;
                            dirLight.shadow.camera.top = 180;
                            dirLight.shadow.camera.bottom = -100;
                            dirLight.shadow.camera.left = -120;
                            dirLight.shadow.camera.right = 120;
                            scene.add( dirLight );
            
                            // Ground
                            const mesh = new THREE.Mesh( new THREE.PlaneGeometry( 100, 100 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false} ) );
                            mesh.rotation.x = - Math.PI / 2;
                            mesh.receiveShadow = true;
                            scene.add(mesh);
            
                            const grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
                            grid.material.opacity = 0.2;
                            grid.material.transparent = true;
                            scene.add(grid);
            
                            // Model
                            const loader = new FBXLoader();
                            loader.load( 'model/minoru_utsugi_v1.8_Quest.fbx', function ( object ) {
                                object.traverse( function ( child ) {
                                    if ( child.isMesh ) {
                                        child.castShadow = true;
                                        child.receiveShadow = true
                                    }
                                } );
                                scene.add(object);
            
                            } );
                            renderer = new THREE.WebGLRenderer({antialias: true});
                            renderer.setPixelRatio(window.devicePixelRatio);

                            renderer.setSize(window.innerWidth, window.innerHeight);
                            renderer.shadowMap.enabled = true;
                            document.getElementById("threejs-container").appendChild(renderer.domElement);
                            const controls = new OrbitControls( camera, renderer.domElement );
                            controls.target.set(0, 0.8, 0); // Change this to move camera position
                            controls.update();
                            window.addEventListener('resize', onWindowResize);
                        }
            
                        function onWindowResize() {
                            // Adjust three.js object size on window resize
                            camera.aspect = window.innerWidth / window.innerHeight;
                            camera.updateProjectionMatrix();
                            renderer.setSize(window.innerWidth, window.innerHeight);
                        }
            
                        function animate() {
                            requestAnimationFrame( animate );
                            renderer.render( scene, camera );            
                        }
            
                    </script>
                </div>
            </div>
        </div>
    </div>
    </div>
</body>

</html>

React Three Fibre follow mouse respect controls
I'm trying to get something to follow the mouse, after controls have changed the camera position

Here is an example https://codesandbox.io/s/r3f-mouse-forked-to146p?file=/src/index.js

If you drag the screen, the object is no longer next to the mouse

I need to update this position in relation to the camera position I assume.
```
const ref = useRef()
  useFrame(({ mouse }) => {
    const x = (mouse.x * viewport.width) / 2
    const y = (mouse.y * viewport.height) / 2
    ref.current.position.set(x, y, 0)
    ref.current.rotation.set(-y, x, 0)
  })
```

React Three JS not rendering

I've been trying to follow this tutorial: https://www.youtube.com/watch?v=wRmeFtRkF-8

but when I run my code, I only get a blank (black - background color set in the CSS) canvas. I know the canvas is operational because when I scroll on the black portion, I do not scroll up and down the page. I used the same code in the video / github and only replaced react-three-fiber with @react-three/fiber.

Here is my code:

import './Ripple.css';
import * as THREE from 'three';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls';
import { Canvas, extend, useFrame, useLoader, useThree } from '@react-three/fiber';
import circleImg from './assets/circle.png';
import { Suspense, useCallback, useMemo, useRef } from 'react';
extend({OrbitControls})

function CameraControls(){
  const {
    camera,
    gl: {domElement}
  } = useThree();

  const controlsRef = useRef();
  useFrame(() => controlsRef.current.update())

  return (
    <orbitControls
      ref={controlsRef}
      args={[camera, domElement]}
      autoRotate
      autoRotateSpeed={-0.2}
    />
  );
}

function Points() {
  const imgTex = useLoader(THREE.TextureLoader, circleImg);
  const bufferRef = useRef();

  let t = 0;
  let f = 0.002;
  let a = 3;
  const graph = useCallback((x, z) => {
    return Math.sin(f * (x ** 2 + z ** 2 + t)) * a;
  }, [t, f, a])

  const count = 100
  const sep = 3
  let positions = useMemo(() => {
    let positions = []

    for (let xi = 0; xi < count; xi++) {
      for (let zi = 0; zi < count; zi++) {
        let x = sep * (xi - count / 2);
        let z = sep * (zi - count / 2);
        let y = graph(x, z);
        positions.push(x, y, z);
      }
    }

    return new Float32Array(positions);
  }, [count, sep, graph])

  useFrame(() => {
    t += 15
    
    const positions = bufferRef.current.array;

    let i = 0;
    for (let xi = 0; xi < count; xi++) {
      for (let zi = 0; zi < count; zi++) {
        let x = sep * (xi - count / 2);
        let z = sep * (zi - count / 2);

        positions[i + 1] = graph(x, z);
        i += 3;
      }
    }

    bufferRef.current.needsUpdate = true;
  })

  return (
    <points>
      <bufferGeometry attach="geometry">
        <bufferAttribute
          ref={bufferRef}
          attachObject={['attributes', 'position']}
          array={positions}
          count={positions.length / 3}
          itemSize={3}
        />
      </bufferGeometry>

      <pointsMaterial
        attach="material"
        map={imgTex}
        color={0x00AAFF}
        size={0.5}
        sizeAttenuation
        transparent={false}
        alphaTest={0.5}
        opacity={1.0}
      />
    </points>
  );
}

function AnimationCanvas() {
  return (
    <Canvas
      colorManagement={false}
      camera={{ position: [100, 10, 0], fov: 75 }}
    >
      <Suspense fallback={null}>
        <Points />
      </Suspense>
      <CameraControls/>
    </Canvas>
  );
}


function Ripple() {
  return (
    <div className="anim">
        <Suspense fallback={<div>Loading...</div>}>
            <AnimationCanvas />
        </Suspense>
    </div>
  );
}

export default Ripple;

Thank you for your help!

React three fibre switching textures

I'm attempting to switch textures while a video is loading to show a preview image, then show the video when it loads.

  if (loading)
    return (
      <mesh scale={is360 ? [1, 1, 1] : scale}>
        {is360 ? <sphereBufferGeometry attach="geometry" args={[500, 60, 40]} /> : <planeBufferGeometry />}
        <meshBasicMaterial
          map={previewTexture}
          side={is360 ? BackSide : FrontSide}
          toneMapped={false}
        ></meshBasicMaterial>
      </mesh>
    );

  return (
    <mesh scale={is360 ? [1, 1, 1] : scale}>
      {is360 ? <sphereBufferGeometry attach="geometry" args={[500, 60, 40]} /> : <planeBufferGeometry />}
      <meshBasicMaterial side={is360 ? BackSide : FrontSide} toneMapped={false}>
        <videoTexture attach="map" args={[video]} encoding={sRGBEncoding} />
      </meshBasicMaterial>
    </mesh>

This gives me

Uncaught TypeError: Cannot use 'in' operator to search for 'requestVideoFrameCallback' in undefined at new VideoTexture

This goes white when the change happens,

 <mesh scale={is360 ? [1, 1, 1] : scale}>
      {is360 ? <sphereBufferGeometry attach="geometry" args={[500, 60, 40]} /> : <planeBufferGeometry />}
      <meshBasicMaterial needsUpdate={!loading} map={loading ? previewTexture : null} side={is360 ? BackSide : FrontSide} toneMapped={false}>
        {!loading && <videoTexture attach="map" args={[video]} encoding={sRGBEncoding} />}
      </meshBasicMaterial>
    </mesh>

Whats the best way of handling this?

How to correctly convert jsx to tsx

How to correctly convert exited jsx file from npx gltfjsx command to TypeScript file? Couldn't correct the errors.

import React, {useRef} from 'react'
import { useGLTF } from '@react-three/drei'

export default function Crown(state: any, { ...props }) {
    const group = useRef()
    // @ts-ignore
    const { nodes, materials } = useGLTF('/crown.glb') //TS2339: Property 'materials' does not exist on type 'GLTF'.
    return (
        <group
            // @ts-ignore
            ref={group} //TS2322: Type 'MutableRefObject<undefined>' is not assignable to type 'Ref<Group> | undefined'.   Type 'MutableRefObject<undefined>' is not assignable to type 'RefObject<Group>'.     Types of property 'current' are incompatible.       Type 'undefined' is not assignable to type 'Group | null'.
            {...props}
            dispose={null}
        >
            <mesh..../>
            <mesh..../>
            <mesh..../>
            <mesh..../>
        </group>
    )
}

useGLTF.preload('/crown.glb')

How to make smooth camera transition in react three fiber

Till now I have managed to achieve camera shifting from one place to another but it goes all of a sudden i want a animation or a smooth effect in between current and final camera point

     function Rig({ children }) {
      const outer = useRef(null)
      const inner = useRef(null)
      const [pos, setPos] = useState({
        x: -12,
        y: 20,
        z: 34
      })
      const [type, setType] = useState('initial')
      setTimeout(() => {
        setType('third')
      }, 5000)
    
      useEffect(() => {}, [pos])
    
      useFrame(({ camera, clock }) => {
        if (type === 'initial') {
          outer.current.position.y = THREE.MathUtils.lerp(outer.current.position.y, 0, 0.05)
          inner.current.rotation.y = Math.sin(clock.getElapsedTime() / 8) * Math.PI
          inner.current.position.z = 5 + -Math.sin(clock.getElapsedTime() / 2) * 10
          inner.current.position.y = -5 + Math.sin(clock.getElapsedTime() / 2) * 2
        }
        if (type === 'final') {
          camera.position.set(0, 20, 34)
        }
})
  return (
    <group position={[0, -100, 0]} ref={outer}>
      <group ref={inner}>{children}</group>
    </group>
  )
}

I read in the documentation this could be achieve through react spring or tween camera but i couldn't implement any of those

Related questions

How to properly (dynamically) change color of a mesh into group?

1 answer

See also questions close to this topic