分类: threejs

three.js 使用 ShaderMaterial 材质深度信息丢失问题

问题在于对数深度缓冲区的使用。传递给 ShaderMaterial 的着色器不能立即使用。 解决方案一 禁用对数深度缓冲区 logarithmicDepthBuffer: false   解决方案二 将几段 glsl 代码附加到三个提供的着色器中,如下所示: import { ShaderChunk } from ‘three’; const VertexShader = ShaderChunk.common + ‘\n’ + ShaderChunk.logdepthbuf_pars_vertex + ` … void ma …

Threejs 性能优化之(多实例渲染 and 合并)

InstancedMesh是R110之后出现 官网简介: A special version of Mesh with instanced rendering support. Use InstancedMesh if you have to render a large number of objects with the same geometry and material but with different world transformations. The usage of InstancedMesh will help you to reduce the number of dr …

Threejs 光与影

 读过本文章后,你将了解在Threejs中的光与影。 现实世界中,物体显示的颜色是由物体本身的颜色及光照的颜色相互叠加而成,在Threejs的世界里同样如此。 我们看到的景象都是趋于光的反射,才生成的。有的物体会发光,有的不放光,会自发光的物体叫做光源 中,有了光,物体才会有光暗的效果。 开启光影的条件 渲染器开启阴影渲染 光源开启投射阴影 物体开启投射阴影 物体开启接收阴影 renderer.shadowMap.enabled = true; spotLight.castShadow = true; mesh.castShadow = true; plane.receiveShadow = …

Threejs 创建3D交互空间

读过本文章后,你将了解如何在DOM中创建一个可交互式的3D空间。 注:Three.js需要一定的逻辑和数学知识。  1.创建渲染器 首先获取DOM元素,定义一个容器变量。 const container = document.getElementById(‘container’); 然后,将使用Web GL渲染器显示场景。 const renderer = new THREE.WebGLRenderer({   antialias: true }); 设置渲染器并指定参数 antialias (抗锯齿),默认渲染器不会开启抗锯齿。 接下来设置renderer的大小,re …