Question

我正在尝试将一些文字渲染到假的3D＆＃34;背景（请参阅我的图像链接，查看它看起来像渲染的图片），但是当我在Z轴上旋转文本以使文本看起来像是假3D背景的一部分时，文本变得扭曲，几乎看起来斜体。我已尝试在x和y轴上旋转以改变深度感，但我无法让它看起来正确。

任何人遇到这个或有想法？

图像：

759195

代码：

var desiredWidthInCSSPixels = 1100;
var desiredHeightInCSSPixels = 700;

var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer();
var texture_loader = new THREE.TextureLoader();
var font_loader = new THREE.FontLoader();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

renderer.setSize( desiredWidthInCSSPixels, desiredHeightInCSSPixels );
document.body.appendChild( renderer.domElement );

//this is the fake 3d backdrop "business cards"
texture_loader.load( "assets/images/mockups/mockup-1.png", function (texture) {
    texture.minFilter = THREE.LinearFilter;

    var geometry = new THREE.BoxGeometry( 800, 600, 0 );
    var material = new THREE.MeshBasicMaterial( { map: texture } );
    var cube = new THREE.Mesh( geometry, material );

    scene.add( cube );
});

//here's the company's logo
texture_loader.load( "assets/images/logo.svg", function (texture) {
    texture.minFilter = THREE.LinearFilter;

    var geometry = new THREE.BoxGeometry( 60, 60, 0 );
    var material = new THREE.MeshBasicMaterial( { transparent: true, map: texture } );
    var cube = new THREE.Mesh( geometry, [null, null, null, null, material, null] );

    cube.rotation.z = -150.12;

    cube.position.x = 60;
    cube.position.y = -40;


    scene.add( cube );
});

//the text loader that looks italicized
font_loader.load( 'assets/fonts/roboto_black_regular.json', function(font) {
    var geometry = new THREE.TextGeometry( 'My test text looks italic!!!', {
        font: font,
        size: 5,
        curveSegments: 12,
        bevelEnabled: true,
        bevelThickness: 3,
        bevelSize: 8,
        bevelSegments: 5
    } );

    var material = new THREE.MeshPhongMaterial({
        color: 0xddd
    });

    var cube = new THREE.Mesh( geometry, [material, null, null, null, null, null] );

    cube.position.x = 60;
    cube.position.y = -40;
    cube.position.z = 20;

    cube.rotation.x = .12;
    cube.rotation.z = -149.95;

    scene.add( cube );
});


camera.position.z = 200;

var animate = function () {
    requestAnimationFrame( animate );

    renderer.render(scene, camera);
};
animate();


function xtest() {
    cube.rotation.x += .01;

    console.log(cube.rotation.x);
}
function ytest() {
    cube.rotation.y += .01;

    console.log(cube.rotation.y);
}
function ztest() {
    cube.rotation.z += .01;

    console.log(cube.rotation.z);
}

function x1test() {
    cube.rotation.x -= .01;

    console.log(cube.rotation.x);
}
function y1test() {
    cube.rotation.y -= .01;

    console.log(cube.rotation.y);
}
function z1test() {
    cube.rotation.z -= .01;

    console.log(cube.rotation.z);
}

Three.js TextGeometry - Z旋转的文本看起来是斜体

0 个答案: