Issue with my three code nothing shows

Questions
1

HI! im new to using three.js and i’am stuck with an issue. I’ve watched 330480340 videos on youtube but no one could help !

Like i said in the title nothings shows up whereas i was following a tutorial

here is my code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <link rel="icon" type="image/svg+xml" href="favicon.svg"/>

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>STEEVEE</title>

  <link rel="stylesheet" type="text/css" href="./stylesheet.css">

</head>

<body>`
<script type="module">

  import * as THREE from './build/three.module.js';

  import { OrbitControls } from './js/OrbitControls.js';

  import { FlakesTexture } from './js/FlakesTexture.js';

  import { RGBELoader } from './js/RGBELoader.js';

  function init() {

        scene = new THREE.Scene();

        renderer = new THREE.WebGLRenderer({alpha:true,antialias:true});

        renderer.setSize(window.innerWidth,window.innerHeight);

        document.body.appendChild(renderer.domElement);

        camera = new THREE.PerspectiveCamera(50,window.innerWidth/window.innerHeight,1,1000);

        camera.position.set(0,0,500);

        controls = new OrbitControls(camera, renderer.domElement);

       

        pointlight = new THREE.PointLight(0xffffff,1);

        pointlight.position.set(200,200,200);

        scene.add(pointlight);

        let ballGeo = new THREE.SphereGeometry(100,64,64);

        let ballMat = new THREE.MeshPhysicalMaterial(ballMaterial);

        let ballMesh = new THREE.Mesh(ballGeo,ballMat);

        scene.add(ballMesh);

        animate(); // rendering loop

}

function animate() {

  controls.update();

  renderer.render(scene, camera);

  requestAnimationFrame(animate);

}

init();

</script>

</body>

</html>
2

:question: where :question:

As a beginner, look at the examples.
Collection of examples from discourse.threejs.org

Start with BeginnerExample

:slightly_smiling_face:

3

I’ve updated your code so you have a working live demo: Edit fiddle - JSFiddle - Code Playground

1 Like