0
CatmullRomCurve3を使って作成したパスのあとに単純なボックスがあります。パス内の曲線の円弧を変更する
私はすべてのカーブ/エッジをよりシャープにしたいと思います。しかし、私はこれを達成する方法を理解することができませんでした。私はパスを作成するための曲線の適切なタイプを使用している場合もまた、わからない。
<script src="https://ajax.googleapis.com/ajax/libs/threejs/r76/three.min.js"></script>
<header>
\t <style>
\t \t body canvas{
\t \t \t width: 100%,
\t \t \t height: 100%;
\t \t \t margin:0;
\t \t \t padding:0;
\t \t }
\t </style>
</header>
<body>
</body>
<script>
var renderer, camera, scene, controls, box, path, speed = 0,
\t path_progress = 0,
\t axis = new THREE.Vector3(),
\t tangent = new THREE.Vector3(),
\t up = new THREE.Vector3(1, 0, 0);
function initRenderer(){
\t renderer = new THREE.WebGLRenderer({antialias:true});
\t renderer.setSize(window.innerWidth, window.innerHeight);
\t document.body.appendChild(renderer.domElement);
\t renderer.setClearColor(0x264d73, 1);
}
function initScene(){
\t scene = new THREE.Scene();
}
function initCamera(){
\t camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 10000);
\t camera.position.set(0, 40, 40);
\t camera.lookAt(scene.position);
\t scene.add(camera);
\t
\t //controls = new THREE.OrbitControls(camera , renderer.domElement);
}
function initLights(){
\t var aLight = new THREE.AmbientLight(0xD0D0D0, 0.5);
\t scene.add(aLight);
}
////// Initializers ////////////////////////
function add_path(){
\t path = new THREE.CatmullRomCurve3([
\t \t new THREE.Vector3(3.4000015258789062, 0, 3.4000015258789062),
\t \t new THREE.Vector3(10.600006103515625, 0, 3.4000015258789062),
\t \t new THREE.Vector3(10.600006103515625, 0, 10.600006103515625),
\t \t new THREE.Vector3(3.4000015258789062, 0, 10.600006103515625)
\t ]);
\t path.closed = true;
\t
\t speed = 0.4/path.getLength();
\t
\t var material = new THREE.LineBasicMaterial({
color: 0xff00f0,
});
\t var geometry = new THREE.Geometry();
var splinePoints = path.getPoints(20);
\t for (var i = 0; i < splinePoints.length; i++) {
geometry.vertices.push(splinePoints[i]);
}
\t var line = new THREE.Line(geometry, material);
scene.add(line);
\t
\t add_box(splinePoints[0]);
}
function add_box(pos){
\t var geometry = new THREE.BoxGeometry(1, 1, 1);
\t
\t var materials = [
\t \t new THREE.MeshBasicMaterial({
\t \t \t color: 0x80bfff,
\t \t }),
\t \t new THREE.MeshLambertMaterial({
\t \t \t color: 0x80bfff
\t \t }),
\t \t new THREE.MeshLambertMaterial({
\t \t \t color: 0x001a33
\t \t }),
\t \t new THREE.MeshLambertMaterial({
\t \t \t color: 0x80bfff
\t \t }),
\t \t new THREE.MeshLambertMaterial({
\t \t \t color: 0x80bfff
\t \t }),
\t \t new THREE.MeshLambertMaterial({
\t \t \t color: 0x80bfff
\t \t })
\t ];
\t
\t var material = new THREE.MeshFaceMaterial(materials);
\t box = new THREE.Mesh(geometry, material);
\t
\t box.scale.set(1, 1, 1);
\t box.position.copy(pos); //// x,y,z ////
\t box.rotation.set(0 , 0 , 0);
\t
\t scene.add(box);
\t
\t camera.position.copy(box.position)
\t camera.position.x += 20;
\t camera.position.y += 10;
\t camera.lookAt(box.position);
\t
\t setInterval(function(){
\t \t follow_path();
\t }, 100);
}
function follow_path(){
\t if(path !== null ){
\t \t if (path_progress <= 1) {
\t \t \t camera.lookAt(box.position);
\t \t \t var pos = this.path.getPointAt(this.path_progress);
\t \t \t box.position.copy(pos);
\t \t \t tangent = this.path.getTangentAt(this.path_progress).normalize();
\t \t \t axis.crossVectors(this.up, this.tangent).normalize();
\t \t \t var radians = Math.acos(this.up.dot(this.tangent));
\t \t \t box.quaternion.setFromAxisAngle(this.axis, radians);
\t \t \t path_progress += speed;
\t \t }else{
\t \t \t path_progress = 0;
\t \t }
\t }
}
///// Mouse events ////////
///// Main /////////
function main(){
\t //console.log(" Initializing: ");
\t initRenderer(window.innerWidth, window.innerHeight);
\t initScene();
\t initCamera(window.innerWidth, window.innerHeight);
\t initLights();
\t add_path();
\t animate();
}
function animate(){
\t window.requestAnimationFrame(animate);
\t render_all();
}
function render_all(){
\t renderer.render(scene, camera);
}
main();
</script>