thee.js react.js code

Shehab Morgan answered on July 17, 2023 Popularity 1/10 Helpfulness 1/10

answer thee.js react.js code

thee.js react.js code

Comment

import React, { useRef, useEffect } from 'react';
import * as THREE from 'three';

const ThreeScene = () => {
  const sceneRef = useRef(null);

  useEffect(() => {
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer();

    renderer.setSize(window.innerWidth, window.innerHeight);
    sceneRef.current.appendChild(renderer.domElement);

    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    camera.position.z = 5;

    const animate = () => {
      requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
    };

    animate();

    return () => {
      // Cleanup code, if needed
      renderer.dispose();
    };
  }, []);

  return <div ref={sceneRef} />;
};

export default ThreeScene;

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: chat.openai.com

Tags: javascript

Link to this answer
Share Copy Link

Contributed on Jul 17 2023

Shehab Morgan

0 Answers Avg Quality 2/10

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

thee.js react.js code

Contents

More Related Answers

thee.js react.js code

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.