Recommended: Add NSDT Scene Editor to your 3D toolchain
Other series of tools: NSDT Jianshi digital twin
WebGL renderer settings (aliasing and blurring)
In general actual development, the WebGL renderer of threejs needs some common basic configurations. This lesson will give you a brief introduction, such as rendering blur or aliasing.
Renderer aliasing properties.antialias
Setting the value of the renderer's aliasing property .antialiascan be set directly in the parameters, or through the properties of the renderer object.
const renderer = new THREE.WebGLRenderer({
antialias:true,
});
or
renderer.antialias = true,
device pixel ratiowindow.devicePixelRatio
If you have a web front-end foundation, you should understand windowthe object. The device pixel ratio.devicePixelRatio is an attribute of the window object. The value of this attribute is related to your hardware device screen . The value of the screen of different hardware devices window.devicePixelRatiomay be different, which may be 1, 1.5, 2.0 and other values.
// 不同硬件设备的屏幕的设备像素比window.devicePixelRatio值可能不同
console.log('查看当前屏幕设备像素比',window.devicePixelRatio);
Set device pixel ratio.setPixelRatio()
If you're having issues with blurry output from your canvas, pay attention to the settings renderer.setPixelRatio(window.devicePixelRatio).
Note: Note that the device pixel ratio of your hardware device window.devicePixelRatiois exactly 1, so there will be no obvious difference whether it is executed or .setPixelRatio()not, but in order to adapt to different hardware device screens, it is usually necessary to execute this method.
// 获取你屏幕对应的设备像素比.devicePixelRatio告诉threejs,以免渲染模糊问题
renderer.setPixelRatio(window.devicePixelRatio);
set background color.setClearColor()
renderer.setClearColor(0x444444, 1); //设置背景颜色Previous: Three.js Tutorial: Highlight Mesh Material Phong (mvrlink.com)
Next: Three.js Tutorial: gui.js library (visually changing 3D scenes) (mvrlink.com)