参考学习
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;
}
}
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
