Question

我是Three js的新手，我试图使用三个js在每个顶点上创建一个带有小图标类型图像的旋转二十面体，我可以创建二十面体并使其旋转但我不是能够在每个顶点上附加图像。任何人都可以帮我这样做吗？请查看到目前为止我能实现的js小提琴链接：

<div id="container"></div>

var $container = $('#container');
var renderer = new THREE.WebGLRenderer({
  antialias: true,
  alpha: true
});
var camera = new THREE.PerspectiveCamera(80, 1, 0.1, 10000);
var scene = new THREE.Scene();
var Ico;

scene.add(camera);
renderer.setSize(576, 576);

// Making the canvas responsive
function onWindowResize() {

  var screenWidth = $(window).width();
  if (screenWidth <= 479) {
    renderer.setSize(300, 300);
  } else if (screenWidth <= 767) {
    renderer.setSize(400, 400);
  } else if (screenWidth <= 991) {
    renderer.setSize(500, 500);
  } else if (screenWidth <= 1200) {
    renderer.setSize(450, 450);
  } else if (screenWidth <= 1366) {
    renderer.setSize(550, 550);
  }
  camera.updateProjectionMatrix();

}
onWindowResize();
window.addEventListener('resize', onWindowResize, false);


$container.append(renderer.domElement);

// Camera
camera.position.z = 200;

// Material
var greyMat = new THREE.MeshPhongMaterial({
  color: new THREE.Color("rgb(125,127,129)"),
  emissive: new THREE.Color("rgb(125,127,129)"),
  specular: new THREE.Color("rgb(125,127,129)"),
  shininess: "100000000",
  shading: THREE.FlatShading,
  transparent: 1,
  opacity: 1
});

var L2 = new THREE.PointLight();
L2.position.z = 1900;
L2.position.y = 1850;
L2.position.x = 1000;
scene.add(L2);
camera.add(L2);

var Ico = new THREE.Mesh(new THREE.IcosahedronGeometry(125, 1), greyMat);
Ico.rotation.z = 0.5;
scene.add(Ico);
var trackballControl = new THREE.TrackballControls(camera, renderer.domElement);
trackballControl.rotateSpeed = 1.0; 
trackballControl.noZoom = true;

function update() {
  Ico.rotation.x += 2 / 500;
  Ico.rotation.y += 2 / 500;
}

// Render
function render() {
  trackballControl.update();
  requestAnimationFrame(render);
  renderer.render(scene, camera);
  update();
}
render();

https://jsfiddle.net/arunvenugopal11/uoxtmtnr/

提前致谢：）

Answer 1

您可以使用var txtLoader = new THREE.TextureLoader(); txtLoader.setCrossOrigin(""); // you don't need it, if you get images from your web site var textures = [ // you can have a full set of 42 images, I used just 2 "https://threejs.org/examples/textures/UV_Grid_Sm.jpg", "https://threejs.org/examples/textures/colors.png" ]; var direction = new THREE.Vector3(); // we'll re-use it in the loop Ico.geometry.vertices.forEach(function(vertex, index){ var texture = txtLoader.load(textures[index % 2]); // when you have a full set of images, you don't need that operation with modulus '%' var spriteMaterial = new THREE.SpriteMaterial({map: texture}); var sprite = new THREE.Sprite(spriteMaterial); sprite.scale.setScalar(10); // the size is up to you direction.copy(vertex).normalize(); // direction is just a normalized vertex sprite.position.copy(vertex).addScaledVector(direction, 10); // add scaled direction to the position of a sprite Ico.add(sprite); });，如下所示：

module.tx_hwforms.persistence.storagePid = 112

jsfiddle示例。 R85

三个JS：如何在二十面体的每个顶点上添加图像

1 个答案: