Three.js入门学习笔记12:模型沿着任意轨迹线运动

参考学习
http://www.yanhuangxueyuan.com/doc/Three.js/curveRun.html
http://www.yanhuangxueyuan.com/doc/three.js/ringrun.html

一个例子:立方体轨迹运动


// 创建一个模型,用于沿着三维曲线运动
var box = new THREE.BoxGeometry(5, 5, 5);
var material = new THREE.MeshLambertMaterial({
     
  color: 0x0000ff
}); //材质对象
var mesh = new THREE.Mesh(box, material);
scene.add(mesh);
mesh.position.set(-10, -50, -50)

// 通过类CatmullRomCurve3创建一个3D样条曲线
var curve = new THREE.CatmullRomCurve3([
  new THREE.Vector3(-10, -50, -50),
  new THREE.Vector3(10, 0, 0),
  new THREE.Vector3(8, 50, 50),
  new THREE.Vector3(-5, 0, 100)
]);
// 样条曲线均匀分割100分,返回51个顶点坐标
var points = curve.getPoints(100);
console.log('points', points);//控制台查看返回的顶点坐标
var geometry = new THREE.Geometry();
// 把从曲线轨迹上获得的顶点坐标赋值给几何体
geometry.vertices = points
var material = new THREE.LineBasicMaterial({
     
  color: 0x4488ff
});
var line = new THREE.Line(geometry, material);
scene.add(line)


// 通过Threejs的帧动画相关API播放网格模型沿着曲线做动画运动

// 声明一个数组用于存储时间序列
let arr = []
for (let i = 0; i < 101; i++) {
     
  arr.push(i)
}
// 生成一个时间序列
var times = new Float32Array(arr);

var posArr = []
points.forEach(elem => {
     
  posArr.push(elem.x, elem.y, elem.z)
});
// 创建一个和时间序列相对应的位置坐标系列
var values = new Float32Array(posArr);
// 创建一个帧动画的关键帧数据,曲线上的位置序列对应一个时间序列
var posTrack = new THREE.KeyframeTrack('.position', times, values);
let duration = 101;
let clip = new THREE.AnimationClip("default", duration, [posTrack]);
var mixer = new THREE.AnimationMixer(mesh);
let AnimationAction = mixer.clipAction(clip);
AnimationAction.timeScale = 20;
AnimationAction.play();


var clock = new THREE.Clock();//声明一个时钟对象
function render() {
     
  renderer.render(scene, camera);
  requestAnimationFrame(render);
  // 更新帧动画的时间
  mixer.update(clock.getDelta());
}
render();

一个完整例子

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>3D</title>
        <meta charset="utf-8">
        <!-- 自适应 -->
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
* {
     
    margin: 0;
    padding: 0;
}
    
</style>
    </head>
