Три JS Вырезать углы глубины формы ExtrudeGeometry - PullRequest
Новая
       3

Три JS Вырезать углы глубины формы ExtrudeGeometry

0 голосов
/ 11 марта 2020

У меня есть 3D форма (ТРИ. Форма) , созданная в Три js с использованием некоторых вершин. Затем я использую ExtrudeGeometry , чтобы сделать ее 3D смотреть форму. Мне нужна эта форма с обрезанными краями в 45 градусов . Но главная проблема в том, что мне нужно обрезать края выдавливаемой части геометрии . Я нигде не могу найти единого решения этого вопроса. Я постараюсь изо всех сил, чтобы вы поняли реальное требование.

This is a simple shape with face and extrude part

Я хочу отрезать края выдавливаемой части, а не лицо . Вы можете увидеть изображение ниже для справки

I need edges cut with 45 degrees like this

, поэтому помните, что это не грань фигуры. Простая форма без выдавливаемой детали выглядит следующим образом

Simple image without ExtrudeGeometry

Кто-нибудь, кто может помочь мне в решении этого вопроса? Было бы очень признательно ему, если бы он мог помочь мне найти решение для этого.

1 Ответ

0 голосов
/ 11 марта 2020

Вариант того, как вы можете это сделать: 

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 100);
camera.position.set(0, 0, 20);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var w = 1;
var h = 3;
var d = 10;

var pts = [
  new THREE.Vector2(-w, h),
  new THREE.Vector2(-w, -h),
  new THREE.Vector2(w, -w),
  new THREE.Vector2(w, w)
]

var shape = new THREE.Shape(pts);
var shapeGeom = new THREE.ExtrudeBufferGeometry(shape, {
  depth: d * 2,
  bevelEnabled: false
});
shapeGeom.center();
shapeGeom.rotateY(-Math.PI * 0.5);

// 45 deg cut
var pos = shapeGeom.getAttribute("position");
var temp = new THREE.Vector3();
for (let i = 0; i < pos.count; i++) {
  temp.fromBufferAttribute(pos, i);
  let signX = Math.sign(temp.x);
  let shift = h - temp.y;
  pos.setX(i, temp.x - (shift * signX));
}
pos.needsUpdate = true;

var shapeMat = new THREE.MeshBasicMaterial({
  color: "aqua",
  wireframe: true
});
var mesh = new THREE.Mesh(shapeGeom, shapeMat);
scene.add(mesh);




renderer.setAnimationLoop(() => {
  renderer.render(scene, camera)
});
body {
  overflow: hidden;
  margin: 0;
}
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
...