渲染器锯齿属性: antialias
设置渲染器锯齿属性.antialias 的值可以直接在参数中设置,也可通过渲染器对象属性设置.
js
const renderer = new THREE.WebGLRenderer({
antialias: true,
});
// 或
renderer.antialias = true,
设备像素比: window.devicePixelRatio
设备像素比 devicePixelRatio 是 window 对象的一个属性,该属性的值和你的硬件设备屏幕相关,不同硬件设备的屏幕 window.devicePixelRatio 的值可能不同,可能就是 1、1.5、2.0 等其它值.
js
// 不同硬件设备的屏幕的设备像素比window.devicePixelRatio值可能不同
console.log('查看当前屏幕设备像素比', window.devicePixelRatio);
设置设备像素比: setPixelRatio()
如果你遇到你的 canvas 画布输出模糊问题,注意设置 renderer.setPixelRatio(window.devicePixelRatio).
注意:如果你的硬件设备设备像素比 window.devicePixelRatio 刚好是 1,那么是否设置.setPixelRatio()不会有明显差异,不过为了适应不同的硬件设备屏幕,通常需要执行该方法.
js
// 获取你屏幕对应的设备像素比.devicePixelRatio告诉threejs,以免渲染模糊问题
renderer.setPixelRatio(window.devicePixelRatio);
设置背景颜色: setClearColor()
js
renderer.setClearColor(0x444444, 1); //设置背景颜色
完整代码
js
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
const width = window.innerWidth;
const height = window.innerHeight;
const scene = new THREE.Scene();
const geometry = new THREE.SphereGeometry(50, 50, 50);
const material = new THREE.MeshPhongMaterial({
color: 0xff0000,
shininess: 80,
specular: 0xffffff,
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
const camera = new THREE.PerspectiveCamera(60, width / height, 1, 1000);
camera.position.set(200, 200, 200);
camera.lookAt(mesh.position);
const ambientLight = new THREE.AmbientLight(0xffffff, 1);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(100, 20, 30);
directionalLight.target = mesh;
scene.add(directionalLight);
const renderer = new THREE.WebGLRenderer();
renderer.antialias = true;
renderer.setSize(width, height);
// 获取你屏幕对应的设备像素比,devicePixelRatio告诉threejs,以免渲染模糊问题
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setClearColor(0x444444, 1); //设置背景颜色
const axesHelper = new THREE.AxesHelper(150);
scene.add(axesHelper);
const controls = new OrbitControls(camera, renderer.domElement);
const render = () => {
renderer.render(scene, camera);
window.requestAnimationFrame(render);
};
render();
document.body.appendChild(renderer.domElement);
// 不同硬件设备的屏幕的设备像素比window.devicePixelRatio值可能不同
console.log('查看当前屏幕设备像素比', window.devicePixelRatio);