@RabbitGeek_Fill (AMATO SORANO)posted at 2023-07-04

立方体の各面にそれぞれ違うテクスチャを適用するには？

Q&A

three.js TypeScript react-three-fiber drei

解決したいこと

Three.js + React-three-fiber + dreiにおいて、boxGeometryで出力した立方体の各面に対し、それぞれ異なるTextureを適用したい。

本文

上記3つのライブラリを利用してプログラミングをしている際、とある記事を参考にプログラムを組んだのですが、なぜかTextureが適用されません。

実行環境はGitPod、利用言語はTypeScript、使用ブラウザはChromeを利用しています。

発生している問題・エラー

エラーメッセージ等は出力されませんでした。
スクリーンショットは以下です。

※少し見づらくて申し訳ないのですが、床面から少し浮いた立方体が回転し、
影を床面に落としている状態であることを補足しておきます。

npm init viteと必要なライブラリをインストールするコマンドは入力してあるため、ライブラリが入っていないということはないと考えています。

該当するソースコード

import {OrbitControls,Plane,Stats, useCubeTexture} from "@react-three/drei"
import {Canvas, useFrame, useThree} from "@react-three/fiber"
import { Suspense, useRef } from "react"
import * as three from "three"


function CubeObj1(){
  const boxRef = useRef<three.Mesh>(null)

  useFrame(() => {
    boxRef.current!.rotation.y += 0.01
  })

  const {scene}  = useThree()
  scene.background=new three.Color("#222222")
  
  /* const texture = useCubeTexture([
    "normal_1.png","normal_2.png","normal_3.png","normal_4.png","plane.png","plane.png","plane.png"
  ],{path: "./"}) */

  const texturePath = [
    "normal_1.png",
    "normal_2.png",
    "normal_3.png",
    "normal_4.png",
    "plane.png",
    "plane.png"
  ]
  
  /* const cubetexture = new three.CubeTextureLoader().load(texturePath) */

  const cubetexture = useCubeTexture(texturePath,{path:"./"})
  /* const frash_texture = useCubeTexture([
    "light_1.png","light_2.png","light_3.png","light_4.png","plane.png","plane.png","plane.png"
  ],{path: "./"}) */
  return (
    <>
      <mesh ref={boxRef} position={[-1,1,0]} castShadow receiveShadow>
        <boxGeometry args={[1,1,1]}/>
        <meshStandardMaterial 
          envMap={cubetexture} 
          attach="material" 
          metalness={1} 
        />
      </mesh>
    </>
  )
}

function App() {
  
  return (
    <>
      <Canvas
        camera={
          {
            position: [0,5,8],
            fov: 50,
            aspect: window.innerWidth / window.innerHeight,
            near: 0.1,
            far: 2000
          }}
          dpr={window.devicePixelRatio}
          shadows>
          <color attach="background" args={["#1e1e1e"]} />
          <OrbitControls />
          <ambientLight intensity={0.1} />
          <directionalLight
            position={[5,5,5]}
            intensity={1}
            castShadow
            shadow-mapSize-width={2048}
            shadow-mapSize-height={2048}
          />
        <Suspense fallback={null}>
          <Plane rotation={[-Math.PI / 2, 0, 0]} args={[5, 5]} receiveShadow>
              <meshStandardMaterial color="#fff" side={three.DoubleSide} />
          </Plane>
          <CubeObj1 />
        </Suspense>
      </Canvas>
    </>
  )
}

export default App

package.json

{
  "name": "viter3test",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@react-three/drei": "^9.77.10",
    "@react-three/fiber": "^8.13.4",
    "@types/three": "^0.152.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "three": "^0.154.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.37",
    "@types/react-dom": "^18.0.11",
    "@typescript-eslint/eslint-plugin": "^5.59.0",
    "@typescript-eslint/parser": "^5.59.0",
    "@vitejs/plugin-react": "^4.0.0",
    "eslint": "^8.38.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "typescript": "^5.0.2",
    "vite": "^4.3.9"
  }
}

public直下に画像データをいくつか格納しています。

normal_n.png(nは1~4)
light_n.png(nは1~4)
plane.png(柄なしのTexture)

参考URLについては
https://qiita.com/nemutas/items/f890bcc3caf0f5cbc46f
のみとなります。

自分で試したこと

publicのパスが間違っているかどうかを確認するため、目視でpublicフォルダの中身を確認
開発者ツールのSourcesから画像が正常に出力されているかを確認。」
ファイル名が異なって指定できていないことがないように、確認を行い、間違っていれば訂正。
package.jsonを確認し、プログラムを構成する上で、必要なパッケージがインストール、インポートできていないことがないかどうかの確認を行った。

以上です。皆様からのご回答をお待ちしております。

Are you sure you want to delete the question?