This post has been de-listed
It is no longer included in search results and normal feeds (front page, hot posts, subreddit posts, etc). It remains visible only via the author's post history.
I am trying to get the tag element by the id 'stage' and perform some tasks but it return null am I missing something, not the first time I have problem with this:
<canvas id="stage"></canvas>
tried with Jquery and I get the same mistake.
//JS
import Menu from './Menu';
import * as THREE from "three";
import C from 'cannon';
const distance = 15;
export default class Scene {
constructor() {
this.$container = document.getElementById("stage");
this.W = window.innerWidth;
this.H = window.innerHeight;
this.setup();
this.bindEvents();
}
bindEvents() {
window.addEventListener("resize", () => {
this.onResize();
});
}
// Setups
setup() {
// Set Three components
this.scene = new THREE.Scene();
this.scene.fog = new THREE.Fog(0x202533, 1, 100);
this.setCamera();
this.setLights();
this.setRender();
this.addObjects();
}
setRender() {
this.renderer = new THREE.WebGLRenderer({
antialias: true,
canvas: this.$container
});
this.renderer.setClearColor(0x202533);
this.renderer.setSize(this.W, this.H);
this.renderer.setPixelRatio(window.devicePixelRatio);
this.renderer.shadowMap.enabled = true;
this.renderer.setAnimationLoop(() => {
this.draw();
});
}
setCamera() {
const aspect = this.W / this.H;
this.camera = new THREE.OrthographicCamera(
-distance * aspect,
distance * aspect,
distance,
-distance,
-1,
100
);
this.camera.position.set(-10, 10, 10);
this.camera.lookAt(new THREE.Vector3());
}
setLights() {
const ambientLight = new THREE.AmbientLight(0xcccccc);
this.scene.add(ambientLight);
const foreLight = new THREE.DirectionalLight(0xffffff, 0.5);
foreLight.position.set(5, 5, 20);
this.scene.add(foreLight);
const backLight = new THREE.DirectionalLight(0xffffff, 1);
backLight.position.set(-5, -5, -10);
this.scene.add(backLight);
}
// Actions
addObjects() {
this.menu = new Menu(this.scene);
}
// Loop
draw() {
this.renderer.render(this.scene, this.camera);
}
// Handlers
onResize() {
this.W = window.innerWidth;
this.H = window.innerHeight;
this.camera.aspect = this.W / this.H;
this.camera.updateProjectionMatrix();
this.renderer.setSize(this.W, this.H);
}
}
//HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="dist/app.css">
<script type="text/javascript" src="dist/index.js"></script>
<title></title>
</head>
<body>
<nav class="mainNav | visually-hidden">
<canvas id="stage"></canvas>
<ul>
<li><a href="#">Watermelon</a></li>
<li><a href="#">Banana</a></li>
<li><a href="#">Strawberry</a></li>
</ul>
</nav>
</body>
</html>
Subreddit
Post Details
- Posted
- 4 years ago
- Reddit URL
- View post on reddit.com
- External URL
- reddit.com/r/CodingHelp/...