Please document how to access Canvas object

[bionicles]

Ive been having a nightmare time trying to get simple shadows to work for a project to help addiction medicine docs do exposure therapy for their patients. Have tried all sorts of demos etc. Yes, shadowMap, castShadow, and receiveShadow are True. I'm not sure how to inspect the frustrum of the camera, and it seems really hard to debug this in general, because you can't really see where the lights are located in the scene

The "Canvas" seems critical but if I try to give it a ref and console.log the current value of Canvas, it crashes. Please let us inspect the canvas element (or document how that's done)

A "debug" mode would be cool. Shadows work on other demos on my computer (18.04 ubuntu geforce 1070 ti, intel 12core cpu). Want me to provide obj/mtl files in a codepen?

import React, { Suspense, useMemo, useRef } from 'react'
import * as THREE from 'three'

import { Canvas, useThree, useFrame } from 'react-three-fiber'
import { Controls } from "../components/controls"
import { Camera } from "../components/camera"
import { Table } from "../components/table" 
import { OBJ } from "../components/obj" 
import { GLTF } from "../components/gltf"
import { Light } from "../components/point-light"

export var Page = () => {
  const canvas = useRef()
  useFrame(() => console.log("canvas.current", canvas.current))
  return (
    <Canvas shadowMap camera={{ position: [1, 20, 1], fov: 120, farClip: Infinity }} >
    {/* <Camera position={[1,20,1]} /> */}
    {/* <pointLight castShadow position={[0,100,0]} intensity={1} /> */}
    <ambientLight intensity={0.618} />
     <spotLight
      castShadow
      intensity={1}
      angle={Math.PI / 7}
      position={[0, 150, 250]}
      penumbra={1}
      shadow-mapSize-width={2048}
      shadow-mapSize-height={2048}
    />
    <Controls
      key="controls"
      autoRotate={false}
      enableZoom={true}
      minDistance={300}
      maxDistance={512}
      minZoom={0}
      maxZoom={Infinity}
      minPolarAngle={Math.PI / 4}
      maxPolarAngle={Math.PI / 2}
      minAzimuthAngle={-Infinity}
      maxAzimuthAngle={Infinity}
    />
    <Suspense key="objects" fallback={null} >
      <OBJ name="spoon" texture="metal.jpg" position={[42, 20, -42]} rotation={[0.5, 1, 0]} />
      <GLTF name="lighter" position={[0, -64, 9]} rotation={[1.6, 0, 0]} />
      <GLTF name="syringe" position={[0, 10, 0]} rotation={[0, 0, 0]} scale={[10, 10, 10]} />
      <Table color="tan" position={[0, -40, 0]} />
    </Suspense >
  </Canvas>)
}
    

export default Page

import React, { useMemo, useState } from "react";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader";
import * as THREE from "three"

export const OBJ = ({ name, ...props }) => {
    const [obj, setObj] = useState();
    useMemo(() => {
        if (props.texture === undefined) {
            var mtlLoader = new MTLLoader();
            mtlLoader.load(`${name}.mtl`, materials => {
                materials.preload();
                var objLoader = new OBJLoader();
                objLoader.setMaterials(materials);
                objLoader.load(`${name}.obj`, o => {
                    o.castShadow = true
                    o.receiveShadow = true
                    setObj(o)
                });
            });
        } else if (props.texture) {
            var objLoader = new OBJLoader()
            // objLoader.setMaterials(materials);
            objLoader.load(`${name}.obj`, o => {
                console.log("got o", o)
                var t = new THREE.TextureLoader().load(props.texture)
                var material = new THREE.MeshBasicMaterial({ 
                    map:t, 
                })
                o.children[0].material = material
                o.castShadow = true
                o.receiveShadow = true
                setObj(o)
            })
        }
    }, [name]);

    return obj ? <primitive object={obj} {...props} /> : null;
};

import React, { useMemo, useState } from "react";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

export const GLTF = ({ name, ...props }) => {
    const [obj, setObj] = useState();
    useMemo(() => {
        var gltfLoader = new GLTFLoader();
        gltfLoader.load(`${name}.gltf`, o => {
            // console.log('loaded', o.scene);
            o.castShadow = true
            o.receiveShadow = true
            setObj(o.scene)
        });
    }, [name]);

    return obj ? <primitive object={obj} {...props} /> : null;
};

import React, { useMemo, useState } from 'react'
import * as THREE from "three"
import { useFrame } from 'react-three-fiber'


export const Table = ({ texture, position, color, ...props }) => {
    const [obj, setObj] = useState()
    useMemo(() => {
        var geometry = new THREE.CylinderGeometry(256, 256, 100, 100, 100);
        let materialProps;
        if (texture) {
            var t = new THREE.TextureLoader().load(texture)
            materialProps = { map: t }
        } else {
            materialProps = { color }
        }
        var material = new THREE.MeshPhongMaterial(materialProps)
        material.receiveShadow = true
        material.needsUpdate = true
        var table = new THREE.Mesh(geometry, material);
        table.receiveShadow = true
        table.material.needsUpdate = true
        console.log('table', table)
        setObj(table)
    }, [])
    return obj ? <primitive object={obj} position={position} {...props} /> : null
}

Table.defaultProps = {
    color: 'white'
}

[drcmda]

All you need for shadows is shadowMap on the canvas, receiveShadow + castShadow on the mesh, castShadow on the light source. There is otherwise nothing different, you make shadows as you normally would in three js. Three js has lots of helpers. You get the canvas object via useThree, it is called gl, it is documented of course.

i think youre mixing up r3f and three, what you ask for (helpers, making shadows project correctly, etc) is not the scope of this lib, you need to know threejs, there's no way around it. if you know how to make shadows in three, there is nothing that would be different over here, other than maybe an optional shortcut like <Canvas shadowMap.

[drcmda]

example 1: https://codesandbox.io/s/r3f-contact-shadow-q23sw?file=/src/App.js
example 2: https://codesandbox.io/s/r3f-soft-shadows-dh2jc?file=/src/index.js:1770-1887

[drcmda]

ps. the way you put objects into the scene via usememo looks strange to me, you can simply do <mesh receiveShadow receiveShadow, that also works for gltfs, you dont have to traverse stuff: https://github.com/react-spring/gltfjsx (the laptop in example #1 was exported with that tool for instance). you also dont need to mess with juggling loader results through effects and usestate, there's useLoader which makes that a one-liner.

and the reason your code doesn't produce shadows:

gltfLoader.load(`${name}.gltf`, o => {
  o.castShadow = true // <--- this does nothing at all
  o.receiveShadow = true // <--- this does nothing at all

or

var material = new THREE.MeshPhongMaterial(materialProps)
material.receiveShadow = true // <--- this does nothing at all
material.needsUpdate = true // <--- this does nothing at all

that's wrong. cast/receiveShadow is only valid for object3d's (mesh, line, etc). you're putting it onto the loader-data, which is just a random object, and materials, where it doesn't belong.

[Fasani]

@bionicles drop this project into https://codesandbox.io and I will take a look. I'd be interested to see what's going on here.