three.js 06-05 之从 SVG 拉伸创建物体

最新推荐文章于 2024-02-01 16:34:10 发布
最新推荐文章于 2024-02-01 16:34:10 发布
阅读量1.8k 收藏
点赞数 1
分类专栏： javascript threejs webgl three.js 文章标签： javascript three.js webgl threejs svg
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhulx_sz/article/details/79023212
版权
threejs 同时被 3 个专栏收录
59 篇文章 7 订阅
订阅专栏
webgl
59 篇文章 2 订阅
订阅专栏
three.js
59 篇文章 6 订阅
订阅专栏

    本篇我们来探讨一下在 three.js 中如何从 SVG 拉伸一个图形来创建物体。首先，我们从 https://github.com/asutherland/d3-threeD 获取一个叫 d3-threeD 的小型库，它可以将 SVG 路径转换成 three.js 图形。

    下面来看看利用 THREE.ExtrudeGeometry 如何将一个蝙蝠标识符的 SVG 图案转成三维图形，核心代码如下所示：

<!-- SVG 标签 -->
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1152px" height="1152px" xml:space="preserve">
<g>
<path id="batman-path" style="fill:rgb(0,0,0);" d="M 261.135 114.535 C 254.906 116.662 247.491 118.825 244.659 119.344 C 229.433 122.131 177.907 142.565 151.973 156.101 C 111.417 177.269 78.9808 203.399 49.2992 238.815 C 41.0479 248.66 26.5057 277.248 21.0148 294.418 C 14.873 313.624 15.3588 357.341 21.9304 376.806 C 29.244 398.469 39.6107 416.935 52.0865 430.524 C 58.2431 437.23 63.3085 443.321 63.3431 444.06 C 63.4748 446.883 102.278 479.707 120.51 492.418 C 131.003 499.734 148.168 509.93 158.654 515.075 C 169.139 520.22 179.431 525.34 181.524 526.454 C 187.725 529.754 187.304 527.547 179.472 515.713 C 164.806 493.553 158.448 464.659 164.322 446.861 C 169.457 431.303 192.013 421.501 214.324 425.132 C 234.042 428.341 252.142 439.186 270.958 459.064 C 286.677 475.67 292.133 482.967 295.31 491.634 C 297.466 497.514 298.948 495.91 304.862 481.293 C 313.673 459.519 329.808 445.735 346.35 445.851 C 367.654 446 399.679 478.239 412.801 512.745 C 414.093 516.144 416.593 522.632 418.355 527.163 C 420.118 531.695 423.604 542.319 426.103 550.773 C 430.848 566.832 432.355 566.851 434.872 550.88 C 436.395 541.215 451.403 502.522 455.655 497.298 C 457.038 495.599 460.63 489.896 463.636 484.625 C 471.696 470.498 492.318 452.688 505.387 448.568 C 514.602 445.663 517.533 445.549 525.51 447.782 C 539.676 451.749 553.43 467.773 560.706 488.788 L 563.242 496.114 L 567.096 490.012 C 577.709 473.208 593.665 453.899 602.47 447.206 C 607.884 443.09 613.378 438.825 614.679 437.729 C 615.98 436.632 622.927 433.259 630.118 430.233 C 655.159 419.693 681.195 423.407 693.273 439.241 C 697.957 445.382 698.932 448.971 699.538 462.294 C 700.174 476.284 699.51 479.864 693.686 493.854 C 690.073 502.533 684.912 512.883 682.217 516.854 C 679.523 520.825 678.172 524.074 679.215 524.074 C 681.932 524.074 718.787 504.481 732.525 495.734 C 760.018 478.228 788.909 452.599 803.9 432.418 C 807.266 427.886 810.569 423.715 811.239 423.149 C 814.498 420.395 828.253 393.099 833.17 379.627 C 838.223 365.782 838.713 361.822 838.741 334.582 C 838.776 300.425 836.431 291.124 820.154 260.873 C 810.649 243.207 807.498 239.005 788.417 218.543 C 751.511 178.968 688.147 142.549 621.582 122.654 C 581.7 110.734 580.388 110.465 580.388 114.195 C 580.388 115.328 581.302 116.255 582.418 116.255 C 584.279 116.255 587.705 122.106 603.399 152.085 C 613.977 172.29 618.077 189.427 618.264 214.21 C 618.42 234.928 617.88 238.368 612.285 252.269 C 604.327 272.04 590.066 286.889 572.829 293.352 C 558.526 298.714 549.193 297.86 535.704 289.955 C 526.777 284.723 512.304 267.644 509.816 259.404 C 509.132 257.138 507.129 251.358 505.366 246.558 C 503.602 241.759 501.646 231.564 501.018 223.902 C 500.39 216.24 498.491 198.402 496.797 184.261 C 495.104 170.121 493.307 152.047 492.803 144.097 C 492.299 136.147 491.292 125.625 490.565 120.715 L 489.242 111.787 L 483.323 118.267 C 480.067 121.832 477.404 125.618 477.404 126.681 C 477.404 127.744 476.603 128.613 475.624 128.613 C 474.645 128.613 471.275 132.321 468.135 136.852 L 462.426 145.091 L 431.038 145.091 L 399.65 145.091 L 386.811 128.494 C 379.749 119.365 373.509 112.36 372.943 112.926 C 372.377 113.491 371.57 118.875 371.15 124.888 C 370.73 130.902 368.94 147.744 367.172 162.315 C 365.405 176.887 363.523 195.424 362.99 203.509 C 360.283 244.622 352.784 266.044 335.323 282.544 C 326.456 290.923 312.488 297.497 303.508 297.518 C 294.864 297.539 278.732 290.063 269.473 281.748 C 246.952 261.521 238.846 229.614 245.481 187.314 C 247.894 171.928 266.562 131.612 275.927 121.56 C 277.987 119.348 279.673 116.786 279.673 115.867 C 279.673 114.947 279.905 113.593 280.188 112.856 C 281.28 110.017 271.977 110.837 261.136 114.536 L 261.135 114.535 "/>
</g>
</svg>
这是一段描述一个蝙蝠标识符的 SVG 标签代码。除非你是 SVG 专家，否则这段代码对你来说毫无意义。其实，这段代码基本上就是给出了一组符合 SVG 规范的绘图指令，譬如“C 254.906 116.662 247.491 118.825 244.659 119.344”就是告诉浏览器画一条三次 Bezier 线，而“L 563.242 496.114”则告诉浏览器应该画一条线。

    幸运的是我们不必自己写代码来解析类似的指令，使用 d3-threeD 库，可以自动转换这些指令。该库原是跟优秀的 D3.js 库一同开发使用的，但是 d3-threeD 库在此基础上做了一些小调整，以便我们能够单独使用其中的部分功能。

    下面的代码展示了如何加载前面看到的 SVG，并转换成 THREE.ExtrudeGeometry 并显示在 three.js 场景中：

