Question

我一直在寻找一种使用three.js渲染屋顶形状的方法，并且我正在尝试使用ExtrudeBufferGeometry的“ bevel”属性来实现。在this example中，属性“ bevelOffset”看起来确实在完成我想要的屋顶形状。但是，当我尝试使用脚本时，它并没有改变几何体。因此，我构建了几乎最少的代码来对其进行测试，但该方法也不起作用。我还检查了拼写，但仍然被“忽略” ...怎么了？

var camera, SCENE, renderer, SUN;

init();

function init() {
	camera = new THREE.PerspectiveCamera( 90, window.innerWidth / window.innerHeight, 0.1, 1000 );
	camera.position.set(0,10,-10);

	SCENE = new THREE.Scene();

	SUN = new THREE.DirectionalLight( 0xffffff, 0.6 );
	SCENE.add( SUN );

	SCENE.add( new THREE.AmbientLight( 0xcccccc, 0.8 ) );

	renderer = new THREE.WebGLRenderer( { antialias: true } );
	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize( window.innerWidth, window.innerHeight );

	var shape = new THREE.Shape();
	shape.moveTo( 0,0 );
	shape.lineTo( 0, 5 );
	shape.lineTo( 5, 5 );
	shape.lineTo( 5, 0 );
	shape.lineTo( 0, 0 );
	var extrudeSettings = {steps:1,depth:5,bevelEnabled:true,bevelOffset:1,bevelSize:1,bevelThickness:1,bevelSegments:1};
	var geo = new THREE.ExtrudeBufferGeometry(shape,extrudeSettings)
	var obj = new THREE.Mesh( geo ,[new THREE.MeshLambertMaterial({color:"blue"}),new THREE.MeshLambertMaterial({color:"yellow"})]);
	SCENE.add( obj );

	camera.position.set(obj.position.x-8,10,obj.position.z-10);
	camera.lookAt(obj.position);
	camera.updateProjectionMatrix();
	document.body.appendChild( renderer.domElement );

	SUN.target = obj;

	renderer.render( SCENE, camera );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.min.js"></script>

在此示例中，我为bevelOffset尝试了多个值，但没有任何变化。你能尝试一下吗？

Answer 1

我下载了Three.js的最新版本，并且可以正常工作；我之前应该做过，谢谢！

选项“ bevelOffset”对我的拉伸几何没有影响

1 个答案: