gpt4 book ai didi

javascript - 如何在 Three.js 中将 `Parentobject1` 转换为 `childobject2` 、 `childobject3` 添加或绘制?

转载 作者:行者123 更新时间:2023-11-28 03:44:24 26 4
gpt4 key购买 nike

我创建了两个对象 doubleSquaredoubleSquare1。我期望输出双线方形对象。我尝试了两种类型的格式,但没有得到预期的输出。请为我提供解决方案。我在进行网站分析时见过很多例子。我在代码中做错了什么?

Type 1 (在下面的代码中doubleSquare closepath以另一个对象绘制开始。如何分割?)

function doubleSquareDemoDraw(startX, startY, endX, endY, color){
var widthLength = Math.round(Math.abs(endX - startX));
var heightLength = Math.round(Math.abs(endY - startY));
console.log(widthLength+'::'+heightLength);

var combined = new THREE.Geometry();
var doubleSquare = new THREE.Geometry();
doubleSquare.vertices.push(new THREE.Vector3(startX, startY, 0));
doubleSquare.vertices.push(new THREE.Vector3(endX, startY, 0));
doubleSquare.vertices.push(new THREE.Vector3(endX, endY, 0));
doubleSquare.vertices.push(new THREE.Vector3(startX, endY, 0));
doubleSquare.vertices.push(new THREE.Vector3(startX, startY, 0));
doubleSquare.vertices.push(new THREE.Vector3(startX, startY, 0)); //closepath



var doubleSquare1 = new THREE.Geometry();
doubleSquare1.vertices.push(
new THREE.Vector3(startX + 4, startY- 4 , 0),
new THREE.Vector3(endX -4, startY- 4, 0),
new THREE.Vector3(endX - 4, endY +4, 0),
new THREE.Vector3(startX + 4, endY + 4, 0),
new THREE.Vector3(startX + 4, startY -4 , 0)
);

THREE.GeometryUtils.merge( combined, doubleSquare );
THREE.GeometryUtils.merge( combined, doubleSquare1 );

var display = new THREE.Line(combined, new THREE.LineBasicMaterial({ color: color }));

return display;
}

类型 2(在下面的代码中,只有单个对象可见,而不是两个)

function doubleSquareDraw(startX, startY, endX, endY, color){

var combined = new THREE.Geometry();
var square1 = new THREE.Shape();
square1.moveTo(startX, startY, 0);
square1.lineTo(endX, startY, 0);
square1.lineTo(endX, endY, 0);
square1.lineTo(startX, endY, 0);
square1.lineTo(startX, startY, 0);

var square2 = new THREE.Path();
square2.moveTo(startX + 4 , startY - 4 , 0);
square2.lineTo(endX - 4 , startY - 4 , 0);
square2.lineTo(endX - 4 , endY + 4 , 0);
square2.lineTo(startX + 4 , endY + 4 , 0);
square2.lineTo(startX + 4 , startY - 4 , 0);
square1.holes.push( square2);

var geometry = new THREE.BufferGeometry().setFromPoints(square.getPoints());
var square = new THREE.Line(geometry, new THREE.MeshBasicMaterial({
color: color
}));
return display;
}

最佳答案

如果你查看这个example的源代码如果更仔细地观察,您会发现形状的线条和孔的线条是分开绘制的。

例如,形状arcShape:

  1. 我们设置形状及其孔 here

  2. 我们将该形状传递到 addShape( arcShape, extrudeSettings, 0x804000, 150, 0, 0, 0, 0, 0, 1 );

  3. addShape内部,我们调用addLineShape( shape, color, x, y, z, rx, ry, rz, s );,它绘制了外部形状的轮廓线;

  4. 为了在圆内绘制孔,我们调用 addLineShape(),并在第一个参数中传递该孔的路径。 Here .

从我在您的代码中看到的内容来看,您认为,如果您设置一个形状及其孔,然后使用 new THREE.BufferGeometry().setFromPoints(shape.getPoints()) 创建一个缓冲区几何图形,然后你就得到了形状的轮廓线及其孔的轮廓线。你错了,因为事情的运作方式不同。

关于javascript - 如何在 Three.js 中将 `Parentobject1` 转换为 `childobject2` 、 `childobject3` 添加或绘制?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48636659/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com