three.js - 如何在绘图线中设置不透明度使用three.js,使用LineBasicMaterial?
问题描述
我想改变线条的宽度和不透明度,我的代码如下:
var geometry_link = new THREE.Geometry();
geometry_link.vertices.push(
new THREE.Vector3(item[0].x *1,item[0].y *1,item[0].z),
new THREE.Vector3(item[1].x *1,item[1].y *1,item[1].z)
);
geometry_link.colors.push(
new THREE.Color(0x000000),
new THREE.Color(0xffffff)
);
var line = new THREE.Line(geometry_link, new THREE.LineBasicMaterial({
vertexColors: true,
linewidth: 8,
transparent: true,
opacity: 0.1
})
但它不起作用,线宽和不透明度。我发现了类似的问题,说 linewidth 在 windows 上不起作用,那是 5 年前,现在怎么样?谢谢你的想法
解决方案
LineBasicMaterial
确实支持透明线,如下面的示例所示:
let camera, scene, renderer;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
camera.position.z = 1;
scene = new THREE.Scene();
const geometry = new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(), new THREE.Vector3(1, 0, 0)]);
const material = new THREE.LineBasicMaterial({
transparent: true,
opacity: 0.5
});
const mesh = new THREE.Line(geometry, material);
scene.add(mesh);
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
body {
margin: 0;
}
canvas {
display: block;
}
<script src="https://cdn.jsdelivr.net/npm/three@0.119.1/build/three.js"></script>
但是不支持宽线。因此,设置linewidth
为不同的值1
在大多数浏览器中都没有效果。这是行图元上下文中的 WebGL 限制。
但是,three.js
它提供了基于三角形(有时称为网格线或丝带)的宽线实现。查看以下示例以获取更多信息:
推荐阅读
- node.js - 我收到 TypeError: Cannot read property 'numberOfSuits' of undefined 当我运行下面的代码在我的 firebase 数据库上发布新订单时
- json - 高效的 MongoDB 查询从一个集合中获取报告并插入到另一个集合中
- javascript - 如何使用 VSCode 扩展运行 Jest 测试?
- javascript - JavaScript 使用新 URL 更改地址栏而不重新加载页面
- swift - SwiftUI 在@FetchRequest 中使用实例变量
- terminal - 如何让终端上的 Prolog 注意到添加到 Prolog 源文件中的新更改?
- ios - React Native Notification IOS - APN 配置
- php - 致命错误:未捕获的错误:调用 PHP 7 中未定义的函数 mysql_connect()
- python - 根据光流,为什么图像边缘有剧烈运动?
- django - 我可以在 LHS 和 RHS 都是函数的 Django 中执行查询吗?