File three.core.min.js

Questions
1

Good evening everyone

I realize my first scene
my code ```html

<script type="importmap">
    {
    "imports": {
    "three": "./three.module.min.js",
    "three/addons/": "./jsm/"
    }
    }
    </script>


    
   <script type="module" src="./main.js"></script>
```
2

my JS


import * as THREE from 'three';

console.log(THREE);


const canvas=document.querySelector(".webgl");
const scene=new THREE.Scene();

const geometry=new THREE.BoxGeometry(1,1,1);

const material=new THREE.MeshBasicMaterial({color:'red'});
const mesh=new THREE.Mesh(geometry,material);
scene.add(mesh)

const sizes={
    width:800,
    height:600
}

const camera=new THREE.PerspectiveCamera(75,sizes.width / sizes.height)
scene.add(camera);

const renderer=new THREE.WebGLRenderer(
    {
        canvas
    }
);
scene.add(renderer)```
3

I have this message

aze
aze1003×650 79.2 KB

Can I have some explication why am I seeing this ?

4

renderer is not an object that you either can or need to add to your scene, you can add any instance of an object3D to your scene, all primative objects such as Mesh Line Group etc extend Object3D and can be added to a scene, the renderer is not an extension of Object3D, it is used outside of the scene graph to render the scene

3 Likes
5

…also, you need to render your scene

renderer.render(scene, camera)

and you will see black screen because camera is inside box… move slightly backwards:

camera.position.z = 3;
1 Like