threejs相关问题

1.threejs 3d热力图如何制作？

• 创建heatmap，创建热力图

var heatmap = h337.create({
  container: document.getElementById('heatmap')
});

• 热力图对应的位置温度数据设置

heatmap.setData({
  max: max,
  data: points
});

• 赋值贴图

let texture = new THREE.Texture(heatmap._config.container.children[0]);  
texture.needsUpdate = true;
heatMapMaterial.uniforms.heatMap.value = texture;

• 双面渲染--heatMapMaterial.side = THREE.DoubleSide;
• 创建网格，加入场景

let heatMapPlane = new THREE.Mesh(heatMapGeo, heatMapMaterial)  
scene.add(heatMapPlane)

2.threejs点击模型出现光晕的边框线特效核心

• EffectComposer，OutlinePass
• 呼吸显示的颜色--visibleEdgeColor
• 呼吸消失的颜色--hiddenEdgeColor

composer = new EffectComposer( renderer );

const renderPass = new RenderPass( scene, camera );
composer.addPass( renderPass );

outlinePass = new OutlinePass( new THREE.Vector2( window.innerWidth, window.innerHeight ), scene, camera );
outlinePass.edgeStrength = 10.0 // 边框的亮度
outlinePass.edgeGlow = 1// 光晕[0,1]
outlinePass.usePatternTexture = false // 是否使用父级的材质
outlinePass.edgeThickness = 1.0 // 边框宽度
outlinePass.downSampleRatio = 1 // 边框弯曲度
outlinePass.pulsePeriod = 5 // 呼吸闪烁的速度
outlinePass.visibleEdgeColor.set(parseInt(0x00ff00)) // 呼吸显示的颜色
outlinePass.hiddenEdgeColor = new THREE.Color(0, 0, 0) // 呼吸消失的颜色
outlinePass.clear = true
composer.addPass( outlinePass );