Struggling with paths

Questions
5

Another short option based on three.js examples .

In the Collection of examples from discourse.threejs.org 2021 MotionAlongCurve

2021-05-23 10.18.24
2021-05-23 10.18.24731×365 2.66 KB 

<!DOCTYPE html>
<!-- https://discourse.threejs.org/t/struggling-with-paths/26486/4 -->
<!-- see also https://threejs.org/examples/?q=modi#webgl_modifier_curve -->
	<head>
		<title> MotionAlongCurve </title>
		<meta charset="utf-8" />	 
	</head>
	<body> 	</body>

<script type="module">

// @author hofk

import * as THREE from "../jsm/three.module.128.js";
import { OrbitControls } from "../jsm/OrbitControls.128.js";
import { Flow } from "../jsm/CurveModifier.128.js";

const scene = new THREE.Scene( );
const camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set( 0, 1, 3 );
const renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
new  OrbitControls( camera, renderer.domElement );

const somePoints = [

	new THREE.Vector3(  1,   0, -1 ),
	new THREE.Vector3(  1, 0.6,  1 ),
	new THREE.Vector3( -1,   0,  1 ),
	new THREE.Vector3( -1, 0.2, -1 ),
	
];

const curve = new THREE.CatmullRomCurve3( somePoints );	
curve.closed = true;

const points = curve.getPoints( 60 );
const line = new THREE.LineLoop( new THREE.BufferGeometry( ).setFromPoints( points ), new THREE.LineBasicMaterial( { color: 0xffffaa } ) );
scene.add( line );

const light = new THREE.DirectionalLight( 0xc0c0c0 );
light.position.set( - 8, 12, 10 );
light.intensity = 1.0;
scene.add( light );

const geometry = new THREE.BoxGeometry( 0.2, 0.08, 0.05 );
const material = new THREE.MeshPhongMaterial( { color: 0x99ffff, wireframe: false } );
const objectToCurve = new THREE.Mesh( geometry, material );

const flow = new Flow( objectToCurve ); 
flow.updateCurve( 0, curve );
scene.add( flow.object3D );

animate( );

function animate( ) {

	requestAnimationFrame( animate );
	flow.moveAlongCurve( 0.0006 );
	renderer.render( scene, camera );

}

</script>
</html>
1 Like