Three.js 绘制边框线

最新推荐文章于 2024-01-17 20:46:30 发布

梦幻空花~

最新推荐文章于 2024-01-17 20:46:30 发布

阅读量1.4k

点赞数 1

分类专栏： js 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_38868959/article/details/124915920

版权

js 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

用文档提供的wireframe: true,但这样画出来图形中间会多出一条X线。

var material = new THREE.MeshBasicMaterial({
				color: 'pink',
				wireframe: true,
			});

在这里插入图片描述
2.我用借助边界线EdgesGeometry

var edges = new THREE.EdgesGeometry(box);
			// 立方体线框，不显示中间的斜线
			var edgesMaterial = new THREE.LineBasicMaterial({
				color: 0xffffff
			})
			var line = new THREE.LineSegments(edges, edgesMaterial);
			scene.add(cube, line);
```javascript
在这里插入代码片

在这里插入图片描述
3.详细代码如下：

<html>
	<head>
		<title>My first three.js app</title>
		<style>
			body {
				margin: 0;
			}

			canvas {
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	<body>
		<script src="js/three.js"></script>
		<script>
			//创建场景
			var scene = new THREE.Scene();
			// 创建网格模型
			// 创建一个几何体对象
			var box = new THREE.BoxGeometry(3, 1, 1);
			var material = new THREE.MeshBasicMaterial({
				color: 'pink',
				opacity: 0,
				transparent: true
			});
			var cube = new THREE.Mesh(box, material);
			// 立方体几何体box作为EdgesGeometry参数创建一个新的几何体
			var edges = new THREE.EdgesGeometry(box);
			// 立方体线框，不显示中间的斜线
			var edgesMaterial = new THREE.LineBasicMaterial({
				color: 0xffffff
			})
			var line = new THREE.LineSegments(edges, edgesMaterial);
			scene.add(cube, line);

			// 调整高度 宽度
			var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
			//摄像机的远近 先不管
			camera.position.z = 3;

			// 辅助线
			// var axesHelper = new THREE.AxesHelper(5);
			// scene.add(axesHelper);
			// 创建渲染对象
			var renderer = new THREE.WebGLRenderer();
			// 设置场景区域宽高
			renderer.setSize(window.innerWidth, window.innerHeight);
			document.body.appendChild(renderer.domElement);
			// 执行渲染操作 指定场景和相机作为参数
			renderer.render(scene, camera);
		</script>
	</body>