Три JS получают кривые на гранях кубоида (геометрия коробки) - PullRequest
Новая
       6

Три JS получают кривые на гранях кубоида (геометрия коробки)

0 голосов
/ 12 июля 2020

Я новичок в трех. js и я использовал геометрию коробки для рисования бетонной плиты! Я пытаюсь нарисовать волны, похожие на формы, на краях плиты 3D rect angular. Мое требование примерно такое.

введите описание изображения здесь

Я не знаю, возможно ли получить вышеуказанные кривые с геометрией коробки

1 Ответ

1 голос
/ 12 июля 2020

Вы можете сколько угодно искажать геометрию бокса.

Если вам нужны волны, используйте функции sin или cos: 

body {
  overflow: hidden;
  margin: 0;
}
<script type="module">

import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.118.3/build/three.module.js";
import {OrbitControls} from "https://cdn.jsdelivr.net/npm/three@0.118.3/examples/jsm/controls/OrbitControls.js";

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

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

var g = new THREE.BoxBufferGeometry(13, 5, 3, 20, 1, 1);

var p = g.getAttribute("position");
var v3 = new THREE.Vector3();
for(let i = 0; i < p.count; i++){
  v3.fromBufferAttribute(p, i);
  p.setZ(i, v3.z + Math.sin(v3.x));
}
g.computeVertexNormals();

var m = new THREE.MeshBasicMaterial({color: "aqua", wireframe: true});
var o = new THREE.Mesh(g, m);
scene.add(o);

renderer.setAnimationLoop(()=>{
  renderer.render(scene, camera);
});

</script>
...