// 获取 path 标签 d 属性中的数据
var svgString = $("#batman-path").attr("d");

// 定义 svg
var svgShape = transformSVGPathExposed(svgString);

var options = {
	amount: 10,
	bevelThinkness: 2,
	bevelSize: 1,
	bevelSegments: 3,
	bevelEnabled: true,
	curveSegments: 12,
	steps: 1
};

var svgGeometry = new THREE.ExtrudeGeometry(svgShape, options);
var svgMaterial = new THREE.MeshPhongMaterial({color: 0x333333, shininess: 100});
var svg = new THREE.Mesh(svgGeometry, svgMaterial);
在这段代码中，你会看到有一个 transformSVGPathExposed(svgStr) 函数的调用，此函数就是由 d3-threeD 库提供的，接受一个 SVG 字符串作为参数。我们使用了 $("#batman-path").attr("d") 直接从 SVG 元素中获取 SVG 字符串。SVG 元素中的属性 d 就包含了用来绘图的路径表达式。之后我们再添加上好看的、闪亮的材质，再加上一个聚光灯光源，你就可以看到拉伸后的立体图形了。

    下面我们给出完整的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>示例 06.05 - SvgGeometry</title>
	<script src="../build/three.js"></script>
	<script src="../build/js/controls/OrbitControls.js"></script>
	<script src="../build/js/libs/stats.min.js"></script>
	<script src="../build/js/libs/dat.gui.min.js"></script>
	<script src="../jquery/jquery-3.2.1.min.js"></script>
	
    <script src="../build/js/libs/d3-threeD.js"></script>
    <style>
        body {
            /* 设置 margin 为 0，并且 overflow 为 hidden，来完成页面样式 */
            margin: 0;
            overflow: hidden;
        }
		/* 统计对象的样式 */
		#Stats-output {
			position: absolute;
			left: 0px;
			top: 0px;
		}
    </style>
