threejs의 리본 대안

debugcn 에 게시 Dev

카타나 24

누구나 threejs에 리본의 간단한 예가 있습니까?

나는 여기 와 여기 에서 이러한 예제를 보았지만 첫 번째는 THREE.Ribbon더 이상 존재하지 않는 것을 사용 하고 두 번째는 이전 질문 에서 게시 한 리본처럼 보이는 threejs로 만들어진 하나의 리본을 원할 때 지나치게 복잡해 보입니다 .

아무도 대안이 없으면 두 번째를 분해하는 중입니다.

감사

참고-명확히하기 위해 누구에게도 작업을 요청하는 것이 아닙니다. 올바른 방향의 링크 나 지점을 원합니다.

편집하다

좋아-그래서 나는 이것으로 약간의 머리를 만들었습니다. 다음과 같은 리본의 첫 번째 부분이있는 jsfiddle을 만들었습니다.

그리고 여기 에 벡터를 회전시키려는 바이올린 이 있습니다. 리본에서 곡선을 꺼내려면 y 축이되어야한다고 생각합니다.

죄수 849

궁극적 인 솔루션이 아니라 아이디어입니다.

사용 THREE.ExtrudeGeometry()과 함께 THREE.CatmullRomCurve3(). 결과는 원하는 것과 똑같지는 않지만 충분히 유사합니다.

hh및의 값을 hw바꾸고 결과가 어떻게 변경되는지 확인할 수 있습니다 .

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 3);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x181818);
document.body.appendChild(renderer.domElement);

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

scene.add(new THREE.AmbientLight(0xffffff, .3));
var light = new THREE.DirectionalLight(0xffffff, .7);
light.position.setScalar(10);
scene.add(light);

scene.add(new THREE.GridHelper(2, 10));

var ribbonBase = new THREE.CatmullRomCurve3([
  new THREE.Vector3(-1, 1, 0),
  new THREE.Vector3(-1, 1.2, 0),
  //new THREE.Vector3(-1, 1, 0.125),
  new THREE.Vector3(0, 0, 0.5),
  //new THREE.Vector3(1, 1, 0.125),
  new THREE.Vector3(1, 1.2, 0),
  new THREE.Vector3(1, 1, 0)
]);

var segments = 300;

var hh = 0.0625;
var hw = 0.001;
var profile = new THREE.Shape([
  new THREE.Vector2(-hw, -hh),
  new THREE.Vector2(-hw, hh),
  new THREE.Vector2(hw, hh),
  new THREE.Vector2(hw, -hh),
  new THREE.Vector2(-hw, -hh)
]);

var ribbonGeometry = new THREE.ExtrudeGeometry(profile, {
  steps: 200,
  bevelEnabled: false,
  extrudePath: ribbonBase
});

var ribbonMaterial = new THREE.MeshLambertMaterial({
  color: "white"
});

var ribbon = new THREE.Mesh(ribbonGeometry, ribbonMaterial);
scene.add(ribbon);

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-20

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

threejs의 리본 대안

threejs의 리본 대안

Windows PowerShell에서 wget의 기본 대안?

기본 Google Glass의 리소스 대상?

NOT IN 절이있는 Hive 쿼리의 대안

Access 쿼리에서 IF EXISTS의 대안

REPLACE INTO TABLE mysql 쿼리의 대안

나가지 않는 '머리'의 대안?

자바 리플렉션의 대안?

Android의 물리적 인증 대안

SQLite : UPDATE JOIN 하위 쿼리의 대안

View 쿼리의 SET 문 대안

사파리의 절대 위치에 대한 대안?

우분투 wsl의 기본 텍스트 편집기의 대안

IrfanView의 대안

QJoyPad의 대안

count ()의 대안

ElementAtOrDefault의 대안

TfidfVectorizer의 대안

getline의 대안

HitTest ()의 대안

IrfanView의 대안

TextEdit의 대안?

Sandboxie의 대안

underPageBackgroundColor의 대안

InvokeRequired의 대안

innerthtml의 대안

GROUP BY의 대안

.parentElement의 대안?

pack ()의 대안

nohup의 대안?