- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我需要创建一个在 4 个侧面但在顶部和底部具有圆 Angular 的盒子。 Three.js 有一个很好的例子 webgl_geometry_shapes我正在尝试复制它以在绿色圆框上添加一个洞。在这个例子中给圆添加一个洞:
// Arc circle
var arcShape = new THREE.Shape()
.moveTo( 50, 10 )
.absarc( 10, 10, 40, 0, Math.PI * 2, false );
var holePath = new THREE.Path()
.moveTo( 20, 10 )
.absarc( 10, 10, 10, 0, Math.PI * 2, true )
arcShape.holes.push( holePath );
// Rounded rectangle
var roundedRectShape = new THREE.Shape();
( function roundedRect( ctx, x, y, width, height, radius ) {
ctx.moveTo( x, y + radius );
ctx.lineTo( x, y + height - radius );
ctx.quadraticCurveTo( x, y + height, x + radius, y + height );
ctx.lineTo( x + width - radius, y + height );
ctx.quadraticCurveTo( x + width, y + height, x + width, y + height - radius );
ctx.lineTo( x + width, y + radius );
ctx.quadraticCurveTo( x + width, y, x + width - radius, y );
ctx.lineTo( x + radius, y );
ctx.quadraticCurveTo( x, y, x, y + radius );
} )( roundedRectShape, 0, 0, 50, 50, 20 );
var roundedRectShape_small = new THREE.Path();
( function roundedRect( ctx, x, y, width, height, radius ) {
ctx.moveTo( x, y + radius );
ctx.lineTo( x, y + height - radius );
ctx.quadraticCurveTo( x, y + height, x + radius, y + height );
ctx.lineTo( x + width - radius, y + height );
ctx.quadraticCurveTo( x + width, y + height, x + width, y + height - radius );
ctx.lineTo( x + width, y + radius );
ctx.quadraticCurveTo( x + width, y, x + width - radius, y );
ctx.lineTo( x + radius, y );
ctx.quadraticCurveTo( x, y, x, y + radius );
} )( roundedRectShape_small, 10, 10, 30, 30, 20 );
roundedRectShape.holes.push( roundedRectShape_small );
最佳答案
您必须以相反的缠绕顺序绘制孔。由于外部矩形路径是顺时针绘制的,因此孔路径必须逆时针绘制:
let f_rect = function roundedRect( ctx, x, y, width, height, radius ) {
ctx.moveTo( x, y + radius );
ctx.lineTo( x, y + height - radius );
ctx.quadraticCurveTo( x, y + height, x + radius, y + height );
ctx.lineTo( x + width - radius, y + height );
ctx.quadraticCurveTo( x + width, y + height, x + width, y + height - radius );
ctx.lineTo( x + width, y + radius );
ctx.quadraticCurveTo( x + width, y, x + width - radius, y );
ctx.lineTo( x + radius, y );
ctx.quadraticCurveTo( x, y, x, y + radius );
}
let f_rect_reverse = function roundedRect( ctx, x, y, width, height, radius ) {
ctx.moveTo( x, y + height - radius );
ctx.lineTo( x, y + radius );
ctx.quadraticCurveTo( x, y, x + radius, y );
ctx.lineTo( x + width - radius, y );
ctx.quadraticCurveTo( x + width, y, x + width, y + radius );
ctx.lineTo( x + width, y + height - radius );
ctx.quadraticCurveTo( x + width, y + height, x + width - radius, y + height );
ctx.lineTo( x + radius, y + height );
ctx.quadraticCurveTo( x, y + height, x, y + height - radius );
}
var roundedRectShape = new THREE.Shape();
f_rect( roundedRectShape, -25, -25, 50, 50, 20 );
var roundedRectShape_small = new THREE.Path();
f_rect_reverse( roundedRectShape_small, -15, -15, 30, 30, 10 );
roundedRectShape.holes.push( roundedRectShape_small );
(function onLoad() {
var container, camera, scene, renderer, controls;
init();
animate();
function init() {
container = document.getElementById('container');
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
container.appendChild(renderer.domElement);
scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff);
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(3, 2, 7);
scene.add(camera);
window.onresize = function() {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
}
var ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);
var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
directionalLight.position.x = 4;
directionalLight.position.y = 1;
directionalLight.position.z = 2;
scene.add( directionalLight );
controls = new THREE.OrbitControls(camera, renderer.domElement);
addGridHelper();
createModel();
}
function createModel() {
let f_rect = function roundedRect( ctx, x, y, width, height, radius ) {
ctx.moveTo( x, y + radius );
ctx.lineTo( x, y + height - radius );
ctx.quadraticCurveTo( x, y + height, x + radius, y + height );
ctx.lineTo( x + width - radius, y + height );
ctx.quadraticCurveTo( x + width, y + height, x + width, y + height - radius );
ctx.lineTo( x + width, y + radius );
ctx.quadraticCurveTo( x + width, y, x + width - radius, y );
ctx.lineTo( x + radius, y );
ctx.quadraticCurveTo( x, y, x, y + radius );
}
let f_rect_reverse = function roundedRect( ctx, x, y, width, height, radius ) {
ctx.moveTo( x, y + height - radius );
ctx.lineTo( x, y + radius );
ctx.quadraticCurveTo( x, y, x + radius, y );
ctx.lineTo( x + width - radius, y );
ctx.quadraticCurveTo( x + width, y, x + width, y + radius );
ctx.lineTo( x + width, y + height - radius );
ctx.quadraticCurveTo( x + width, y + height, x + width - radius, y + height );
ctx.lineTo( x + radius, y + height );
ctx.quadraticCurveTo( x, y + height, x, y + height - radius );
}
var roundedRectShape = new THREE.Shape();
f_rect( roundedRectShape, -25, -25, 50, 50, 20 );
var roundedRectShape_small = new THREE.Path();
f_rect_reverse( roundedRectShape_small, -15, -15, 30, 30, 10 );
roundedRectShape.holes.push( roundedRectShape_small );
var material = new THREE.MeshLambertMaterial( { color: 0x00ff00, side: THREE.DoubleSide } );
var extrudeSettings = { depth: 8, bevelEnabled: true, bevelSegments: 2, steps: 3, bevelSize: 5, bevelThickness: 5 };
var geometry = new THREE.ExtrudeBufferGeometry( roundedRectShape, extrudeSettings );
let s = 0.1;
var mesh = new THREE.Mesh( geometry, material );
mesh.scale.set( s, s, s );
scene.add( mesh );
}
function addGridHelper() {
var helper = new THREE.GridHelper(10, 10);
helper.material.opacity = 0.25;
helper.material.transparent = true;
scene.add(helper);
var axis = new THREE.AxesHelper(100);
scene.add(axis);
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
renderer.render(scene, camera);
}
})();
<!--script src="https://threejs.org/build/three.js"></!--script-->
<script src="https://rawcdn.githack.com/mrdoob/three.js/r124/build/three.js"></script>
<script src="https://rawcdn.githack.com/mrdoob/three.js/r124/examples/js/controls/OrbitControls.js"></script></script>
<div id="container"></div>
关于javascript - 使用three.js有孔的圆 Angular 框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59828669/
我想检测(并关闭)封闭网格的开口和孔洞/镂空部分。我知道对于一个开放的网格,这可以通过找到边界边(只属于一个三角形的边)来完成,如 here 所述。 . 但是对于不存在此类边界边的封闭网格呢?下面是一
我试过https://docs.konghq.com/getting-started-guide/2.1.x/expose-services/我也有本地服务器:kong/2.2.1我可以同时注册服务和
我在我的应用程序中使用 logback(SiftingAppender 和 RollingFileAppender)。每当请求进来时,它们将根据 url 查询中的 id 记录到不同的文件中。 这工作得
我在 ARKit 上遇到了一个问题,我需要帮助。我正在做一个小演示,我在场景中放置了一个简单的 SCNTorus 几何体,我试图将一个小球 (SCNSphere) 扔进环面孔中。问题是球在中间弹跳而不
编辑 经过更多研究但仍然没有解决方案,我添加了实质性编辑以及指向 .shp 文件的链接。 The shape file is included here 我有一个包含 9 个多边形的 SpatialP
有没有一种简单直接的方法可以使用 opencv 3.1 python 从图像中提取内部轮廓(孔)? 我知道我可以使用“区域”作为条件。但是,如果我更改图像分辨率,“区域”就不一样了。 例如,这张图片:
我正在审查 Angular 中的模板项目 引导组件有一个如下所示的 HTML 模板。很有道理。应用程序标题、应用程序侧边栏等标签将包含由带有匹配选择器的组件提供的内容。这一切都检查出来了。
案例场景: $ cat Status.txt 1,connected 2,connected 3,connected 4,connected 5,connected 6,connected 7,dis
我是一名优秀的程序员,十分优秀!