javascript - 来自透明图像的三个 js 形状

Question

嗨，我正在尝试创建一个 3d 模型，其上下两侧为透明图像形状，其他为单色（本例中为黄色）

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/

我想得到这个：

我怎样才能做到这一点？

标签： javascript3dthree.js

Answer 1

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

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);
}

body {
  overflow: hidden;
  margin: 0;
}

<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>