three.js如何处理高精度DPI（每英寸像素点数）

现代手机像素密度一般都为3x以上，表示在1单位物理尺寸上显示了3个以上的像素。这样可以达到更高精度的视觉效果。three.js通过setPixelRatio方法来处理这个设备参数。或者自行计算并通过setSize来设置canvas的内部分辨率。

three, webgl, hd-dpi

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1318
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<canvas id="c"></canvas>
<script type="module">
import * as THREE from '//techbrood.com/threejs/build/three.module.js';

function main() {
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({canvas});

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);
  camera.position.z = 2;

const scene = new THREE.Scene();

{
    const color = 0xFFFFFF;
    const intensity = 1;
    const light = new THREE.DirectionalLight(color, intensity);
    light.position.set(-1, 2, 4);
    scene.add(light);
  }

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

function makeInstance(geometry, color, x) {
    const material = new THREE.MeshPhongMaterial({color});

const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

cube.position.x = x;

return cube;
  }

const cubes = [
    makeInstance(geometry, 0x44aa88,  0),
    makeInstance(geometry, 0x8844aa, -2),
    makeInstance(geometry, 0xaa8844,  2),
  ];
 
  function resizeRendererToDisplaySize(renderer) {
    const canvas = renderer.domElement;
    const pixelRatio = window.devicePixelRatio;
    const width  = canvas.clientWidth  * pixelRatio | 0;
    const height = canvas.clientHeight * pixelRatio | 0;
    const needResize = canvas.width !== width || canvas.height !== height;
    if (needResize) {
      renderer.setSize(width, height, false);
    }
    return needResize;
  }

function render(time) {
    time *= 0.001;

if (resizeRendererToDisplaySize(renderer)) {
      const canvas = renderer.domElement;
      camera.aspect = canvas.clientWidth / canvas.clientHeight;
      camera.updateProjectionMatrix();
    }

cubes.forEach((cube, ndx) => {
      const speed = 1 + ndx * .1;
      const rot = time * speed;
      cube.rotation.x = rot;
      cube.rotation.y = rot;
    });

renderer.render(scene, camera);

requestAnimationFrame(render);
  }

requestAnimationFrame(render);
}

main();
    
</script>

现代手机像素密度一般都为3x以上，表示在1单位物理尺寸上显示了3个以上的像素。这样可以达到更高精度的视觉效果。three.js通过setPixelRatio方法来处理这个设备参数。或者自行计算并通过setSize来设置canvas的内部分辨率。

three, webgl, hd-dpi

编辑器支持Emmet

快捷键

现代手机像素密度一般都为3x以上，表示在1单位物理尺寸上显示了3个以上的像素。这样可以达到更高精度的视觉效果。three.js通过setPixelRatio方法来处理这个设备参数。或者自行计算并通过setSize来设置canvas的内部分辨率。

three, webgl, hd-dpi

Three.js 3D精灵球（Pokeball）

three.js使用Points和RawShaderMaterial实现高性能3D点云

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：