透明图像中的三个js形状

Question

您好我正在尝试使用透明图像形状的上下两侧创建一个三维模型，其他单色（本例中为黄色）

var texture = new THREE.TextureLoader().load( 'img.png' );
var img = new THREE.MeshBasicMaterial( { map: texture } );
var geom = new THREE.BoxGeometry(25,25,1);

https://jsfiddle.net/k2aoh7um/

我想得到这个：

我该怎么做？

Answer 1

我能想象如何实现这一目标的唯一方法是使用THREE.Shape()和THREE.ExtrudeBufferGeometry()：

＆＃13;

＆＃13;

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

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

var center = new THREE.Vector2();
var starLong = new THREE.Vector2(0, 1);
var starShort = new THREE.Vector2(0, 0.5).rotateAround(center, THREE.Math.degToRad(36));
var angle = THREE.Math.degToRad(72);

var points = [];

for (var i = 0; i < 5; i++) {
  points.push(starLong.clone().rotateAround(center, angle * i));
  points.push(starShort.clone().rotateAround(center, angle * i));
}
var path = new THREE.Shape(points);

var geom = new THREE.ExtrudeBufferGeometry(path, {
  steps: 1,
  amount: 0.0625,
  bevelEnabled: false
});
geom.rotateX(-Math.PI * 0.5);

var star = new THREE.Mesh(geom, new THREE.MeshBasicMaterial({
  color: "orange",
  wireframe: true
}));
scene.add(star);


render();

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

＆＃13;

body {
  overflow: hidden;
  margin: 0;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

＆＃13;

＆＃13;

＆＃13;