Question

具有旋转纹理的铅，我读了这个问题 Three.js Rotate Texture，然后有人建议在画布上旋转，如果您有矩形，效果很好，但我的多边形带有pb，因此旋转后，我在某个角落会有黑色区域，所以该解决方案不适合我，所以也许谁知道我可以通过threejs旋转纹理？？？

Answer 1

//Here's some code showing texture rotation/repeat/offset/center/etc.

var renderer = new THREE.WebGLRenderer();
var w = 600;
var h = 200;
renderer.setSize(w, h);
document.body.appendChild(renderer.domElement);

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
  45, // Field of view
  w / h, // Aspect ratio
  0.1, // Near
  10000 // Far
);
camera.position.set(15, 10, 15);
camera.lookAt(scene.position);
controls = new THREE.OrbitControls(camera, renderer.domElement);

var light = new THREE.PointLight(0xFFFF00);
light.position.set(20, 20, 20);
scene.add(light);
var light1 = new THREE.AmbientLight(0x808080);
light1.position.set(20, 20, 20);
scene.add(light1);
var light2 = new THREE.PointLight(0x00FFFF);
light2.position.set(-20, 20, -20);
scene.add(light2);
var light3 = new THREE.PointLight(0xFF00FF);
light3.position.set(-20, -20, -20);
scene.add(light3);

var planeGeom = new THREE.PlaneGeometry(40, 40);
var canvas = document.createElement('canvas');
canvas.width = canvas.height = 64;
var ctx = canvas.getContext('2d');

ctx.fillStyle = 'rgba(256,0,0,0.95)'
ctx.fillRect(0, 0, 32, 32);
ctx.fillRect(32, 32, 32, 32);
var srnd = (rng) => (Math.random() - 0.5) * 2 * rng
for (var i = 0; i < 300; i++) {
  ctx.fillStyle = `rgba(${srnd(256)|0}, ${srnd(256)|0}, ${srnd(256)|0}, ${srnd(1)})`
  ctx.fillRect(srnd(60) | 0, srnd(60) | 0, 5, 5);
}
ctx.fillStyle = 'rgba(256,256,0,0.95)'
ctx.fillText("TEST", 2, 10);
ctx.fillText("WOOO", 32, 45);

var tex = new THREE.Texture(canvas)
tex.magFilter = THREE.NearestFilter;
tex.wrapS = tex.wrapT = THREE.RepeatWrapping;
tex.magFilter = tex.minFilter = THREE.NearestFilter;
tex.needsUpdate = true;
var material = new THREE.MeshLambertMaterial({
  color: 0x808080,
  map: tex,
  transparent: true,
  side: THREE.DoubleSide
});
var mesh = new THREE.Mesh(planeGeom, material);
scene.add(mesh);
renderer.setClearColor(0xdddddd, 1);

tex.repeat.x = tex.repeat.y = 2;

//fun effect
for (var i = 1; i < 10; i++) {
  var m;
  scene.add(m = mesh.clone());
  m.position.z += i * 1.1;
}


(function animate() {
  var tm = performance.now() * 0.0001
  tex.rotation = Math.sin(tm) * Math.PI
  //tex.offset.x = tex.offset.y = -2;
  //tex.offset.x = Math.sin(tex.rotation) * -0.5;
  //tex.offset.y = Math.cos(tex.rotation) * -0.5;
  tex.repeat.x = tex.repeat.y = Math.sin(tex.rotation * 1.5) * 3;
  tex.center.x = 0.5;
  tex.center.y = 0.5;

  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
})();

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>

如何在平面内旋转纹理？

1 个答案: