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>