</head>
<body>

<!-- 用于 WebGL 输出的 Div -->
<div id="webgl-output"></div>
<!-- 用于统计 FPS 输出的 Div -->
<div id="stats-output"></div>
<!-- SVG 标签 -->
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1152px" height="1152px" xml:space="preserve">
<g>
<path id="batman-path" style="fill:rgb(0,0,0);" d="M 261.135 114.535 C 254.906 116.662 247.491 118.825 244.659 119.344 C 229.433 122.131 177.907 142.565 151.973 156.101 C 111.417 177.269 78.9808 203.399 49.2992 238.815 C 41.0479 248.66 26.5057 277.248 21.0148 294.418 C 14.873 313.624 15.3588 357.341 21.9304 376.806 C 29.244 398.469 39.6107 416.935 52.0865 430.524 C 58.2431 437.23 63.3085 443.321 63.3431 444.06 C 63.4748 446.883 102.278 479.707 120.51 492.418 C 131.003 499.734 148.168 509.93 158.654 515.075 C 169.139 520.22 179.431 525.34 181.524 526.454 C 187.725 529.754 187.304 527.547 179.472 515.713 C 164.806 493.553 158.448 464.659 164.322 446.861 C 169.457 431.303 192.013 421.501 214.324 425.132 C 234.042 428.341 252.142 439.186 270.958 459.064 C 286.677 475.67 292.133 482.967 295.31 491.634 C 297.466 497.514 298.948 495.91 304.862 481.293 C 313.673 459.519 329.808 445.735 346.35 445.851 C 367.654 446 399.679 478.239 412.801 512.745 C 414.093 516.144 416.593 522.632 418.355 527.163 C 420.118 531.695 423.604 542.319 426.103 550.773 C 430.848 566.832 432.355 566.851 434.872 550.88 C 436.395 541.215 451.403 502.522 455.655 497.298 C 457.038 495.599 460.63 489.896 463.636 484.625 C 471.696 470.498 492.318 452.688 505.387 448.568 C 514.602 445.663 517.533 445.549 525.51 447.782 C 539.676 451.749 553.43 467.773 560.706 488.788 L 563.242 496.114 L 567.096 490.012 C 577.709 473.208 593.665 453.899 602.47 447.206 C 607.884 443.09 613.378 438.825 614.679 437.729 C 615.98 436.632 622.927 433.259 630.118 430.233 C 655.159 419.693 681.195 423.407 693.273 439.241 C 697.957 445.382 698.932 448.971 699.538 462.294 C 700.174 476.284 699.51 479.864 693.686 493.854 C 690.073 502.533 684.912 512.883 682.217 516.854 C 679.523 520.825 678.172 524.074 679.215 524.074 C 681.932 524.074 718.787 504.481 732.525 495.734 C 760.018 478.228 788.909 452.599 803.9 432.418 C 807.266 427.886 810.569 423.715 811.239 423.149 C 814.498 420.395 828.253 393.099 833.17 379.627 C 838.223 365.782 838.713 361.822 838.741 334.582 C 838.776 300.425 836.431 291.124 820.154 260.873 C 810.649 243.207 807.498 239.005 788.417 218.543 C 751.511 178.968 688.147 142.549 621.582 122.654 C 581.7 110.734 580.388 110.465 580.388 114.195 C 580.388 115.328 581.302 116.255 582.418 116.255 C 584.279 116.255 587.705 122.106 603.399 152.085 C 613.977 172.29 618.077 189.427 618.264 214.21 C 618.42 234.928 617.88 238.368 612.285 252.269 C 604.327 272.04 590.066 286.889 572.829 293.352 C 558.526 298.714 549.193 297.86 535.704 289.955 C 526.777 284.723 512.304 267.644 509.816 259.404 C 509.132 257.138 507.129 251.358 505.366 246.558 C 503.602 241.759 501.646 231.564 501.018 223.902 C 500.39 216.24 498.491 198.402 496.797 184.261 C 495.104 170.121 493.307 152.047 492.803 144.097 C 492.299 136.147 491.292 125.625 490.565 120.715 L 489.242 111.787 L 483.323 118.267 C 480.067 121.832 477.404 125.618 477.404 126.681 C 477.404 127.744 476.603 128.613 475.624 128.613 C 474.645 128.613 471.275 132.321 468.135 136.852 L 462.426 145.091 L 431.038 145.091 L 399.65 145.091 L 386.811 128.494 C 379.749 119.365 373.509 112.36 372.943 112.926 C 372.377 113.491 371.57 118.875 371.15 124.888 C 370.73 130.902 368.94 147.744 367.172 162.315 C 365.405 176.887 363.523 195.424 362.99 203.509 C 360.283 244.622 352.784 266.044 335.323 282.544 C 326.456 290.923 312.488 297.497 303.508 297.518 C 294.864 297.539 278.732 290.063 269.473 281.748 C 246.952 261.521 238.846 229.614 245.481 187.314 C 247.894 171.928 266.562 131.612 275.927 121.56 C 277.987 119.348 279.673 116.786 279.673 115.867 C 279.673 114.947 279.905 113.593 280.188 112.856 C 281.28 110.017 271.977 110.837 261.136 114.536 L 261.135 114.535 "/>
</g>
</svg>

<!-- 运行 Three.js 示例的 Javascript 代码 -->
<script type="text/javascript">

	var scene;
	var camera;
	var render;
	var webglRender;
	//var canvasRender;
	var controls;
	var stats;
	var guiParams;
	
	var ground;
	var svg;
	
	var meshMaterial;
	
	var ambientLight;
	var spotLight;
	var axesHelper;
	//var cameraHelper;

    $(function() {
		stats = initStats();
		scene = new THREE.Scene();
		
		webglRender = new THREE.WebGLRenderer( {antialias: true, alpha: true} ); // antialias 抗锯齿
		webglRender.setSize(window.innerWidth, window.innerHeight);
		webglRender.setClearColor(0xeeeeee, 1.0);
		webglRender.shadowMap.enabled = true; // 允许阴影投射
		render = webglRender;
		
		camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 1000); // 2147483647
		camera.position.set(-45.5, 68.2, 90.9);
		
		var target = new THREE.Vector3(10, 0 , 0);
		controls = new THREE.OrbitControls(camera, render.domElement);
		controls.target = target;
		camera.lookAt(target);
		
		$('#webgl-output')[0].appendChild(render.domElement);
		window.addEventListener('resize', onWindowResize, false);
		
		// 加入一个坐标轴：X（橙色）、Y（绿色）、Z（蓝色）
		axesHelper = new THREE.AxesHelper(60);
		scene.add(axesHelper);
		
		ambientLight = new THREE.AmbientLight(0x0c0c0c);
		scene.add(ambientLight);
		
		spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(0, 60, 30);
		spotLight.shadow.mapSize.width = 5120; // 必须是 2的幂，默认值为 512
		spotLight.shadow.mapSize.height = 5120; // 必须是 2的幂，默认值为 512
        spotLight.castShadow = true;
        scene.add(spotLight);
		//cameraHelper = new THREE.CameraHelper(spotLight.shadow.camera);
		//scene.add(cameraHelper);
		
		// 加入一个地面
		var groundGeometry = new THREE.PlaneGeometry(100, 100, 4, 4);
		var groundMaterial = new THREE.MeshLambertMaterial({color: 0x777777}); // MeshBasicMaterial 材质不能接收阴影
		ground = new THREE.Mesh(groundGeometry, groundMaterial);
		ground.rotation.set(-0.5 * Math.PI, 0, 0); // 沿着 X轴旋转-90°
		ground.receiveShadow = true;
		scene.add(ground);
		
		// 材质
        meshMaterial = [
			new THREE.MeshNormalMaterial({side: THREE.DoubleSide}),
			new THREE.MeshBasicMaterial({wireframe: true})
		];
		
		// 获取 path 标签 d 属性中的数据
		var svgString = $("#batman-path").attr("d");
		
		/** 用来保存那些需要修改的变量 */
		guiParams = new function() {
			this.rotationSpeed = 0.02;
			
			this.options = {
				amount: 10,
				bevelThinkness: 2,
				bevelSize: 1,
				bevelSegments: 3,
				bevelEnabled: true,
				curveSegments: 12,
				steps: 1
			};
		}
		/** 定义 dat.GUI 对象，并绑定 guiParams 的几个属性 */
		var gui = new dat.GUI();
		gui.add(guiParams.options, "amount", 0, 20).onChange(function(e){updateMesh(svgString)});
		gui.add(guiParams.options, "bevelThinkness", 0, 10).onChange(function(e){updateMesh(svgString)});
		gui.add(guiParams.options, "bevelSize", 0, 10).onChange(function(e){updateMesh(svgString)});
		gui.add(guiParams.options, "bevelSegments", 0, 30, 1).onChange(function(e){updateMesh(svgString)});
		gui.add(guiParams.options, "bevelEnabled").onChange(function(e){updateMesh(svgString)});
		gui.add(guiParams.options, "curveSegments", 1, 30, 1).onChange(function(e){updateMesh(svgString)});
		gui.add(guiParams.options, "steps", 1, 5, 1).onChange(function(e){updateMesh(svgString)});
		
		updateMesh(svgString);
		
		renderScene();
    });
	
	/** 渲染场景 */
	function renderScene() {
		stats.update();
		rotateMesh(); // 旋转物体
		
		requestAnimationFrame(renderScene);
		render.render(scene, camera);
	}
	
	/** 初始化 stats 统计对象 */
	function initStats() {
		stats = new Stats();
		stats.setMode(0); // 0 为监测 FPS；1 为监测渲染时间
		$('#stats-output').append(stats.domElement);
		return stats;
	}
	
	/** 当浏览器窗口大小变化时触发 */
	function onWindowResize() {
		camera.aspect = window.innerWidth / window.innerHeight;
		camera.updateProjectionMatrix();
		render.setSize(window.innerWidth, window.innerHeight);
	}
	
	/** 旋转物体 */
	var step = 0;
	function rotateMesh() {
		step += guiParams.rotationSpeed;
		scene.traverse(function(mesh) {
			if (mesh === svg) {
				//mesh.rotation.x = step;
				mesh.rotation.y = step;
				//mesh.rotation.z = step;
			}
		});
	}
	
	function updateMesh(svgString) {
		scene.remove(svg);
		
		// 定义 svg
		var svgShape = transformSVGPathExposed(svgString);
		var svgGeometry = new THREE.ExtrudeGeometry(svgShape, guiParams.options);
		var svgMaterial = new THREE.MeshPhongMaterial({color: 0x333333, shininess: 100});
		svg = new THREE.Mesh(svgGeometry, svgMaterial);
		svg.scale.x = 0.05;
		svg.scale.y = 0.05;
		svg.scale.z = 0.2;
		
		scene.add(svg);
	}

