how to set three js canvas width 100 25

Solutions on MaxInterview for how to set three js canvas width 100 25 by the best coders in the world

showing results for - "how to set three js canvas width 100 25"
Anna
06 Mar 2020
1body { margin: 0; }
2canvas { width: 100vw; height: 100vh; display: block; }
Samantha
05 Sep 2019
1"use strict";
2
3const renderer = new THREE.WebGLRenderer();
4document.body.appendChild(renderer.domElement);
5
6// There's no reason to set the aspect here because we're going
7// to set it every frame anyway so we'll set it to 2 since 2
8// is the the aspect for the canvas default size (300w/150h = 2)
9const  camera = new THREE.PerspectiveCamera(70, 2, 1, 1000);
10camera.position.z = 400;
11
12const scene = new THREE.Scene();
13const geometry = new THREE.BoxGeometry(200, 200, 200);
14const material = new THREE.MeshPhongMaterial({
15  color: 0x555555,
16  specular: 0xffffff,
17  shininess: 50,
18  shading: THREE.SmoothShading
19});
20
21const mesh = new THREE.Mesh(geometry, material);
22scene.add(mesh);
23
24const light1 = new THREE.PointLight(0xff80C0, 2, 0);
25light1.position.set(200, 100, 300);
26scene.add(light1);
27
28function resizeCanvasToDisplaySize() {
29  const canvas = renderer.domElement;
30  const width = canvas.clientWidth;
31  const height = canvas.clientHeight;
32  if (canvas.width !== width ||canvas.height !== height) {
33    // you must pass false here or three.js sadly fights the browser
34    renderer.setSize(width, height, false);
35    camera.aspect = width / height;
36    camera.updateProjectionMatrix();
37
38    // set render target sizes here
39  }
40}
41
42function animate(time) {
43  time *= 0.001;  // seconds
44
45  resizeCanvasToDisplaySize();
46
47  mesh.rotation.x = time * 0.5;
48  mesh.rotation.y = time * 1;
49
50  renderer.render(scene, camera);
51  requestAnimationFrame(animate);
52}
53
54requestAnimationFrame(animate);