Three.js快速文字雕刻

Question

我试图用Three.js在表面上雕刻一些文字。我已经使用csg.js和ThreeCSG达到了它的效果，效果非常好，但问题是需要很长时间。在我的电脑上，雕刻文字Hello需要大约30秒。

正在搜索其他解决方案我找到了this网站。他们制作定制首饰，你可以在上面雕刻文字，雕刻文字的时间非常短！所以我假设他们没有使用csg.js.还有哪些其他技术可以用来实现这个结果？

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

Answer 1

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

我不认为你会为每个字母创建一个凹凸贴图，你只需要在一个画布上做所有的绘图（文本）并将其应用为凹凸贴图。

单击下面的“运行代码片段”以查看画布凹凸贴图演示（单击并拖动白色框）。
我希望这可以帮助。

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() { 
 
\t \t // get canvas and context 
 
\t \t 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){ 
 
    \t if(paint){ 
 
     \t 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); 
 
\t drawContext.lineTo(x,y); 
 
\t 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>