</script>
</body>
</html>

未完待续···

zhulx_sz
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
d3threejs使用D3和THREEjs实现的CSS3D变换
08-10
d3-threejs：使用D3和THREE.js实现的CSS 3D变换
vue-svgicon-创建svg图标组件的工具。 （版本2.x）。-Vue.js开发
05-27
vue-svgicon创建svg图标组件的工具。 （vue 2.x）中文尝试下一个版本：4.x灵感https://github.com/Justineo/vue-awesome演示https：// vue-svgicon一个用于创建svg图标组件的工具。 （vue 2.x）中文尝试下一个版本：4.x灵感https://github.com/Justineo/vue-awesome演示https://mmf-fe.github.io/vue-svgicon/v3/一些问题有效在IE和旧浏览器上使用生成图标安装＃安装全局npm安装vue-svgicon -g＃安装项目npm安装vue-svgicon --save-dev命令＃生成svg图标组件vsvg -s / path / to / svg / source -t / path / for / generated / components用作npm scri
8. Threejs案例-SVG渲染器和WEBGL渲染器对比
能带孩子会做饭
02-01 1451
8. Threejs案例-SVG渲染器和WEBGL渲染器对比 SVGRenderer 被用于使用 SVG 来渲染几何数据创建SVG渲染器，并设置其大小为窗口大小创建WebGL渲染器，开启抗锯齿功能，并设置其大小为窗口大小创建三个线段，设置其材质、大小和旋转属性，并将它们添加到场景中创建三个线段，设置其材质、大小和旋转属性，并将它们添加到场景中
svg.panzoom.js:svg.js插件，可为视图框元素启用panzoom
05-09
svg.panzoom.js 插件，可为svg元素启用panzoom 入门 npm install @svgdotjs/svg.js @svgdotjs/svg.panzoom.js 在html文档中包含svg.js库之后，请包含此插件。 [removed][removed] [removed][removed] 或者对于esm，只需将其导入： import { SVG } from '@svgdotjs/svg.js' import '@svgdotjs/svg.panzoom.js' 要在svg上启用平移/缩放，请执行以下操作： // enables panZo
svg-pan-zoom.js
10-28
使用示例： svgPanZoom('#demo-tiger', { viewportSelector: '.svg-pan-zoom_viewport' , panEnabled: true , controlIconsEnabled: false , zoomEnabled: true , dblClickZoomEnabled: true , mouseWheelZoomEnabled: true , preventMouseEventsDefault: true , zoomScaleSensitivity: 0.2 , minZoom: 0.5 , maxZoom: 10 , fit: true , contain: false , center: true , refreshRate: 'auto' , beforeZoom: function(){} , onZoom: function(){} , beforePan: function(){} , onPan: function(){} , onUpdatedCTM: function(){} , customEventsHandler: {} , eventsListenerElement: null });
最新canvg.js 将SVG转换成Png（1.4）
03-07
将SVG转换成PNG的JS类库，只支持html5
06.ThreeJs开发指南-第六章-高级几何体
KingW
09-02 6416
第六章 高级几何体一、ConvexGeometry：凸面体在一组点外面建立一个凸包。function generatePoints(){ var points = []; for(var i = 0; i<20;i++){ var randomX = -15 + Math.round(Math.random() * 30); var randomY =
threejs利用svg拉伸形成立体图
weixin_43977647的博客
03-02 2463
1.svg图片转化成threejs对象 这里我们用到了别人写好的函数transformSVGPathExposed()，这个函数传入的变量是svg图片的路径字符串，输出的是threejs中shape对象。 https://johnson2heng.github.io/three.js-demo/lib/js/libs/d3-threeD.js 我们在vue中引入上述js文件需要做一点小小修改。 原...
three.js之高级几何体-SVG拉伸几何体(vue中使用three.js34)
点燃火柴的博客
11-29 2266
SVG拉伸几何体介绍和使用1.SVG拉伸体使用步骤1.1svg的初始化1.2svg内容获取与转换成Shape类型1.3创建几何体，网格对象，添加到场景2.demo说明3.demo代码 1.SVG拉伸体使用步骤 通过SVG拉伸创建几何体实际上使用的还是ExtrudeGeometry几何体。只不创建SVG拉伸体使用的底图一个SVG图形，而普通的拉伸体的底图是一个二维图形；’接下来介绍一下创建SVG拉伸几何体的步骤 1.1svg的初始化 在示例中我们的svg是在vue文件中的html部分中使用标签初始化的，具体如
three.js使用svg_使用SVG和anime.js构建弹性范围输入
culiu9261的博客
07-22 464
three.js使用svgAmong all the fascinating web components we can found in any UI, forms are usually the most boring part. In the past, there used to be only a few text input elements, where the user had t...
threejs 使用SVG格式绘制地图
凌风子夜
08-12 3130
使用SVG绘制图形很简单，绘制地图也是一样。 首先需要一个地图的SVG格式配置文件，我这里找了一个 <script type="text/javascript" src="js/0_public/chinaMapConfig.js" ></script>//中国地图 然后将SVG格式的字符串转换为THREE.Shape对象，此时需要引入插件 <script type...
SVG-Three-Map:使用Three.js将SVG映射转换为2.5D
04-29
SVG三图 使用Three.js将SVG映射转换为2.5D 文献资料 将SVG转换为Three.js 使用SVGLoader将所有SVG形状转换为Three.js 为Astar生成网格 使用第一个形状作为地板。 将所有形状的SVG添加为墙。 与三个物体的相互作用 通过使用三个的Raycaster突出显示鼠标移动时的状态。 单击鼠标以选择源和目标时添加精灵。 寻找路径 通过使用Astar.js查找路径（ ） 用THREE.MeshLine（ ）绘制路径线
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
10-14
主要介绍了vue使用svg文件补充-svg放大缩小操作(使用d3.js)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
three.js中svg拉伸体的转换函数transformSVGPathExposed
11-28
在vue中使用three.js的svg拉伸体的转换函数transformSVGPathExposed
three.js 04-07 之 MeshPhongMaterial 材质
热门推荐
zhulx_sz 的博客
12-07 1万+
上篇我们已经介绍了 three.js 中高级材质中的 MeshLambertMaterial 材质。本篇将要介绍的是另一种与之对应的高级材质 MeshPhongMaterial 材质。通过它可以创建一种光亮表面的材质效果。这种材质的属性基本跟 MeshLambertMaterial 暗淡材质一样，除此之外，我们列出 MeshPhongMaterial 材质中比较感兴趣的特有属性，如下表所示：
three.js 04-08 之 ShaderMaterial 材质
zhulx_sz 的博客
12-08 9485
今天我们将要介绍的高级材质叫 THREE.ShaderMaterial （我把它翻译成自定义着色器材质）。它是 three.js 库中功能最为丰富、也是最为复杂的一种高级材质。通过它，可以定义自己的着色器，直接在 WebGL 环境中运行。着色器可以将 three.js 中的 JavaScript 对象转换为屏幕上的像素。通过这些自定义的着色器，你可以明确指定你的对象如何渲染及遮盖，或者修改 thr
three.js 05-05 之 SphereGeometry 几何体
zhulx_sz 的博客
12-15 9033
本篇将要介绍的 SphereGeometry 球体是 three.js 中较简单的另一种几何体。先看看球体常用的几个属性，如下表所示： 属性 描述 radius 可选。此属性定义球体的半径。 widthSegments 可选。此属性定义球体竖直（维度）方向上的分段数。默认值是 8，最小值是 3 heightSegments 可选。此属
three.js 05-01 之 PlaneGeometry 几何体
zhulx_sz 的博客
12-14 8653
three.js 库中的材质就已经基本上介绍完了。本篇开始我们将逐个深入 three.js 中各种几何体的细节。在 three.js 中，常用的几何体包括： 二维几何体： PlaneGeometry 平面CircleGeometry 圆形ShapeGeometry 塑形 三维几何体： BoxGeometry 立方体（或叫三维方块）SphereGeometry 球体Cylinde
three.js 08-01 之 Group 组合对象
zhulx_sz 的博客
02-01 7497
在前面的一些分享中，你会发现有用到过对象组合。例如前面一些分享示例中提到的用THREE.SceneUtils.createMultiMaterialObject(geometry, materials) 函数创建的物体对象，其实就是创建了一个 THREE.Group 组。这个函数创建的组包含多个副本，即针对 materials 材质数组参数的每一个材质，都会创建一个对应的网格并添加到组中，这样的组
three.js的svg
最新发布
02-29
Three.js是一个用于创建和显示3D图形的JavaScript库。它提供了一系列功能强大的工具和API，可以在Web浏览器中实现高性能的3D渲染效果。而SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，它可以用来描述二维图形和动画。 在Three.js中，可以使用SVG作为纹理（Texture）或者作为形状（Shape）来创建3D对象。使用SVG作为纹理时，可以将SVG图像应用到3D对象的表面上，从而实现更加丰富多样的外观效果。使用SVG作为形状时，可以将SVG路径转换为Three.js中的几何体（Geometry），然后进行进一步的操作和渲染。 要在Three.js中使用SVG，首先需要将SVG文件加载到Three.js中。可以使用Three.js提供的SVGLoader来加载SVG文件，并将其转换为Three.js中的可用对象。加载完成后，可以根据需要对SVG进行进一步的处理和操作，例如应用材质、设置位置和旋转等。 总结一下，Three.js可以通过使用SVG作为纹理或形状来实现对SVG图像的展示和操作。这样可以将2D的SVG图像与Three.js强大的3D渲染能力相结合，创造出更加丰富多样的视觉效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值