search

pmndrs / gltfjsx

🎮 Turns GLTFs into JSX components
https://gltf.pmnd.rs
MIT License
4.41k stars 290 forks source link

Cannot read properties of null (reading 'addEventListener'). When trying to use my gltf with useGLTF #226

Open Wesley-dv opened 10 months ago

Wesley-dv commented 10 months ago

I keep getting the error: TypeError: Cannot read properties of null (reading 'addEventListener') image

When attempting to import my gltf with the gltfjsx generated file into my live WordPress website as a plugin. When i try the code locally then i get no errors but when i try it on my live website then the errors appears. The file path so that should be okay because those errors i already fixed. Can someone maybe help me? This is my code:

`/ Auto-generated by: https://github.com/pmndrs/gltfjsx Command: npx gltfjsx@6.2.10 public/models/dakkapel-model-2.gltf /

import React, { useRef } from 'react' import { useGLTF, useTexture } from '@react-three/drei'; import * as THREE from "three"; import { useCustomization } from '../context/Customization'; import { useFrame } from '@react-three/fiber'; import { Vector3 } from "three";

const ANIM_SPEED = 12; let frame_top_part_1_scale_y = 1; let frame_top_part_1_location_z = 0; let frame_top_part_2_location_y = 0; let frame_top_part_2_location_z = 0;

const Dakkapel = (props) => { const { nodes, materials } = useGLTF('/wp-content/plugins/sq-configurator/public/models/dakkapel-model-2.gltf'); const { rcWidth } = useCustomization();

const frame_top_part_1_changed = useRef(); const frame_top_part_2_changed = useRef();

useFrame((_state, delta) => { switch (rcWidth) { case "5": frame_top_part_1_scale_y = 1.2; frame_top_part_1_location_z = -0.89; frame_top_part_2_location_y = -0.25; frame_top_part_2_location_z = 0.16; break; case "4": frame_top_part_1_scale_y = 1; frame_top_part_1_location_z = 0; frame_top_part_2_location_y = 0; frame_top_part_2_location_z = 0; break; case "3": frame_top_part_1_scale_y = 0.8; frame_top_part_1_location_z = 0.87; frame_top_part_2_location_y = 0.49; frame_top_part_2_location_z = -0.23; break; case "2": frame_top_part_1_scale_y = 0.75; frame_top_part_1_location_z = 1.09; frame_top_part_2_location_y = 0.55; frame_top_part_2_location_z = -0.27; break; case "1": frame_top_part_1_scale_y = 0.70; frame_top_part_1_location_z = 1.31; frame_top_part_2_location_y = 0.61; frame_top_part_2_location_z = -0.31; break; case "0": frame_top_part_1_scale_y = 0.65; frame_top_part_1_location_z = 1.53; frame_top_part_2_location_y = 0.67; frame_top_part_2_location_z = -0.35; break; }

const targetScale_1 = new Vector3(1, 1, frame_top_part_1_scale_y);
frame_top_part_1_changed.current.scale.lerp(targetScale_1, delta * ANIM_SPEED);

const targetLocation_1 = new Vector3(0, frame_top_part_1_location_z, 0);
frame_top_part_1_changed.current.position.lerp(targetLocation_1, delta * ANIM_SPEED);

const targetLocation_2 = new Vector3(0, frame_top_part_2_location_z, frame_top_part_2_location_y);
frame_top_part_2_changed.current.position.lerp(targetLocation_2, delta * ANIM_SPEED);

});

//TEXTURES const frameTextureProps = useTexture({ map: './textures/frame/Wood_Plywood_Front_001_basecolor.jpg', normalMap: './textures/frame/Wood_Plywood_Front_001_normal.jpg', roughnessMap: './textures/frame/Wood_Plywood_Front_001_roughness.jpg', aoMap: './textures/frame/Wood_Plywood_Front_001_ambientOcclusion.jpg', });

frameTextureProps.map.repeat.set(2, 2); frameTextureProps.normalMap.repeat.set(2, 2); frameTextureProps.roughnessMap.repeat.set(2, 2); frameTextureProps.aoMap.repeat.set(2, 2);

frameTextureProps.map.wrapS = frameTextureProps.map.wrapT = frameTextureProps.normalMap.wrapS = frameTextureProps.normalMap.wrapT = frameTextureProps.roughnessMap.wrapS = frameTextureProps.roughnessMap.wrapT = frameTextureProps.aoMap.wrapS = frameTextureProps.aoMap.wrapT =

THREE.RepeatWrapping;

return ( <group {...props} dispose={null}> <mesh geometry={nodes.Window_horz_part_6.geometry} material={materials.Part1Mtl} rotation={[Math.PI / 2, 0, 0]} /> <mesh geometry={nodes.Window_vert_part_1.geometry} material={materials.Part1Mtl} rotation={[Math.PI / 2, 0, 0]} /> <mesh geometry={nodes.Frame_bottom_part_1.geometry} material={materials.Part2Mtl} rotation={[Math.PI / 2, 0, 0]}> <meshStandardMaterial {...frameTextureProps} /> <mesh geometry={nodes.Roof_bottom_part.geometry} material={materials.Part5Mtl} rotation={[Math.PI / 2, 0, 0]} /> <mesh geometry={nodes.Window_vert_part_2.geometry} material={materials.Part1Mtl} rotation={[Math.PI / 2, 0, 0]} /> <mesh geometry={nodes.Window_part_bottom.geometry} material={materials.Part1Mtl} rotation={[Math.PI / 2, 0, 0]} /> <mesh geometry={nodes.Roof_left_part.geometry} material={materials.Part5Mtl} rotation={[Math.PI / 2, 0, 0]} /> <mesh geometry={nodes.Frame_top_part_1.geometry} material={materials.Part2Mtl} rotation={[Math.PI / 2, 0, 0]} ref={frame_top_part_1_changed} > <meshStandardMaterial {...frameTextureProps} /> <mesh geometry={nodes.Window_horz_part_1.geometry} material={materials.Part1Mtl} rotation={[Math.PI / 2, 0, 0]} /> <mesh geometry={nodes.Frame_right_part.geometry} material={materials.Part2Mtl} rotation={[Math.PI / 2, 0, 0]} > <meshStandardMaterial {...frameTextureProps} /> <mesh geometry={nodes.Roof_right_part.geometry} material={materials.Part5Mtl} rotation={[Math.PI / 2, 0, 0]} /> <mesh geometry={nodes.Frame_top_part_2.geometry} material={materials.Part2Mtl} rotation={[Math.PI / 2, 0, 0]} ref={frame_top_part_2_changed} > <meshStandardMaterial {...frameTextureProps} /> <mesh geometry={nodes.Window_vert_part_5.geometry} material={materials.Part1Mtl} rotation={[Math.PI / 2, 0, 0]} /> <mesh geometry={nodes.Window_vert_part_4.geometry} material={materials.Part1Mtl} rotation={[Math.PI / 2, 0, 0]} /> <mesh geometry={nodes.Roof_top_part.geometry} material={materials.Part5Mtl} rotation={[Math.PI / 2, 0, 0]} /> <mesh geometry={nodes.Window_horz_part_5.geometry} material={materials.Part1Mtl} rotation={[Math.PI / 2, 0, 0]} /> <mesh geometry={nodes.Window_vert_part_6.geometry} material={materials.Part1Mtl} rotation={[Math.PI / 2, 0, 0]} /> <mesh geometry={nodes.Frame_left_part.geometry} material={materials.Part2Mtl} rotation={[Math.PI / 2, 0, 0]} > <meshStandardMaterial {...frameTextureProps} /> <mesh geometry={nodes.Window_vert_part_7.geometry} material={materials.Part1Mtl} rotation={[Math.PI / 2, 0, 0]} /> <mesh geometry={nodes.Window_horz_part_3.geometry} material={materials.Part1Mtl} rotation={[Math.PI / 2, 0, 0]} /> <mesh geometry={nodes.Frame_bottom_part_2.geometry} material={materials.Part5Mtl} rotation={[Math.PI / 2, 0, 0]} > <meshStandardMaterial {...frameTextureProps} /> <mesh geometry={nodes.Window_part_top.geometry} material={materials.Part1Mtl} rotation={[Math.PI / 2, 0, 0]} /> <mesh geometry={nodes.Window_vert_part_3.geometry} material={materials.Part1Mtl} rotation={[Math.PI / 2, 0, 0]} /> <mesh geometry={nodes.Window_horz_part_2.geometry} material={materials.Part1Mtl} rotation={[Math.PI / 2, 0, 0]} /> <mesh geometry={nodes.Window_horz_part_4.geometry} material={materials.Part1Mtl} rotation={[Math.PI / 2, 0, 0]} /> ) }

useGLTF.preload('/wp-content/plugins/sq-configurator/public/models/dakkapel-model-2.gltf')

export default Dakkapel;`