three.js渲染文本到場景
[英]three.js rendering text to scene
問題描述
我是Three.js的新手。
在工作中，我必須制作3d圖形網站。
因此，在google中搜索后，我發現three.js適合方便地操作WebGL。
在three.js文件中（ https://threejs.org/docs/#api/zh/geometries/TextGeometry ），
TextGeometry是用於在場景中繪制文本的API。
[src.js]
init = () => {
window.addEventListener('resize', resizeWindow);
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000);
var controls = new THREE.OrbitControls( camera );
controls.update();
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xdd3b56);
renderer.setSize(window.innerWidth, window.innerHeight);
// Set shadow
renderer.shadowMap.enabled = true;
// Show Axis
var axes = new THREE.AxisHelper(5);
scene.add(axes);
// Text
var loader = new THREE.FontLoader();
loader.load( './helvetiker_regular.typeface.json', function ( font ) {
var geometry = new THREE.TextGeometry( 'Hello three.js!', {
font: font,
size: 80,
height: 5,
curveSegments: 12,
bevelEnabled: true,
bevelThickness: 10,
bevelSize: 8,
bevelSegments: 5
} );
} );
var textMaterial = new THREE.MeshPhongMaterial({color: 0xFE98A0});
var text = new THREE.Mesh(geometry, textMaterial);
text.position.x = 0;
text.position.y = 10;
text.position.z = 10;
scene.add(text);
// Light
var spotLight = new THREE.SpotLight(0xFFFFFF);
spotLight.position.set(-40, 60, 30);
spotLight.castShadow = true;
spotLight.shadow.mapSize.width = 5120;
spotLight.shadow.mapSize.height = 5120;
scene.add(spotLight);
// Camera Setting
camera.position.x = 0;
camera.position.y = 30;
camera.position.z = 30;
camera.lookAt(scene.position);
document.getElementById("threejs_scene").appendChild(renderer.domElement);
renderScene();
function renderScene() {
requestAnimationFrame(renderScene);
controls.update();
renderer.render(scene, camera);
}
}
window.onload = init();
[index.html的]
<html>
<head>
<script src="three.js"></script>
<script src="OrbitControls.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="threejs_scene"></div>
<script src="src.js"></script>
</body>
</html>
當我執行代碼時，它拋出[.WebGL-0x7fb612852000]RENDER WARNING: Render count or primcount is 0. WebGL: too many errors, no more errors will be reported to the console for this context. [.WebGL-0x7fb612852000]RENDER WARNING: Render count or primcount is 0. WebGL: too many errors, no more errors will be reported to the console for this context. 錯誤。
因此，我在Google上進行了搜索，它是在Three.js嘗試呈現尚不存在的對象時發生的。
但是在我的代碼中，我已經定義了它。
var textMaterial = new THREE.MeshPhongMaterial({color: 0xFE98A0});
var text = new THREE.Mesh(geometry, textMaterial);
text.position.x = 0;
text.position.y = 10;
text.position.z = 10;
我該如何解決這個問題？
我的最后一個目標是在場景中顯示文本。
謝謝。
1 個解決方案
解決方案1
1 已采納 2018-09-11 07:42:00
window.onload = function(params) { /* * * SET UP THE WORLD * */ //set up the ratio var gWidth = window.innerWidth; var gHeight = window.innerHeight; var ratio = gWidth / gHeight; var borders = [40, 24] //indicate where the ball needs to move in mirror position var light = new THREE.AmbientLight(0xffffff, 0.5); var light1 = new THREE.PointLight(0xffffff, 0.5); light1.position.set(0, 5, 0); light1.castShadow = true; // set the renderer var renderer = new THREE.WebGLRenderer(); var camera = new THREE.PerspectiveCamera(); camera.position.set(10, 10, 10); camera.lookAt(new THREE.Vector3(0, 0, 0)); //properties for casting shadow renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.setSize(gWidth, gHeight); document.body.appendChild(renderer.domElement); var scene = new THREE.Scene(); scene.add(light); scene.add(light1); var ground = new THREE.Mesh(new THREE.BoxGeometry(10, 0.5, 10), new THREE.MeshLambertMaterial()) ground.receiveShadow = true; scene.add(ground) var geometry; var loader = new THREE.FontLoader(); var mesh; requestAnimationFrame(render); function render() { if (mesh) { mesh.rotation.y += 0.01; mesh.rotation.z += 0.007; } renderer.render(scene, camera); requestAnimationFrame(render); } loader.load('https://cdn.rawgit.com/mrdoob/three.js/master/examples/fonts/helvetiker_regular.typeface.json', function(font) { var geometry = new THREE.TextGeometry('Hello three.js!', { font: font, size: 80, height: 5, curveSegments: 12, bevelEnabled: true, bevelThickness: 10, bevelSize: 8, bevelSegments: 5 }); var material = new THREE.MeshLambertMaterial({ color: 0xF3FFE2 }); mesh = new THREE.Mesh(geometry, material); mesh.position.set(0, 2, 0); mesh.scale.multiplyScalar(0.01) mesh.castShadow = true; scene.add(mesh); var canv = document.createElement('canvas') canv.width = canv.height = 256; var ctx = canv.getContext('2d') ctx.fillStyle = 'white'; ctx.fillRect(0, 0, canv.width, canv.height); ctx.fillStyle = 'black' ctx.fillText("HERE IS SOME 2D TEXT", 20, 20); var tex = new THREE.Texture(canv); tex.needsUpdate = true; var mat = new THREE.MeshBasicMaterial({ map: tex }); var plane = new THREE.Mesh(new THREE.PlaneGeometry(10, 10), mat); scene.add(plane) }); }
body { padding: 0; margin: 0; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.min.js"></script> <html> <head> </head> <body> </body> </html>
在three.js場景中未渲染3D文本
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.