react-three/dreiで球体の内側にtextureを張り付ける

Question

前提・実現したいこと

360度動画を再生できるWebサイトを作成しているのですが、球体の内側にカメラを置いた際に球体の内側にtextureがなく、真っ白になります。
球体の内側にtextureを張り付ける方法を教えていただきたいです。

jQueryでは下記サイトを参考に問題なく動作したのですが、Reactに移行すると内側が白くなってしまいました。
https://sterfield.co.jp/designer/three-js%E3%81%AB%E3%82%88%E3%82%8Bwebgl%E3%81%A7360%E5%BA%A6%E3%83%91%E3%83%8E%E3%83%A9%E3%83%9E%E8%A1%A8%E7%A4%BA/

該当のソースコード

import * as THREE from 'three'
import React, { useState, useRef, Suspense, useEffect } from 'react'
import { Canvas, useFrame, useThree } from '@react-three/fiber'
import { Vector3, PerspectiveCamera } from 'three';
import { OrbitControls } from "@react-three/drei"

// import classes from  '../css/VideoPlayer.module.css'

export const ThreeDimVideoPlayer = (props) => {

    const style = {
        height: '600px'
    }
    
    return (
        <Canvas style={style} camera={{ fov: 75, position: [1, 1, 1], near: 1,far: 5000, aspect: 2 }}>
            <Suspense fallback={<>...Loading</>}>
                <pointLight position={[10, 10, 10]} />
                <Cube {...props} position={[1.2,0,0]} />
                // 確認のため箱設置
                <Box position={[-1.2, 0, 0]} />
            </Suspense>
            <axesHelper />
            <OrbitControls />
        </Canvas>
        )
};

const Cube = (props) => {

    const mesh = useRef();

    const [canMove, setCanMove] = useState(false);

    const [startX, setStartX] = useState(0);
    const [startY, setStartY] = useState(0);
    const [startZ, setStartZ] = useState(0);

    const [video] = useState(() => {
        const vid = document.createElement("video");
        vid.src = 'http://localhost:8000' + props.video;
        vid.setAttribute( 'webkit-playsinline', 'webkit-playsinline' );
        vid.crossOrigin = "Anonymous";
        vid.loop = true;
        vid.muted = true;
        vid.play();
        return vid;
    })

    return (
        <mesh
            ref={mesh}
            scale={[1, 1, 1]}>
            <sphereBufferGeometry attach="geometry" args={[1, 30, 30]} translate={[30,0,0]} />
            <meshBasicMaterial transparent={true} opacity={0.5} translate={30,0,0}>
                <videoTexture attach="map" args={[video]} generateMipmaps={false} format={THREE.RGBFormat} minFilter={THREE.NearestFilter} maxFilter={THREE.NearestFilter} />
            </meshBasicMaterial>
            {/* <boxGeometry args={[1, 1, 1]} />
            <meshStandardMaterial color='hotpink' /> */}
        </mesh>
    )
}

function Box(props) {
    // This reference will give us direct access to the mesh
    const mesh = useRef()
    // Set up state for the hovered and active state
    const [hovered, setHover] = useState(false)
    const [active, setActive] = useState(false)
    // Rotate mesh every frame, this is outside of React without overhead
    useFrame((state, delta) => (mesh.current.rotation.x += 0.01))
    // Return view, these are regular threejs elements expressed in JSX
    return (
      <mesh
        {...props}
        ref={mesh}
        scale={active ? 1.5 : 1}
        onClick={(event) => setActive(!active)}
        onPointerOver={(event) => setHover(true)}
        onPointerOut={(event) => setHover(false)}>
        <boxGeometry args={[1, 1, 1]} translate={[30,0,0]} />
        <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} opacity={0.5} translate={30,0,0} />
      </mesh>
    )
  }

試したこと

translateやopacityの問題かと思い、一通りつけてみたのですが変わりませんでした。

補足情報（FW/ツールのバージョンなど）

"three" "version": "0.127.0"
"@react-three/fiber" "version": "6.0.10",

Answer 1

textureを張り付ける場所を指定できました。
https://threejs.org/docs/#api/en/materials/Material.side

<meshBasicMaterial side={THREE.BackSide}> <videoTexture attach="map" args={[video]} /> </meshBasicMaterial>