Loading threejs
<script type="module"
import * as THREE from './resources/threejs/r119/build/three.module.js';
</script
It's important you put type="module" in the script tag. This enables us to use the import keyword to load three.js. There are other ways to load three.js but as of r106 using modules is the recommended way. Modules have the advantage that they can easily import other modules they need. That saves us from having to manually load extra scripts they are dependent on.
Next we need is a <canvas tag so
<body
<canvas id="c"</canvas
</body
We will ask three.js to draw into that canvas so we need to look it up.
script type="module">
import * as THREE from './resources/threejs/r119/build/three.module.js';
function main() {
const canvas = document.querySelector('#c');
const renderer = new THREE.WebGLRenderer({canvas});
...
</script
After we look up the canvas we create a WebGLRenderer. The renderer is the thing responsible for actually taking all the data you provide and rendering it to the canvas. In the past there have been other renderers like CSSRenderer, a CanvasRenderer and in the future there may be a WebGL2Renderer or WebGPURenderer. For now there's the WebGLRenderer that uses WebGL to render 3D to the canvas.
Note there are some esoteric details here. If you don't pass a canvas into three.js it will create one for you but then you have to add it to your document. Where to add it may change depending on your use case and you'll have to change your code so I find that passing a canvas to three.js feels a little more flexible. I can put the canvas anywhere and the code will find it where as if I had code to insert the canvas into to the document I'd likely have to change that code if my use case changed.
Next up we need a camera. We'll create a PerspectiveCamera.
const fov = 75;
const aspect = 2; // the canvas default
const near = 0.1;
const far = 5;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
fov is short for field of view. In this case 75 degrees in the vertical dimension. Note that most angles in three.js are in radians but for some reason the perspective camera takes degrees.
aspect is the display aspect of the canvas. We'll go over the details in another article but by default a canvas is 300x150 pixels which makes the aspect 300/150 or 2.
near and far represent the space in front of the camera that will be rendered. Anything before that range or after that range will be clipped (not drawn).
Those 4 settings define a "frustum". A frustum is the name of a 3d shape that is like a pyramid with the tip sliced off. In other words think of the word "frustum" as another 3D shape like sphere, cube, prism, frustum.
The height of the near and far planes are determined by the field of view. The width of both planes is determined by the field of view and the aspect.
Anything inside the defined frustum will be be drawn. Anything outside will not.
The camera defaults to looking down the -Z axis with +Y up. We'll put our cube at the origin so we need to move the camera back a little from the origin in order to see anything.
camera.position.z = 2;
References:
https://threejsfundamentals.org/threejs/lessons/threejs-fundamentals.html
No comments:
Post a Comment