javascript - 三.js快速文字雕刻

Question

我正在尝试使用 Three.js 在表面上雕刻一些文本。我已经使用 csg.js 实现了它和 ThreeCSG它运行得很完美，结果确实很好，但问题是需要很多时间。在我的电脑上，雕刻 Hello 这个词大约需要 30 秒。

搜索我发现的其他解决方案 this地点。他们制作定制珠宝，您可以在上面雕刻文字，而且雕刻文字所需的时间非常短!所以我假设他们没有使用 csg.js。还可以使用什么其他技术来实现此结果？

我虽然关于使用凹凸贴图，但我应该为每个字母生成凹凸贴图，但我不知道这是否是正确的方法。

Answer 1

通过查看着色器，我可以看到您链接到的网站使用凹凸贴图。

我认为您不会为每个字母创建凹凸贴图，您只需在单个 Canvas 上完成所有绘图(文本)并将其应用为凹凸贴图。

单击下面的“运行代码片段”即可观看 Canvas 凹凸贴图的演示(在白色框中单击并拖动)。
我希望这有帮助。

var camera, scene, renderer, mesh, material, stats;
var drawStartPos = {x:0, y:0};

init();
setupCanvasDrawing();
animate();

function init() {
    // Renderer.
    renderer = new THREE.WebGLRenderer();
    //renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    // Add renderer to page
    document.getElementById('threejs-container').appendChild(renderer.domElement);

    // Create camera.
    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.z = 400;

    // Create scene.
    scene = new THREE.Scene();

    // Create material
    material = new THREE.MeshPhongMaterial();

    // Create cube and add to scene.
    var geometry = new THREE.BoxGeometry(200, 200, 200);
    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    // Create ambient light and add to scene.
    var light = new THREE.AmbientLight(0x404040); // soft white light
    scene.add(light);

    // Create directional light and add to scene.
    var directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set(1, 1, 1).normalize();
    scene.add(directionalLight);

    // Add listener for window resize.
    window.addEventListener('resize', onWindowResize, false);

    // Add stats to page.
    stats = new Stats();
    document.body.appendChild( stats.dom );
}

function setupCanvasDrawing() {
		// get canvas and context
		var drawingCanvas = document.getElementById('drawing-canvas');
    var drawingContext = drawingCanvas.getContext('2d');
    
    // draw white background
    drawingContext.fillStyle = "#FFFFFF";
    drawingContext.fillRect(0,0,128,128);
    
    // set canvas as bumpmap
    material.bumpMap = new THREE.Texture(drawingCanvas);
    
    // set the variable to keep track of when to draw
    var paint = false;
    
    // add canvas event listeners
    drawingCanvas.addEventListener('mousedown', function(e){
      paint = true
      drawStartPos = {x:e.offsetX, y:e.offsetY};
    });
    drawingCanvas.addEventListener('mousemove', function(e){
    	if(paint){
      	draw(drawingContext, e.offsetX, e.offsetY);
      }
    });
    drawingCanvas.addEventListener('mouseup', function(e){
      paint = false;
    });
    drawingCanvas.addEventListener('mouseleave', function(e){
      paint = false;
    });
}

// Draw function
function draw(drawContext, x, y) {
  drawContext.moveTo(drawStartPos.x, drawStartPos.y);
	drawContext.lineTo(x,y);
	drawContext.stroke();
  drawStartPos = {x:x, y:y};
  material.bumpMap.needsUpdate = true;
}

function animate() {
    requestAnimationFrame(animate);
    mesh.rotation.x += 0.005;
    mesh.rotation.y += 0.01;
    renderer.render(scene, camera);
    stats.update();
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

body {
    padding: 0;
    margin: 0;
}

#drawing-canvas {
  position: absolute;
  background-color: #000;
  top: 0px;
  right: 0px;
  z-index: 3;
}

#threejs-container {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 1;
}

<script src="https://rawgit.com/mrdoob/three.js/r83/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/stats.js/r17/build/stats.min.js"></script>
<canvas id="drawing-canvas" height="128" width="128"></canvas>
<div id="threejs-container"></div>