Question

我在使用Page创建的路径后面有一个简单的框。

我希望所有的曲线/边缘都更清晰。但我无法想象如何实现这一目标。我也不确定我是否使用正确的曲线来制作路径。

＆＃13;

CatmullRomCurve3

＆＃13;

Answer 1

似乎设置路径type = 'catmullrom'并设置tension=0.1解决了问题。

<script src="https://ajax.googleapis.com/ajax/libs/threejs/r76/three.min.js"></script>

<header>
	<style>
		body canvas{
			width: 100%,
			height: 100%;
			margin:0;
			padding:0;
		}
	</style>
</header>

<body>
</body>

<script>
var renderer, camera, scene, controls, box, path, speed = 0, 
	path_progress = 0, 
	axis = new THREE.Vector3(),
	tangent = new THREE.Vector3(),
	up = new THREE.Vector3(1, 0, 0);

function initRenderer(){
	renderer = new THREE.WebGLRenderer({antialias:true});
	renderer.setSize( window.innerWidth, window.innerHeight);
	document.body.appendChild(renderer.domElement);
	renderer.setClearColor(0x264d73, 1);
}

function initScene(){
	scene = new THREE.Scene();
}

function initCamera(){
	camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 10000);
	camera.position.set(0, 40, 40);
	camera.lookAt(scene.position);
	scene.add(camera);
	
	//controls = new THREE.OrbitControls( camera , renderer.domElement );
}

function initLights(){
	var aLight = new THREE.AmbientLight(0xD0D0D0, 0.5);
	scene.add(aLight);
}


////// Initializers ////////////////////////

function add_path(){
	path = new THREE.CatmullRomCurve3( [
		new THREE.Vector3( 3.4000015258789062, 0, 3.4000015258789062 ),
		new THREE.Vector3( 10.600006103515625, 0, 3.4000015258789062 ),
		new THREE.Vector3( 10.600006103515625, 0, 10.600006103515625 ),
		new THREE.Vector3( 3.4000015258789062, 0, 10.600006103515625 )
	]);

	path.closed = true;
  	path.type = "catmullrom";
	path.tension = 0.1;
	
	speed =  0.4 / path.getLength();
	
	var material = new THREE.LineBasicMaterial({
        color: 0xff00f0,
    });
	var geometry = new THREE.Geometry();
    var splinePoints = path.getPoints(20);
	for (var i = 0; i < splinePoints.length; i++) {
        geometry.vertices.push(splinePoints[i]);
    }
	var line = new THREE.Line(geometry, material);
    scene.add(line);
	
	add_box(splinePoints[0]);
}


function add_box( pos ){
	var geometry = new THREE.BoxGeometry( 1, 1, 1 );
	
	var materials = [
		new THREE.MeshBasicMaterial({
			color: 0x80bfff,
		}),
		new THREE.MeshLambertMaterial({
			color: 0x80bfff
		}),
		new THREE.MeshLambertMaterial({
			color: 0x001a33
		}),
		new THREE.MeshLambertMaterial({
			color: 0x80bfff
		}),
		new THREE.MeshLambertMaterial({
			color: 0x80bfff
		}),
		new THREE.MeshLambertMaterial( {
			color: 0x80bfff
		})
	];
	
	var material = new THREE.MeshFaceMaterial( materials );
	box = new THREE.Mesh( geometry, material );
	
	box.scale.set( 1, 1, 1 );
	box.position.copy( pos ); //// x,y,z //// 
	box.rotation.set( 0 , 0 , 0 ); 
	
	scene.add( box );
	
	camera.position.copy( box.position )
	camera.position.x += 20;
	camera.position.y +=  10;
	camera.lookAt(box.position);
	
	setInterval( function(){
		follow_path();
	}, 100);
}

function follow_path(){
	if( path !== null  ){
		if ( path_progress <= 1) {
			camera.lookAt(box.position);
			var pos = this.path.getPointAt( this.path_progress );
			box.position.copy( pos );
			tangent = this.path.getTangentAt( this.path_progress ).normalize();
			axis.crossVectors( this.up, this.tangent).normalize();
			var radians = Math.acos( this.up.dot(this.tangent) );
			box.quaternion.setFromAxisAngle( this.axis, radians );
			path_progress += speed;
		}else{
			path_progress = 0;
		}
	}
}


///// Mouse events ////////

///// Main /////////
function main(){
	//console.log(" Initializing: ");
	initRenderer(window.innerWidth, window.innerHeight );
	initScene();
	initCamera(window.innerWidth, window.innerHeight );
	initLights();
	add_path();
	animate();
}

function animate(){
	window.requestAnimationFrame( animate );
	render_all();
}

function render_all(){
	renderer.render(scene, camera);
}

main();
</script>

修改路径中的曲线弧

1 个答案: