代码之家 › 专栏 › 技术社区 › user2132190

three.js-使用贴花将文本添加到平面

three.js

user2132190 · 技术社区 · 6 年前

跟随 https://github.com/spite/THREE.DecalGeometry , 我试图将文本“放置”在一个简单的20x20平面上,该平面位于(0,10,0),如下所示。但是,贴花正在平面下方渲染:

我是不是过于简单化了?

var geometry = new THREE.PlaneGeometry(20, 20);
var material = new THREE.MeshBasicMaterial({color: 0x4a5f70, opacity: 0.8, transparent: true});
var face = new THREE.Mesh(geometry, material);
face.position.setX(0);
face.position.setY(0);
face.position.setZ(10);

var decalGeometry = new THREE.DecalGeometry(
    face, 
    new THREE.Vector3(0,0,10),
    new THREE.Vector3(0,0,1), //z axis
    new THREE.Vector3(20,20,20), 
    new THREE.Vector3(0,0,0)
);

var decalMaterial = new THREE.MeshPhongMaterial({
  color: 0xAAAAAA,
  map: THREE.ImageUtils.loadTexture('/img/images/top.png'),
  side: THREE.FrontSide,
  opacity: 1.0,
  transparent: true,
  depthTest: true,
  depthWrite: false,
  polygonOffset: true,
  polygonOffsetFactor: -4,
});

var mesh = new THREE.Mesh( decalGeometry, decalMaterial );

this.scene.add(face);
this.scene.add(mesh);

1 回复 | 直到 6 年前

imricardoramos 6 年前

我认为代码实际上是按预期工作的,贴花网格不会与原始网格重叠,而是生成新的网格。实际上,我尝试将平面更改为球体,然后“top.png”纹理会相应地被投影。

中的参数 decalGeometry 定义投影网格的位置,但不定义生成的网格(定位在(0,0,0)上)。最终的结果是渲染两个网格:原始网格被替换,结果网格(使用贴花投影)以(0,0,0)为中心。

如果找不到“top.png”图像,以下代码将不起作用,但您可以在本地进行尝试。

var camera, scene, renderer;
var geometry, material, mesh;
var grid;

init();
animate();

function init() {

  // Scene Setup
	renderer = new THREE.WebGLRenderer( { antialias: true } );
	renderer.setSize( window.innerWidth*0.993, window.innerHeight*0.993 );
	document.body.appendChild( renderer.domElement );

	camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 110 );
  camera.position.set( 50, 50, 0 );

  scene = new THREE.Scene();
  scene.background = new THREE.Color(0xcccccc);
  //Cube
	geometry = new THREE.BoxGeometry( 1e-3, 1e-3, 1e-3 );
	material = new THREE.MeshNormalMaterial();
	cube = new THREE.Mesh( geometry, material );
	scene.add( cube );

  //Camera Pivot
  camera.lookAt( cube.position );
  cube.add( camera );

  // Grid
  grid = new THREE.GridHelper( 100, 10 ) 
  scene.add(grid);

  // Geometry
  //var geometry = new THREE.PlaneGeometry(50, 50);
  var geometry = new THREE.SphereGeometry(10,32,32)
  var material = new THREE.MeshBasicMaterial({color: 0x4a5f70, opacity: 0.8, transparent: true, side:THREE.DoubleSide});
  var face = new THREE.Mesh(geometry, material);
  face.position.setX(0);
  face.position.setY(0);
  face.position.setZ(30);

  var decalGeometry = new THREE.DecalGeometry(
      face, 
      new THREE.Vector3(0,0,0),
      new THREE.Vector3(0,1,0), //z axis
      new THREE.Vector3(20,20,20), 
      new THREE.Vector3(0,0,0)
  );

  var decalMaterial = new THREE.MeshPhongMaterial({
    color: 0xAAAAAA,
    map: THREE.ImageUtils.loadTexture('top.png'),
    side: THREE.FrontSide,
    opacity: 1.0,
    transparent: true,
    depthTest: true,
    depthWrite: false,
    polygonOffset: true,
    polygonOffsetFactor: -4,
  });

  var mesh = new THREE.Mesh( decalGeometry, decalMaterial );

  this.scene.add(face);
  this.scene.add(mesh); 
}


function animate() {

	requestAnimationFrame( animate );

  var Y_AXIS = new THREE.Vector3( 0, 1, 0 );
  cube.rotateOnAxis( Y_AXIS, 0.005 );    // radians

	renderer.render( scene, camera );

}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="https://threejs.org/build/three.min.js"></script>
  <script src="https://combinatronics.com/spite/THREE.DecalGeometry/master/src/THREE.DecalGeometry.js"></script>
</head>
<body>
</body>
</html>