如何更改x3dom中3d文本的斜角大小? 现在我有这样的代码
<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>
是否有可用的示例代码?
答案 0 :(得分:1)
看起来没有单独使用X3Dom的斜切文本的任何直接示例。我看到three.js似乎是唯一的webgl解决方案,您可以轻松更改3D文本的斜角。您好像是根据您的最新问题找到了这个。
以下是three.js的其他一些好的资源/示例。
此外,这里有一些JSFiddle示例。这些将更容易阅读/体验。
我在获取JSFiddle设置时遇到了问题。 A fellow programmer was having a similar issue但在他的帮助下我设置了一个有用的例子。这样您就有机会尝试斜角功能。
斜角示例: 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>