<body>

    <script src="js/three.js"></script>
    <script type="text/javascript" src="js/OrbitControls.js"></script>
    <script>
        	var stats, light;
			var camera, scene, raycaster, renderer;

			var mouse = new THREE.Vector2(), INTERSECTED;//相交的
			var radius = 100, theta = 0;
        
        init();
       
        
        function init() {
     
            
            
             // init scene
            scene = new THREE.Scene();
			scene.background = new THREE.Color( 0xf0f0f0 );
            
             // init camera
           camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
           camera.position.set(15,15,15);
//           camera.lookAt(new THREE.Vector3(0,0,0));
           camera.lookAt( scene.position );
           scene.add(camera);
            

             //light
          	var light = new THREE.DirectionalLight( 0xffffff, 1 );
				light.position.set( 1, 1, 1 ).normalize();//向量属性向量转换为单位向量,方向设置为和原向量相同,长度为1
                light.intensity=1.5;//强度
				scene.add( light );
            
   
            //对象
            
             //把组添加到场景中 
           
  
             //底座
    var loader = new THREE.ObjectLoader(); 
    loader.load("json/untitled5.json", function(objectBottom) {
     
    objectBottom.traverse(function(child) {
     
        if (child instanceof THREE.Mesh) {
     
            child.material.side = THREE.DoubleSide; 
        }
    });
        objectBottom.scale.multiplyScalar(350);//3倍大小 
//        var mesh1 = objectBottom; 
        objectBottom.position.set(0,0,0);
        objectBottom.rotation.x = -Math.PI;//旋转180度
        scene.add(objectBottom);
    }); 
  

    var loaderCar = new THREE.ObjectLoader();
    loaderCar.load("json/che0312.json", function(object2) {
     
    object2.traverse(function(child) {
     
        if (child instanceof THREE.Mesh) {
     
            child.material.side = THREE.DoubleSide; 
        }
    });
        object2.scale.multiplyScalar(55); 
//      var mesh2 = object2; 
        object2.position.set(4.8,1.3,-3);
//        object2.rotation.x = -Math.PI;//旋转180度
        scene.add(object2);
    }); 
    
        
   //机床5000 网页添加材质
    var loaderTool = new THREE.ObjectLoader();   
    loaderTool.load("json/tool_new.json", function(object3) {
     
    object3.traverse(function(child) {
     
        if (child instanceof THREE.Mesh) {
     
          child.material = new THREE.MeshLambertMaterial({
     
                color: 0xffffff,
                side: THREE.DoubleSide
            });
        }
    });
        object3.scale.multiplyScalar(60);//3倍大小 
//        var mesh3 = object3; 
        object3.position.set(1,3,-2);
        object3.rotation.z = -Math.PI;//旋转180度
        object3.rotation.y = -Math.PI;//旋转180度
        scene.add(object3);
    }); 

 
    //机床8000
    var loaderTool2 = new THREE.ObjectLoader();   
    loaderTool2.load("json/tool_new.json", function(object4) {
     
    object4.traverse(function(child) {
     
        if (child instanceof THREE.Mesh) {
     
          child.material = new THREE.MeshLambertMaterial({
     
                color: 0xffffff,
                side: THREE.DoubleSide
            });
        }
    });
        object4.scale.multiplyScalar(75);//3倍大小 
//        mesh = object4; 
        object4.position.set(0.7,3.3,-6);
        object4.rotation.z = -Math.PI;//旋转180度
        object4.rotation.y = -Math.PI;//旋转180度
        scene.add(object4);
    }); 
    
  
    
     //缓存库

    var loaderC1 = new THREE.ObjectLoader();
        loaderC1.load("json/cfbx3.json", function(obj1) {
     
        obj1.traverse(function(child) {
     
            if (child instanceof THREE.Mesh) {
     
                child.material.side = THREE.DoubleSide;
          
        }
    });
        obj1.scale.multiplyScalar(3);//3倍大小 
        mesh = obj1; 
        obj1.position.set(0,1.3,8.5)
        obj1.rotation.z = -Math.PI;//旋转180度
        scene.add(obj1);
    }); 
    
    
      var loaderC2 = new THREE.ObjectLoader();
        loaderC2.load("json/cfbx3.json", function(obj2) {
     
        obj2.traverse(function(child) {
     
            if (child instanceof THREE.Mesh) {
     
                child.material.side = THREE.DoubleSide;
          
        }
    });
        obj2.scale.multiplyScalar(3);//3倍大小 
        mesh = obj2; 
        obj2.position.set(0,1.3,6)
        obj2.rotation.z = -Math.PI;//旋转180度
        scene.add(obj2);
    }); 
    
     var loaderC3 = new THREE.ObjectLoader();
        loaderC3.load("json/cfbx3.json", function(obj3) {
     
        obj3.traverse(function(child) {
     
            if (child instanceof THREE.Mesh) {
     
                child.material.side = THREE.DoubleSide;
          
        }
    });
        obj3.scale.multiplyScalar(3);//3倍大小 
        mesh = obj3; 
        obj3.position.set(0,1.3,4.5)
        obj3.rotation.z = -Math.PI;//旋转180度
        scene.add(obj3);
    }); 
    
    
  
    
       var loaderC4 = new THREE.ObjectLoader();
        loaderC4.load("json/cfbx3.json", function(obj4) {
     
        obj4.traverse(function(child) {
     
            if (child instanceof THREE.Mesh) {
     
                child.material.side = THREE.DoubleSide;
          
        }
    });
        obj4.scale.multiplyScalar(3);//3倍大小 
        mesh = obj4; 
        obj4.position.set(0,1.3,3)
        obj4.rotation.z = -Math.PI;//旋转180度
        scene.add(obj4);
    }); 
     
     var loaderC5 = new THREE.ObjectLoader();
        loaderC5.load("json/cfbx3.json", function(obj5) {
     
        obj5.traverse(function(child) {
     
            if (child instanceof THREE.Mesh) {
     
                child.material.side = THREE.DoubleSide;
          
        }
    });
        obj5.scale.multiplyScalar(3);//3倍大小 
        mesh = obj5; 
        obj5.position.set(0,1.3,1.5)
        obj5.rotation.z = -Math.PI;//旋转180度
        scene.add(obj5);
    });          
    
            //射线
            raycaster = new THREE.Raycaster();
          /*   var raycaster = new THREE.Raycaster();
             var mouseVector = new THREE.Vector3();*/
            
            
            //renderer
				renderer = new THREE.WebGLRenderer();
				renderer.setSize( window.innerWidth, window.innerHeight );
				document.getElementsByTagName("body")[0].appendChild(renderer.domElement);
            
           //监听
           document.addEventListener( "mousedown", onDocumentMouseDown, false );
           
           //窗口变化
           window.addEventListener( "resize", onWindowResize, false );
            
            
            //插件
    var controls = new THREE.OrbitControls( camera, renderer.domElement );//camera和render的变量和照相机与渲染器设置的变量一致才行

        // 如果使用animate方法时,将此函数删除
        //controls.addEventListener( 'change', render );
        // 使动画循环使用时阻尼或自转 意思是否有惯性
        controls.enableDamping = true;
        //动态阻尼系数 就是鼠标拖拽旋转灵敏度
        //controls.dampingFactor = 0.25;
        //是否可以缩放
        controls.enableZoom = true;
        //是否自动旋转
        controls.autoRotate = true;
        //设置相机距离原点的最远距离
        controls.minDistance  = 1;
        //设置相机距离原点的最远距离
        controls.maxDistance  = 200;
        //是否开启右键拖拽
        controls.enablePan = true; 
            

        }//function结束
        
        //窗口变化
        function onWindowResize() {
     

				camera.aspect = window.innerWidth / window.innerHeight;
//				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}
        
        //坐标转换
       function onDocumentMouseDown( event ) {
     //鼠标事件开始

				event.preventDefault();
               
				mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
				mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
           
           
                 // 通过摄像机和鼠标位置更新射线
	     raycaster.setFromCamera( mouse, camera );

	      // 计算物体和射线的焦点
	     var intersects = raycaster.intersectObjects( scene.children ,true);//射线穿过物体,自动由近到远排序
    
            
        //第一种

	    /*  for ( var i = 0; i < intersects.length; i++ ) {
     

//         intersects[ i ].object.material.color.set( 0xff0000 );
         intersects[ i ].object.traverse(function(child) {
     
        if (child instanceof THREE.Mesh) {
     
            child.material = new THREE.MeshLambertMaterial({
     
                color: 0xffff00,
                side: THREE.DoubleSide
            });
        } 
              
        });

    } */
            
            //第二种
        if ( intersects.length > 0 ) {
     //有物体的时候
         

					if ( INTERSECTED != intersects[ 0 ].object ) {
     //上一次选中不等于当前的选中,就是替换的时候,intersects[ 0 ]就是当前的选中 在最前面的,它是自动排序的
                 

						if ( INTERSECTED ) 
                            if( INTERSECTED.material .length==undefined){
     
                            INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );//上一次选中的要换回原来的材料
                            }

						INTERSECTED = intersects[ 0 ].object;
                       if( INTERSECTED.material .length==undefined){
     
						INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();//把当前的材料保存起来
						INTERSECTED.material.emissive.setHex( 0xff0000 );//换颜色
                    }

					}

				} else {
     //选中空白处的时候
//
					if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );

					INTERSECTED = null;

				}

			}//mousedown鼠标事件结束

        
    
        
        
        //轨迹
           
// 创建一个模型,用于沿着三维曲线运动
var box = new THREE.BoxGeometry(5, 5, 5);
var material = new THREE.MeshLambertMaterial({
     
  color: 0x0000ff
}); //材质对象
var mesh = new THREE.Mesh(box, material);
scene.add(mesh);
mesh.position.set(-10, -50, -50)


// 通过类CatmullRomCurve3创建一个3D样条曲线
var curve = new THREE.CatmullRomCurve3([
  new THREE.Vector3(-10, -50, -50),
  new THREE.Vector3(10, 0, 0),
  new THREE.Vector3(8, 50, 50),
  new THREE.Vector3(-5, 0, 100)
]);
// 样条曲线均匀分割100分,返回51个顶点坐标
var points = curve.getPoints(100);
console.log('points', points);//控制台查看返回的顶点坐标
var geometry = new THREE.Geometry();
// 把从曲线轨迹上获得的顶点坐标赋值给几何体
geometry.vertices = points
var material = new THREE.LineBasicMaterial({
     
  color: 0x4488ff
});
var line = new THREE.Line(geometry, material);
scene.add(line)


// 通过Threejs的帧动画相关API播放网格模型沿着曲线做动画运动

// 声明一个数组用于存储时间序列
let arr = []
for (let i = 0; i < 101; i++) {
     
  arr.push(i)
}
// 生成一个时间序列
var times = new Float32Array(arr);

var posArr = []
points.forEach(elem => {
     
  posArr.push(elem.x, elem.y, elem.z)
});
// 创建一个和时间序列相对应的位置坐标系列
var values = new Float32Array(posArr);
// 创建一个帧动画的关键帧数据,曲线上的位置序列对应一个时间序列
var posTrack = new THREE.KeyframeTrack('.position', times, values);
let duration = 101;
let clip = new THREE.AnimationClip("default", duration, [posTrack]);
var mixer = new THREE.AnimationMixer(mesh);
let AnimationAction = mixer.clipAction(clip);
AnimationAction.timeScale = 20;
AnimationAction.play();

var clock = new THREE.Clock();//声明一个时钟对象
function render() {
     
  renderer.render(scene, camera);
  requestAnimationFrame(render);
  // 更新帧动画的时间
  mixer.update(clock.getDelta());
}
//render(); 
             
        
	function animate() {
     

				requestAnimationFrame( animate );

				render();

			}        
        
     animate();    
  
        

    </script>
</body>
</html>

CatmullRomCurve3 创建3D样条线

一.创建一条直线

点线面学习添加链接描述

1.创建两个点

var p1 = new THREE.Vector3( 0, 0, 0);
var p2 = new THREE.Vector3( 1, 2, 0);

2.将两个点都放入Geometry 中的vertices中

geometry.vertices是一个数组,用于存储点,使用push方法可以把点放入进去,下面放入两个点到geometry.vertices中

var geometry = new THREE.Geometry();
geometry.vertices.push(p1);
geometry.vertices.push(p2);

我们还可以定义颜色

var color1 = new THREE.Color( 0x444444 ),
color2 = new THREE.Color( 0xFF0000 );
//为不同顶点设置不同颜色
geometry.colors.push( color1, color2 );

geometry中colors表示顶点的颜色,必须材质中vertexColors等于THREE.VertexColors 时,颜色才有效,如果vertexColors等于THREE.NoColors时,颜色就没有效果了。那么就会去取材质中color的值,这个很重要,大家一定记住。

3.构造线

var line = new THREE.Line(geometry, material, THREE.LinePieces );
meterial参数为材质,可以选基本的LineBasicMaterial
第一个参数是几何体geometry,里面包含了2个顶点和顶点的颜色。第二个参数是线条的材质,或者是线条的属性,表示线条以哪种方式取色。第三个参数是一组点的连接方式。

我们可以用以下代码来改变线的颜色和透明度,这样如果让物体沿着线运动,想要隐藏线,把线设置为透明就行

var material = new THREE.LineBasicMaterial({
     color:0x000000, opacity:0.2});

这里不透明度的设置不好用

线的位置和旋转

 line.position.x = (i * 50) - 500;
 line.rotation.y = 90 * Math.PI / 180;

学习参考
https://blog.csdn.net/qq_36311091/article/details/81016057
LineBasicMaterial( parameters )

Parameters是一个定义材质外观的对象,它包含多个属性来定义材质,这些属性是:

Color:线条的颜色,用16进制来表示,默认的颜色是白色。

Linewidth:线条的宽度,默认时候1个单位宽度。

Linecap:线条两端的外观,默认是圆角端点,当线条较粗的时候才看得出效果,如果线条很细,那么你几乎看不出效果了。

Linejoin:两个线条的连接点处的外观,默认是“round”,表示圆角。

VertexColors:定义线条材质是否使用顶点颜色,这是一个boolean值。意思是,线条各部分的颜色会根据顶点的颜色来进行插值。

Fog:定义材质的颜色是否受全局雾效的影响。

我们这里使用了顶点颜色vertexColors: THREE.VertexColors,就是线条的颜色会根据顶点来计算。

var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } );

4.把线加入场景

scene.add(line);


