Wie ändere ich die Abschrägungsgröße von 3D-Text in x3dom?

Question

Wie ändere ich die Abschrägungsgröße von 3D-Text in x3dom? Jetzt habe ich Code wie dieses

<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> 

Gibt es einen Beispielcode für diese zur Verfügung?

Answer 1

Es scheint, als gäbe es keine direkten Beispiele für das Abfasen von Text mit X3Dom allein. three.js scheint die einzige Webgl-Lösung zu sein, ich sehe, wo Sie leicht die Abschrägung von 3D-Text ändern können. Sie scheinen das anhand Ihrer letzten Fragen gefunden zu haben.

Hier sind einige andere gute Ressourcen/Beispiele für three.js.

• Gute Einführung. Dias: 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

Auch hier sind einige Beispiele JSFiddle. Diese werden viel leichter zu lesen/zu experimentieren sein.

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

---

Ich war mit Fragen eine JSFiddle Setup zu bekommen. A fellow programmer was having a similar issue aber mit seiner Hilfe habe ich ein nützliches Beispiel erstellt. Dadurch können Sie mit der Fasenfunktion experimentieren.

Bevel Beispiel: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); 

Zusätzliche 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>