CODEWITHSUNDEEP
three.jsqwikjs
SSFJHGKJFHG
SSFJHGKJFHG

Reputation: 111

How can I display a GLTF File using Qwik and Three Js?

I have this current code setup in the qwik js framework to display a gltf file inside of my website using three js, but for whatever reason it simply doesn't display it. There are no error logs or anything either. Are there any nuances for qwik or react that I'm not using? I read on the docs for qwik that in order to use three js efficiently one can have a react component and use it within there. It's what I tried with this code, but to no avail. Any help would be greatly appreciated. Thanks!

// ThreeJSScene.jsx
/** @jsxImportSource react */
import React, { useEffect } from 'react';
import { qwikify$ } from '@builder.io/qwik-react';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

import * as THREE from 'three';

const ThreeJSScene = () => {
  useEffect(() => {
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.outputColorSpace = THREE.SRGBColorSpace;

    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0x000000);
    renderer.setPixelRatio(window.devicePixelRatio);

    document.body.appendChild(renderer.domElement);

    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.set(4, 5, 11);
    camera.lookAt(0, 0, 0);

    const groundGeometry = new THREE.PlaneGeometry(20, 20, 32, 32);
    groundGeometry.rotateX(-Math.PI / 2);
    const groundMaterial = new THREE.MeshStandardMaterial({
      color: 0x555555,
      side: THREE.DoubleSide
    });

    const groundMesh = new THREE.Mesh(groundGeometry, groundMaterial);
    scene.add(groundMesh);

    const spotLight = new THREE.SpotLight(0xffffff, 3, 100, 0.2, 0.5);
    spotLight.position.set(0, 25, 0);
    scene.add(spotLight);

    const loader = new GLTFLoader().setPath('frontend/public');
    loader.load('bane10-20.gltf', (gltf) => {
      const mesh = gltf.scene;
      mesh.position.set(0,1.05,-1);
      scene.add(mesh);
    });

    function animate() {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
    }

    animate();

    return () => {
      // Clean up on component unmount
      document.body.removeChild(renderer.domElement);
    };
  }, []);

  return <div />;
};

export const QThreeJSScene = qwikify$(ThreeJSScene);

import { QThreeJSScene } from '~/components/Banana';


...


<div class="hero-preview-wrapper">
   <QThreeJSScene/>
</div>

Upvotes: 0

Views: 76

Answers (1)

Łukasz Daniel Mastalerz
Łukasz Daniel Mastalerz

Reputation: 2217

Your light intensity is too low.

Try set:

const spotLight = new THREE.SpotLight(0xffffff, 3000, 100, 0.2, 0.5);
spotLight.position.set(0, 25, 0);
scene.add(spotLight);

or set additional light

const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 10, 7.5);
scene.add(light);

BTW PointLight or SpotLight are specific lights, always keep in mind its position and intensity (especially when you use Three.js-R>154).

Upvotes: 1

Related Questions