**建立网格坐标系**
[参考内容](https://blog.csdn.net/soraduo/article/details/97920230?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522158468316619724846408253%2522%252C%2522scm%2522%253A%252220140713.130056874..%2522%257D&request_id=158468316619724846408253&biz_id=0&utm_source=distribute.pc_search_result.none-task)

```javascript
<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>网格图</title>
    <script src="js/Three.js"></script>
    <!--引入three.js支持-->
    <style type="text/css">
        div#canvas-frame{
     
            border: none;
            cursor: pointer;
            width: 100%;
            height: 600px;
            background-color: #EEEEEE;
        }
    </style>
    <script>
        var renderer;
        function initThree() {
     
            /**
             * 获取canvas-frame的宽度
             * @type {HTMLElement}
             */
            width=document.getElementById('canvas-frame').clientWidth;
            /**
             * 获取高度
             */
            height=document.getElementById('canvas-frame').clientHeight;
            /**
             * 初始化渲染器,设置参数为抗锯齿
             * @type {WebGLRenderer}
             */
            renderer=new THREE.WebGLRenderer({
     antialias:true});
            /**
             * 设置渲染的大小
             */
            renderer.setSize(width,height);
            /**
             * 对所有的子节点都进行渲染
             */
            document.getElementById('canvas-frame').appendChild(renderer.domElement);
            /**
             * 设置透明度
             */
            renderer.setClearColor(0xFFFFFF,1.0);
        }
        var camera;
        /**
         * 相机设置
         */
        function  initCamera() {
     
            camera=new THREE.PerspectiveCamera(45,width/height,1,10000);
            camera.position.x=0;
            camera.position.y=1000;
            camera.position.z=0;
            camera.up.x=0;
            camera.up.y=0;
            camera.up.z=1;
            camera.lookAt(
                {
     
                    x:0,
                    y:0,
                    z:0
                }
            );

        }

        /**
         * 设置场景
         */
        var scene;
        function initScene() {
     
            scene=new THREE.Scene();

        }

        /**
         * 设置光线
         */
        var light;
        function  initLight() {
     
            light=new THREE.DirectionalLight(0xFF0000,1.0,0);
            light.position.set(100,100,200);
            scene.add(light);

        }
        var cube;
        function initObject() {
     
            var geometry=new THREE.Geometry();
            geometry.vertices.push(new THREE.Vector3(-500,0,0));
            geometry.vertices.push(new THREE.Vector3(500,0,0));
            for(var i=0;i<=20;i++) {
     
                var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({
     color: 0x000000, opacity: 0.2}))
                line.position.z = (i * 50) - 500;
                scene.add(line);
                var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({
     color: 0x000000, opacity: 0.2}));
                line.position.x = (i * 50) - 500;
                line.rotation.y = 90 * Math.PI / 180;
                scene.add(line);
            }
        }

        function threeStart() {
     
            initThree();
            initCamera();
            initScene();
            initLight();
            initObject();
            renderer.clear();
            renderer.render(scene, camera);

        }


    </script>
</head>
<body οnlοad="threeStart()">
<div id="canvas-frame">

</div>
</body>
</html>

二.绘制弧线

绘制弧线

/Create a closed wavey loop
var curve = new THREE.CatmullRomCurve3( [
	new THREE.Vector3( -10, 0, 10 ),
	new THREE.Vector3( -5, 5, 5 ),
	new THREE.Vector3( 0, 0, 0 ),
	new THREE.Vector3( 5, -5, 5 ),
	new THREE.Vector3( 10, 0, 10 )
] );
 
var points = curve.getPoints( 50 );
var geometry = new THREE.BufferGeometry().setFromPoints( points );
 
var material = new THREE.LineBasicMaterial( {
      color : 0xff0000 } );
 
// Create the final object to add to the scene
var curveObject = new THREE.Line( geometry, material );

THREE.CatmullRomCurve3().getPoints(divisions):该方法返回一个Vector3数组,把曲线分为divisions段,返回每个点的坐标数组。上面的例子就是通过getPoint(50)返回曲线上
50等分点的坐标,然后通过这些坐标构建一条曲线。
THREE.CatmullRomCurve3().getPoint(t):t是0到1之间的数值,返回一个坐标值
THREE.CatmullRomCurve3().getPointAt(u):在曲线的相对位置,根据弧长返回坐标值
THREE.CatmullRomCurve3().getSpacedPoints(length):
THREE.CatmullRomCurve3().getLength():返回曲线的长度
THREE.CatmullRomCurve3().getLengths(divisions):返回累计段的长度列表

让光源沿着弧线运动

1.新建一条弧线

参考学习
http://www.webgl3d.cn/threejs/docs/#api/zh/extras/core/Curve
创建弧线

//创建曲线
var curve = new THREE.CatmullRomCurve3([
    new THREE.Vector3(-10, 10, 10),
    new THREE.Vector3(-5, 5, 5),
    new THREE.Vector3(0, 0, 0),
    new THREE.Vector3(5, -5, 5),
    new THREE.Vector3(10, 0, 10) 
]);

//创建光源
var pointLight = new PointLight(0xff0000, 1, 100, 1);
pointLight.name = 'pointLight';

//获取弧线上面的点,然光源沿着这些点运动。
var pos = 0;
function move(){
     
    light = scene.getObjectByName('pointLight');
    if(pos < 1){
     
        light.position = curve.getPointAt(pos);//曲线的相对位置,根据弧长返回值,范围在0-1
        pos += 0.001
    }else{
     
        pos = 0;
    }
}

你可能感兴趣的:(Three.js,webgl,javascript,前端)