javascript - 如何在 x3dom 中更改 3d 文本的斜 Angular 大小？

Question

如何在 x3dom 中更改 3d 文本的斜 Angular 大小？现在我有这样的代码

<x3d width="392px" height="392px">
<scene>
  <viewpoint position='0 0 11'></viewpoint>
  <background skyColor='0.5 0.5 0.5'></background>
  <shape>
    <appearance>
      <material ambientIntensity='0.0933' diffuseColor='0.32 0.54 0.26' shininess='0.51' specularColor='0.46 0.46 0.46'></material>
    </appearance>
    <text string='Mono bolditalic 32px' solid='false'>
        <fontstyle family="TYPEWRITER" style="BOLDITALIC" size="0.8"></fontstyle>
    </text>
  </shape>
  <transform translation='0 0 -2'>
    <shape>
        <appearance> 
            <material diffuseColor="1 0 0" specularColor="0.5 0.5 0.5"></material>
        </appearance>
        <box></box>
    </shape>
  </transform>
</scene>
</x3d>

是否有可用的示例代码？

Answer 1

看起来没有任何单独使用 X3Dom 的倾斜文本的直接示例。 three.js似乎是唯一的 webgl 解决方案，我知道，您可以在其中轻松更改 3D 文本的斜 Angular 。根据您最近的问题，您似乎已经找到了这一点。

这里有一些关于 three.js 的其他好的资源/示例。

• 很好的介绍。幻灯片:http://fhtr.org/BasicsOfThreeJS
• http://stemkoski.github.com/Three.js/
• http://mrdoob.github.com/three.js/examples/canvas_geometry_text.html
• https://github.com/mrdoob/three.js/tree/master/examples

此外，这里还有一些 JSFiddle 示例。这些将更容易阅读/体验。

• http://jsfiddle.net/theo/VsWb9/
• http://jsfiddle.net/GKCx6/139/

---

我在获取 JSFiddle 设置时遇到了问题。 A fellow programmer was having a similar issue但在他的帮助下，我建立了一个有用的例子。这将使您有机会试验斜 Angular 功能。

斜 Angular 示例: http://jsfiddle.net/VsWb9/674/

JavaScript

// This is where stuff in our game will happen:
var scene = new THREE.Scene();

// This is what sees the stuff:
var aspect_ratio = window.innerWidth / window.innerHeight;
var camera = new THREE.PerspectiveCamera(45, aspect_ratio, 1, 100000);
camera.position.z = 800;
camera.position.x = 350;

scene.add(camera);

// This will draw what the camera sees onto the screen:
var renderer = new THREE.WebGLRenderer();

// var renderer = new THREE.CanvasRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// ******** START CODING ON THE NEXT LINE ********
var shape = new THREE.TextGeometry("Game Over", 
                                   {font: 'helvetiker',
                                    bevelThickness: '3',
                                    bevelSize: '3',
                                    bevelSegments: '4',
                                    bevelEnabled: 'true'});
var wrapper = new THREE.MeshNormalMaterial({color: 0x00ff00});
var words = new THREE.Mesh(shape, wrapper);
scene.add(words);

// Now, show what the camera sees on the screen:
renderer.render(scene, camera);

额外的 JS

<script src="http://gamingJS.com/Three.js"></script>
<script src="http://gamingJS.com/ChromeFixes.js"></script>
<script src="http://mrdoob.github.com/three.js/examples/fonts/helvetiker_regular.typeface.js"></script>