3D字体
// 字体
const cubeSize = 30;
const material = new THREE.MeshNormalMaterial();
const loader = new THREE.FontLoader();
const textMesh = new THREE.Mesh();
const createTypo = font => {
const word = "pisces";
const typoProperties = {
font: font,
size: cubeSize,
height: cubeSize / 5,
bevelEnabled: true,
bevelThickness: 2,
bevelSize: 2,
bevelOffset: 10,
bevelSegments: 2,
};
const text = new THREE.TextGeometry(word, typoProperties);
textMesh.geometry = text;
textMesh.material = material;
textMesh.position.x = cubeSize * -1;
textMesh.position.y = cubeSize * 1;
textMesh.position.z = cubeSize * -3;
scene.add(textMesh);
};
loader.load(
"https://threejs.org/examples/fonts/helvetiker_regular.typeface.json",
createTypo);
几何体
// 材质
var BasicMaterial = new THREE.MeshBasicMaterial({
color: 0xffff00,
wireframe: true
});
/**线/
function createLine(){
let geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(15,15,0));
geometry.vertices.push(new THREE.Vector3(-15,2,0));
let material = new THREE.LineBasicMaterial({color:0xff0000}); //注意这里使用的是LineBasicMaterial
let line = new THREE.Line(geometry,material);
return line;
} /**虚线/
function createDashedLine(){
let geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(15,15,0));
geometry.vertices.push(new THREE.Vector3(-15,2,0));
geometry.computeLineDistances(); //注意加上这句
let material = new THREE.LineDashedMaterial({color:0xff0000,dashSize:3,gapSize:2,lineWidth:1 });
let line = new THREE.LineSegments(geometry,material);
return line;
}
/**立方体
* THREE.CubeGeometry(width,height,depth,widthSegments,heightSegments, depthSegments)
* width：x方向上的长度
* height：y方向上的长度
* depth：z方向上的长度
* widthSegments：x方向上的分段数（可选，缺省值1）
* heightSegments：y方向上的分段数（同上）
* depthSegments：z方向上的分段数（同上）
*/
var cube = new THREE.Mesh(new THREE.CubeGeometry(20, 10, 30, 2, 2, 3), BasicMaterial);
cube.position.y = 10
cube.position.x = -50
cube.castShadow = true;
scene.add(cube);
/**平面
* THREE.PlaneGeometry(width, height, widthSegments, heightSegments)
*width：x方向上的长度
* height：y方向上的长度
* widthSegments：x方向上的分段数（可选，缺省值1）
* heightSegments：y方向上的分段数（同上
*/
/**球体
* THREE.SphereGeometry(radius,segmentsWidth,segmentsHeight,phiStart, phiLength, thetaStart, thetaLength)
radius：半径
segmentsWidth：经度上的分段数
segmentsHeight：纬度上的分段数
phiStart：经度开始的弧度
phiLength：经度跨过的弧度
thetaStart：纬度开始的弧度
thetaLength：纬度跨过的弧度
*/
// var sphereGeometry = new THREE.SphereGeometry(30, 80, 60)
// var sphereGeometry = new THREE.SphereGeometry(3, 8, 6, Math.PI / 6, Math.PI / 3)
// var sphereGeometry = new THREE.SphereGeometry(3, 8, 6, Math.PI / 2, Math.PI, Math.PI / 6, Math.PI / 2)
var sphereGeometry = new THREE.SphereGeometry(15, 8, 6, 0, Math.PI * 2, Math.PI / 6, Math.PI / 3)
var Sphere = new THREE.Mesh(sphereGeometry, BasicMaterial);
Sphere.position.z = -10
Sphere.position.x = 80
scene.add(Sphere);
/**圆形
* THREE.CircleGeometry(radius, segments, thetaStart, thetaLength)
* radius：半径
* segmentsWidth：经度上的分段数
* segmentsHeight：纬度上的分段数
* thetaStart：纬度开始的弧度
* thetaLength：纬度跨过的弧度
*/
/**圆柱体
* THREE.CylinderGeometry(radiusTop,radiusBottom,height,radiusSegments, heightSegments, openEnded)
radiusTop：顶面半径
radiusBottom：底面的半径
height：圆柱体的高度
radiusSegments：顶面与底面的分段数
heightSegments：侧面的分段数
openEnded：是否没有顶面和底面，布尔类型，缺省值为false，表示有顶面和底面。
当radiusTop和radiusBottom设置为相同的值时，创建的是一个标准圆柱体：
*/
var CylinderGeometry = new THREE.CylinderGeometry(4, 6, 20, 18, 3)
var Cylinder = new THREE.Mesh(CylinderGeometry, BasicMaterial);
Cylinder.position.z = -10
Cylinder.position.x = 50
scene.add(Cylinder);
/**
* 正四面体，
* THREE.TetrahedronGeometry(radius, detail)
* 正八面体，
* THREE.OctahedronGeometry(radius, detail)
* 正二十面体
* THREE.IcosahedronGeometry(radius, detail)
* radius是半径；detail是细节层次（Level of Detail）的层数
*/
var TetrahedronGeometry = new THREE.TetrahedronGeometry(3)
var Tetrahedron = new THREE.Mesh(TetrahedronGeometry, BasicMaterial);
scene.add(Tetrahedron);
/**圆环面
* THREE.TorusGeometry(radius, tube, radialSegments, tubularSegments, arc)
* radius：圆环半径
tube：管道半径
radialSegments：径向的分段数
tubularSegments：管的分段数，详见下图
arc：圆环面的弧度，缺省值为Math.PI * 2
new THREE.TorusGeometry(3, 1, 4, 8)创建一个粗糙的圆环面：
new THREE.TorusGeometry(3, 1, 12, 18)创建一个较为精细的圆环面
new THREE.TorusGeometry(3, 1, 4, 8, Math.PI / 3 * 2)创建部分圆环面
*/
/**圆环结
* THREE.TorusKnotGeometry(radius,tube,radialSegments,tubularSegments, p, q, heightScale)
radius：圆环半径
tube：管道半径
radialSegments：径向的分段数
tubularSegments：管的分段数
p：p\Q:对knot(节)状方式有效,控制曲线路径缠绕的圈数，其中p决定垂直方向的参数（可缺省）
q：水平方向的参数（可缺省）
heightScale：z轴方向上的缩放，默认值1
*/
var TorusKnotGeometry = new THREE.TorusKnotGeometry(2, 0.5, 32, 8)
var TorusKnot = new THREE.Mesh(TorusKnotGeometry, BasicMaterial);
TorusKnot.position.y = 10
TorusKnot.position.x = 0
scene.add(TorusKnot);
// 初始化几何形状
var geometry = new THREE.Geometry();
// 设置顶点位置
// 顶部4顶点
// geometry.vertices.push(new THREE.Vector3(-1, 2, -1));
// geometry.vertices.push(new THREE.Vector3(1, 2, -1));
geometry.vertices.push(new THREE.Vector3(0, -6, 0));
// geometry.vertices.push(new THREE.Vector3(-1, 2, 1));
// 底部4顶点
geometry.vertices.push(new THREE.Vector3(-2, 0, -2));
geometry.vertices.push(new THREE.Vector3(2, 0, -2));
geometry.vertices.push(new THREE.Vector3(2, 0, 2));
geometry.vertices.push(new THREE.Vector3(-2, 0, 2));
// 设置顶点连接情况
// 顶面
geometry.faces.push(new THREE.Face3(0, 1, 3));
geometry.faces.push(new THREE.Face3(1, 2, 3));
geometry.faces.push(new THREE.Face3(0, 2, 3));
geometry.faces.push(new THREE.Face3(1, 1, 3));
// 底面
// geometry.faces.push(new THREE.Face3(1, 3, 1));
geometry.faces.push(new THREE.Face3(2, 1, 4));
// geometry.faces.push(new THREE.Face4(3, 3, 5, 6));
// 侧面
// geometry.faces.push(new THREE.Face3(1, 5, 6));
// geometry.faces.push(new THREE.Face3(6, 2, 1));
// geometry.faces.push(new THREE.Face3(2, 6, 7));
// geometry.faces.push(new THREE.Face3(7, 3, 2));
// geometry.faces.push(new THREE.Face3(3, 7, 0));
// geometry.faces.push(new THREE.Face3(7, 4, 0));
// geometry.faces.push(new THREE.Face3(0, 4, 5));
// geometry.faces.push(new THREE.Face3(0, 5, 1));
// 四个顶点组成的面
// geometry.faces.push(new THREE.Face4(0, 1, 5, 4));
// geometry.faces.push(new THREE.Face4(1, 2, 6, 5));
// geometry.faces.push(new THREE.Face4(2, 3, 7, 6));
geometry.faces.push(new THREE.Face4(3, 0, 4, 0));
var mesh = new THREE.Mesh(geometry, Basicmaterial);
scene.add(mesh)
geometry.vertices.push(new THREE.Vector3(0, 6, 0));
geometry.vertices.push(new THREE.Vector3(-2, 0, -2));
geometry.vertices.push(new THREE.Vector3(2, 0, -2));
geometry.vertices.push(new THREE.Vector3(2, 0, 2));
geometry.vertices.push(new THREE.Vector3(-2, 0, 2));
geometry.faces.push(new THREE.Face3(0, 2, 3));
geometry.faces.push(new THREE.Face3(0, 1, 2));
geometry.faces.push(new THREE.Face3(0, 3, 4));
geometry.faces.push(new THREE.Face3(1, 4, 4));
geometry.faces.push(new THREE.Face3(0, 3, 4));
三角体
const CylinderBufferGeometry = new THREE.CylinderBufferGeometry( 0, 30,60,4, 8);
const material = new THREE.MeshPhongMaterial({
color: 0x7777ff,
flatShading: true,
transparent: true,
opacity: 0.5,
});
const mesh = new THREE.Mesh(CylinderBufferGeometry, material);
var line3 = new THREE.LineSegments(CylinderBufferGeometry, new THREE.LineBasicMaterial({
color: 'rgb(28, 77, 255)',
transparent: true,
opacity: 0.9,
}));
line3.position.set(-85,30,0)
mesh.position.set(-85, 30, 0)
mesh.updateMatrix();
mesh.matrixAutoUpdate = false;
scene.add(mesh, line3);
图表（不能交互）
var echartPlane,pieChart;
let value = 6;
function initModel2(vaue) {
pieChart = echarts.init($("<canvas width='512' height='512' class='canvas-cahrts'></canvas>")[0]);
let num = 0;
option = {}
pieChart.setOption(option);
pieChart.on('finished', function() {
var infoEchart = new THREE.TextureLoader().load(pieChart.getDataURL());
var infoEchartMaterial = new THREE.MeshBasicMaterial({
transparent: true,
map: infoEchart,
side: THREE.DoubleSide
});
echartPlane = new THREE.Mesh(new THREE.PlaneGeometry(100, 100), infoEchartMaterial);
echartPlane.position.set(-70, 10, 0);
echartPlane.rotation.y = Math.PI / 3
echartPlane.scale.set(0.5, 0.5, 0.5)
scene.add(echartPlane);
});
}
Sprite-canvas卡片
/*1、创建一个画布，记得设置画布的宽高，否则将使用默认宽高，有可能会导致图像显示变形*/
let canvas = document.createElement("canvas");
canvas.width = 320;
canvas.height = 320;
/*2、创建图形，这部分可以去看w3c canvas教程*/
let ctx = canvas.getContext("2d");
// var grd=ctx.createLinearGradient(0,100,0,0);
// grd.addColorStop(0,"#1e1e1e");
// grd.addColorStop(1,"white");
ctx.fillStyle='rgba(11, 83, 63, 0.31)';
ctx.fillRect(0,0,400,200);
ctx.font = "16px Microsoft YaHei";
ctx.fillStyle = "#5FF7F8"
ctx.fillText("耗电量总计", 30, 48);
ctx.font = "30px Microsoft YaHei";
// Create gradient
// var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
// gradient.addColorStop("0", "magenta");
// gradient.addColorStop("0.5", "#5FF7F8");
// gradient.addColorStop("1.0", "#5FF7F8");
// Fill with gradient
ctx.fillStyle = "#5FF7F8";
ctx.fillText("5151", 30, 90);
ctx.font = "14px Microsoft YaHei";
ctx.fillStyle = "#FFFFFF"
ctx.fillText("km/h", 150, 90);
ctx.font = "14px Microsoft YaHei";
ctx.fillStyle = "#fff"
ctx.fillText("灯光强度", 30, 120);
ctx.font = "24px Microsoft YaHei";
ctx.fillStyle = "#5FF7F8"
ctx.fillText("3320", 30, 160);
ctx.font = "14px Microsoft YaHei";
ctx.fillStyle = "#fff"
ctx.fillText("工作时间", 240, 120);
ctx.font = "24px Microsoft YaHei";
ctx.fillStyle = "#5FF7F8"
ctx.fillText("3980", 240, 160);
ctx.beginPath();
ctx.moveTo(25, 35);
ctx.lineTo(25, 50);
ctx.lineWidth = 4
ctx.strokeStyle = "#5FF7F8"
ctx.stroke();
ctx.getImageData(200, 200, 100, 100)
// var img = new Image();
// img.src = "./assets/3.png";
// img.onload = imgfn;//图片加载完在执行
// function imgfn() {
// console.log('kkk')
// var bg = ctx.createPattern(img, "no-repeat");//createPattern() 方法在指定的方向内重复指定的元素。
// ctx.fillStyle = bg;//fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。
// ctx.fillRect(320, 320, canvas.width, canvas.height);//绘制已填充矩形fillRect(左上角x坐标, 左上角y坐标, 宽, 高)
// }
ctx.fill();
/*3、将canvas作为纹理，创建Sprite*/
let texture = new THREE.Texture(canvas);
texture.needsUpdate = true; //注意这句不能少
let material = new THREE.SpriteMaterial({
map: texture,
transparent: true,
});
let mesh = new THREE.Sprite(material);
/*4、放大图片，每个精灵有自己的大小，默认情况下都是很小的，如果你不放大，基本是看不到的*/
mesh.scale.set(5, 5, 10);
scene.add(mesh);
1897
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
