#Mesh Not getting rendered

31 messages · Page 1 of 1 (latest)

light yoke
# 
import "./styles/style.css";
import * as THREE from "three";

//Canvas
const container = document.getElementById("scene-container");

// constants
const FOV = 75;
const aspect = container.clientWidth / container.clientHeight;
const near = 0.1;
const far = 1000;
const height = window.innerHeight;
const width = window.innerWidth;


// Scene
const scene = new THREE.Scene();
scene.background = new THREE.Color("skyblue");

// Camera
const camera = new THREE.PerspectiveCamera(FOV, aspect, near, far);
camera.position.setZ(30)
camera.lookAt(0, 0, 0);
console.log(camera.position);

// Cube
const geometry = new THREE.BoxGeometry(2, 2, 2);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00} );
const cube = new THREE.Mesh(geometry, material,1);
scene.add(cube);
console.log("cube spawned")

// Renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width  ,height);

// Container
container.appendChild(renderer.domElement);
container.style.background = "black";

renderer.render(scene, camera);
alpine vector
#

Add a light to your scene like this
const light = new THREE.DirectionalLight(0xffffff, 1) light.position.set(0, 5, 3) scene.add(light)

small fog
# 
import "./styles/style.css";
import * as THREE from "three";

//Canvas
const container = document.getElementById("scene-container");

// constants
const FOV = 75;
const aspect = container.clientWidth / container.clientHeight;
const near = 0.1;
const far = 1000;
const height = window.innerHeight;
const width = window.innerWidth;


// Scene
const scene = new THREE.Scene();
scene.background = new THREE.Color("skyblue");

// Camera
const camera = new THREE.PerspectiveCamera(FOV, aspect, near, far);
camera.position.setZ(30)
camera.lookAt(0, 0, 0);
console.log(camera.position);

// Cube
const geometry = new THREE.BoxGeometry(2, 2, 2);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00} );
const cube = new THREE.Mesh(geometry, material,1);
scene.add(cube);
console.log("cube spawned")

// Renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width  ,height);

// Container
container.appendChild(renderer.domElement);
container.style.background = "black";

renderer.render(scene, camera);

use a animationFrame to render.

light yoke
small fog
light yoke
#

No I tried on a mac , a pc and this super but its still didn't work

#

On pc I downloaded a template and edited a little

#

That started working so I am good for now

#

But I'll keep the thread alove I still have no idea how that error can be solved

light yoke
light yoke
#

had to put class as 'webgl'

#

@small fog , it' fixed now

small fog
nimble lake
light yoke
#

the webgl is required ,

#

after that it started working as usual

#

in the docs it is not written to include that class

#

which had me bamboozled

nimble lake
light yoke
#

the docs did not had them tho

light yoke
nimble lake
light yoke
#

but without it's not working

nimble lake
#

webgl class is likely defined in some css you copied from somewhere without knowing it is there 😔

light yoke
#

no i did not copy css code

#

, instead i rewrote the entire code my self

nimble lake
#

if you go to three.js github page, scroll down and click jsfiddle link, you will see this:

image.png
#

no class name assigned to <canvas...>, yet it works just fine