Three.js (练习)

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);

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值