随笔分类 - three.js
摘要：效果图： 实现代码： //创建阴影画布 //创建画布 var canvas = document.createElement('canvas'); //设置画布大小 canvas.width = 128; canvas.height=128; //创建一个用于在画布上绘图的环境 var contex
阅读全文
摘要：要达到的效果 点的坐标相同，光圈在处理前被球面遮挡，处理后在球面显示。 处理前： 处理后： 核心代码实现 function createPointMesh( pos, texture ) { //创建点 var material = new THREE.MeshBasicMaterial( { ma
阅读全文
摘要：加载中国地图json数据 let loader = new THREE.FileLoader(); loader.load('model/chinaJson.json', function (data) { let jsonData = JSON.parse(data); initMap(jsonD
阅读全文
摘要：/** * 经纬度坐标转换为3D控件坐标 * lng:纬度 * lat:进度 * radius：半径 */ js方法转换 function lglt2xyz(lng,lat,radius){ const phi = (180+lng) * (Math.PI/180); const theta = (
阅读全文
摘要：/** * 通过两点绘制贝塞尔曲线 * v0：起点, * v3：终点 */ function addLines(v0, v3) { // 计算向量夹角 let angle = v0.angleTo(v3) * 270 / Math.PI / 10; // 0 ~ Math.PI let aLen =
阅读全文
摘要：实现效果 信号光圈由中心向外发散，并逐渐消失。 实现思路 使用画布制作光圈，以画布作为纹理，在循环渲染函数中改变mesh的尺寸和透明度。 具体实现 1、画布制作光圈 //创建画布 var canvas = document.createElement('canvas'); //设置画布大小 canv
阅读全文
摘要：效果： 基本思路 //一定要加上这两行，不然无法显示阴影 renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; //创建网格物体 //将网格物体设置为产生阴影的物体 //创建一个平面
阅读全文
摘要：基本思路 1、获取与鼠标射线相交的第一个物体 2、保留物体原来的颜色 3、改变物体的颜色 4、鼠标已开物体，将物体的颜色换回原来的颜色 实现代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</
阅读全文