ThreeJS-3D教学三:平移缩放+物体沿轨迹运动

这篇具有很好参考价值的文章主要介绍了ThreeJS-3D教学三:平移缩放+物体沿轨迹运动。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

我们在项目中会有一些这样的需求,我们可视化一个场景,需要俯视、平移、缩放,方便观察场景中的数据或者模型,之所以把这个案例拿出来
1、这是个很实用的需求,我相信很多人会用到
2、我自己认为在实际案例中我们可以学习相关知识点更易吸收些
为了丰富本篇文章知识点,我还加入了一个物体沿轨迹运动的场景,下面代码会介绍到,回到之前的问题three中可以利用对 OrbitControls 的设置很轻松的实现相关场景,代码如下:

controls = new OrbitControls( camera, renderer.domElement );
  // 移动端控制平移 缩放
  // controls.touches = {
  //   ONE: THREE.TOUCH.PAN,
  //   TWO: THREE.TOUCH.DOLLY_PAN
  // };
  // PC 左平移,右旋转 滚轮放大缩小   默认是右平移
  controls.mouseButtons = {
    LEFT: THREE.MOUSE.PAN,
    MIDDLE: THREE.MOUSE.DOLLY,
    RIGHT: THREE.MOUSE.ROTATE
  };
  // 设置最大最小视距
  controls.minDistance = 20;
  controls.maxDistance = 1000;
  controls.autoRotate = false;
  controls.enableRotate = false;
  controls.enablePan = true;

需要注意的是移动端和PC是不同的配置,minDistance和maxDistance按实际需求设置即可,到这一步只是对controls的操作,已经有能力实现效果了,但是camera的设置也是不可或缺的,即camera必须是俯视的

先上下整体效果图
threejs 模型平滑移动,three,3d,javascript,前端
看下代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body {
      width: 100%;
      height: 100%;
    }
    * {
      margin: 0;
      padding: 0;
    }
    .label {
      font-size: 20px;
      color: #000;
      font-weight: 700;
    }
  </style>
</head>
<body>
<div id="container"></div>
<script type="importmap">
  {
    "imports": {
      "three": "../three-155/build/three.module.js",
      "three/addons/": "../three-155/examples/jsm/"
    }
  }
</script>
<script type="module">
import * as THREE from 'three';
import Stats from 'three/addons/libs/stats.module.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { CSS2DRenderer, CSS2DObject } from 'three/addons/renderers/CSS2DRenderer.js';
let stats, labelRenderer, curve, movingObjects;
let camera, scene, renderer, mesBox, target, controls;
const group = new THREE.Group();
let progress = 0; // 物体运动时在运动路径的初始位置,范围0~1
const velocity = 0.0005; // 影响运动速率的一个值,范围0~1,需要和渲染频率结合计算才能得到真正的速率
let widthImg = 200;
let heightImg = 200;
init();
initHelp();
initLight();
axesHelperWord();
animate();
// 添加一个物体
mesBox = addGeometries();
// 添加平面
addPlane();
// 添加路径
makeCurve();
// 添加一个运动的物体
movingObjects = addMovingObjects();


window.addEventListener('mousemove', mousemoveFun);

function addPlane() {
  // 创建一个平面 PlaneGeometry(width, height, widthSegments, heightSegments)
  const planeGeometry = new THREE.PlaneGeometry(widthImg, heightImg, 1, 1);
  // 创建 Lambert 材质:会对场景中的光源作出反应,但表现为暗淡,而不光亮。
  const planeMaterial = new THREE.MeshLambertMaterial({
    color: 0xffffff
  });
  const plane = new THREE.Mesh(planeGeometry, planeMaterial);
  // 以自身中心为旋转轴,绕 x 轴顺时针旋转 45 度
  plane.rotation.x = -0.5 * Math.PI;
  plane.position.set(0, -4, 0);
  scene.add(plane);
}

function addGeometries() {
  let img = new THREE.TextureLoader().load('../materials/img/view4.jpg');
  img.repeat.x = img.repeat.y = 5;
  const geometry = new THREE.BoxGeometry( 10, 10, 10 );
  let material = new THREE.MeshPhongMaterial({
    map: img,
    flatShading: true,
    side: THREE.DoubleSide,
    transparent: 1
  });

  const mesh = new THREE.Mesh( geometry, material );
  mesh.position.x = 0;
  mesh.position.y = 0;
  mesh.position.z = -20;
  scene.add( mesh );
  return mesh;
}

function addMovingObjects() {
  let img = new THREE.TextureLoader().load('../materials/img/view3.jpg');
  const geometry = new THREE.BoxGeometry( 10, 10, 10 );
  const material = new THREE.MeshPhongMaterial({
    map: img,
    flatShading: true,
    side: THREE.DoubleSide,
    transparent: 1
  });
  const mesh = new THREE.Mesh( geometry, material );
  scene.add( mesh );
  return mesh;
}

function makeCurve() {
  // 创建一个环形路径
  curve = new THREE.CatmullRomCurve3([
    new THREE.Vector3(80, 0, 80),
    new THREE.Vector3(80, 0, -80),
    new THREE.Vector3(-80, 0, -80),
    new THREE.Vector3(-80, 0, 80)
  ]);
  curve.curveType = "catmullrom";
  curve.closed = true;//设置是否闭环
  curve.tension = 0; //设置线的张力,0为无弧度折线

  // 为曲线添加材质在场景中显示出来,不显示也不会影响运动轨迹,相当于一个Helper
  const points = curve.getPoints(20);
  const geometry = new THREE.BufferGeometry().setFromPoints(points);
  const material = new THREE.LineBasicMaterial({
    color: '#f00',
    linewidth: 1
  });

  // Create the final object to add to the scene
  const curveObject = new THREE.Line(geometry, material);
  curveObject.position.y = 1;
  curveObject.visible = false;
  scene.add(curveObject);
}

function mousemoveFun() {
  let width = widthImg;
  let height = heightImg;
  let newPo;
  let newPoHeight;

  const prevPos = camera.position.clone();

  if (camera.position['x'] > width / 2) {
    newPo = width / 2 - 0.01;
    camera.position.set(newPo, prevPos.y, prevPos.z);
    controls.target = new THREE.Vector3(newPo, 0, prevPos.z);
    controls.enablePan = false;
  } else if (camera.position['x'] < -width / 2) {
    newPo = -width / 2 + 0.01;
    camera.position.set(newPo, prevPos.y, prevPos.z);
    controls.target = new THREE.Vector3(newPo, 0, prevPos.z);
    controls.enablePan = false;
  } else if (camera.position['z'] > height / 2) {
    // 因为我们的坐标系 y轴在上 所以平移时 height 即是 z
    newPoHeight = height / 2 - 0.01;
    camera.position.set(prevPos.x, prevPos.y, newPoHeight);
    controls.target = new THREE.Vector3(prevPos.x, 0, newPoHeight);
    controls.enablePan = false;
  } else if (camera.position['z'] < -height / 2) {
    newPoHeight = -height / 2 + 0.01;
    camera.position.set(prevPos.x, prevPos.y, newPoHeight);
    controls.target = new THREE.Vector3(prevPos.x, 0, newPoHeight);
    controls.enablePan = false;
  } else {
    controls.enablePan = true;
  }
}

function init() {

  camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 10, 2000 );
  camera.up.set(0, 1, 0);
  camera.position.set(0, 100, 0);
  camera.lookAt(0, 0, 0);

  scene = new THREE.Scene();
  // scene.background = new THREE.Color( '#ccc' );

  renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );

  labelRenderer = new CSS2DRenderer();
  labelRenderer.setSize( window.innerWidth, window.innerHeight );
  labelRenderer.domElement.style.position = 'absolute';
  labelRenderer.domElement.style.top = '0px';
  labelRenderer.domElement.style.pointerEvents = 'none';
  document.getElementById( 'container' ).appendChild( labelRenderer.domElement );

  controls = new OrbitControls( camera, renderer.domElement );
  // 移动端控制平移 缩放
  // controls.touches = {
  //   ONE: THREE.TOUCH.PAN,
  //   TWO: THREE.TOUCH.DOLLY_PAN
  // };
  // PC 左平移,右旋转 滚轮放大缩小   默认是右平移
  controls.mouseButtons = {
    LEFT: THREE.MOUSE.PAN,
    MIDDLE: THREE.MOUSE.DOLLY,
    RIGHT: THREE.MOUSE.ROTATE
  };
  // 设置最大最小视距
  controls.minDistance = 20;
  controls.maxDistance = 1000;
  controls.autoRotate = false;
  controls.enableRotate = false;
  controls.enablePan = true;

  window.addEventListener( 'resize', onWindowResize );

  stats = new Stats();
  stats.setMode(1); // 0: fps, 1: ms
  document.body.appendChild( stats.dom );

  scene.add( group );
}

function initLight() {
  let spotLight;
  spotLight = new THREE.SpotLight( 0xffffff, 500 );
  spotLight.name = 'Spot Light';
  spotLight.angle = Math.PI / 5;
  spotLight.penumbra = 0.1;
  spotLight.position.set( 0, 5, 10 );
  spotLight.castShadow = true;
  spotLight.shadow.camera.near = 2;
  spotLight.shadow.camera.far = 100;
  spotLight.shadow.mapSize.width = 1024;
  spotLight.shadow.mapSize.height = 1024;
  scene.add( spotLight );

  const AmbientLight = new THREE.AmbientLight(0xCCCCCC, 2);
  scene.add( AmbientLight );
}

function initHelp() {
  // const size = 100;
  // const divisions = 5;
  // const gridHelper = new THREE.GridHelper( size, divisions );
  // scene.add( gridHelper );

  // The X axis is red. The Y axis is green. The Z axis is blue.
  const axesHelper = new THREE.AxesHelper( 100 );
  scene.add( axesHelper );
}

function axesHelperWord() {
  let xP = addWord('X轴');
  let yP = addWord('Y轴');
  let zP = addWord('Z轴');
  xP.position.set(50, 0, 0);
  yP.position.set(0, 50, 0);
  zP.position.set(0, 0, 50);
}

function addWord(word) {
  let name = `<span>${word}</span>`;
  let moonDiv = document.createElement( 'div' );
  moonDiv.className = 'label';
  // moonDiv.textContent = 'Moon';
  // moonDiv.style.marginTop = '-1em';
  moonDiv.innerHTML = name;
  const label = new CSS2DObject( moonDiv );
  group.add( label );
  return label;
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize( window.innerWidth, window.innerHeight );
}

function animate() {
  requestAnimationFrame( animate );

  // mesh绕自身中心的 y 轴自转
  if (mesBox) {
    mesBox.rotation.y += 0.01;
  }

  if (curve && movingObjects) {
    if (progress <= 1 - velocity) {
      // 获取样条曲线指定点坐标
      const point = curve.getPointAt(progress);
      movingObjects.position.set(point.x, point.y, point.z);
      progress += velocity;
    } else {
      progress = 0;
    }
  }

  stats.update();
  controls.update();
  labelRenderer.render( scene, camera );
  renderer.render( scene, camera );
}
</script>
</body>
</html>

这里是全部代码,可以看出 three用的是 155版本,大家从官网上下载到本地改下路径即可。图片url你可以换成本地图片,项目就能跑起来了。

中间立方体在做了一个环绕自身y轴旋转,外面的立方体通过获取curve上的坐标点,沿着curve的轨迹运动。

这里有一些新的知识点:

new THREE.TextureLoader().load(‘…/materials/img/view3.jpg’);
TextureLoader是three加载图片的方法,我们还可以这样用
let loader = new THREE.TextureLoader();
loader.load(‘url’, (img) => {
// img 这个img就是加载完成后的图片
});

这时就一个疑问了,同步还是异步,我们来看源码
threejs 模型平滑移动,three,3d,javascript,前端
其实还是异步,拿到图片后我们发现material有一个map参数,可以接收图片作为材质,这样material就可以做的很丰富了,side是指物体的正反两面,THREE.DoubleSide即两面都要渲染,如果我们只看外面,不要设置这里,这样也能节省一些性能

 let material = new THREE.MeshPhongMaterial({
    map: img,
    flatShading: true,
    side: THREE.DoubleSide,
    transparent: 1
  });

最后一个知识点,即物体沿着轨迹运动,我们把这一行代码
curveObject.visible = false; 改为 true 大家就可以看到这个轨迹了。
逻辑代码中已经写的很详细了,大家也可以思考下还有哪些方法可以作为curve使用。
如果感觉有用,点个赞不过分吧!!!文章来源地址https://www.toymoban.com/news/detail-771650.html

到了这里,关于ThreeJS-3D教学三:平移缩放+物体沿轨迹运动的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ThreeJS-3D教学一:基础场景创建

    Three.js 是一个开源的 JS 3D 图形库,用于创建和展示高性能、交互式的 3D 图形场景。它建立在 WebGL 技术之上,并提供了丰富的功能和工具,使开发者可以轻松地构建令人惊叹的 3D 可视化效果。 Three.js 提供了一套完整的工具和 API,用于创建和管理 3D 场景、几何体、纹理、光照

    2024年02月07日
    浏览(54)
  • ThreeJS-3D教学十-有宽度的line

    webgl中线是没有宽度的,现实的应用中一般做法都是将线拓宽成面来绘制。默认threejs的线宽是无法调节的,需要用有厚度的线 THREE.Line2。 先看效果图: 看下代码:

    2024年02月07日
    浏览(39)
  • ThreeJS-3D教学八-OBJLoader模型加载+动画

    先看效果图: 本篇给大家介绍下模型加载的知识,用到了OBJLoader对应的模型,为了增加趣味性,花了些时间,利用new THREE.Points获取到模型上的点,做了一个动画效果,其实就是操作 Y轴上的点,先降低上0,然后再还原,代码如下: 如果有同学从我第一篇文章开始学到现在,

    2024年04月24日
    浏览(40)
  • ThreeJS-3D教学十一:屏幕坐标和世界坐标转换

    直接复制上面的代码,将three资源路径修改后,启动即可看到效果 上面是代码实现,以下我们看下一些理论知识点: 坐标系之间的转换关系大致为: 因此坐标转换过程就变成了: 原本世界坐标转换到观察空间坐标需要乘上视图矩阵 CameraMatrixWorldInverse(ViewMatrix) 随后,观察空

    2024年01月17日
    浏览(47)
  • Unity3D根据物体运动画出实体轨迹线

    在Unity3D根据物体运动画出实体轨迹线 在Inspector里面添加组件LineRender,线条圆滑设置如下, 颜色可以新建材质直接拖上该物体上就行。 添加脚本LineMark 将上面的Line放在OBS里面,对应需要画出的物体直接拖入右侧的 — 小技巧:想画出对应阶段的轨迹曲线可以通过启用和不启

    2024年02月12日
    浏览(64)
  • ThreeJS-缩放、旋转(四)

    代码: template   div id=\\\"three_div\\\"   /div /template   script import * as THREE from \\\"three\\\"; import {OrbitControls } from \\\'three/examples/jsm/controls/OrbitControls\\\' export default {   name: \\\"HOME\\\",   components: {     // vueQr,     // glHome,   },   data() {     return {     };   },   mounted() {     //使用控制器控制3D拖动旋转

    2024年02月08日
    浏览(30)
  • threejs(6)-操控物体实现家居编辑器

    2024年02月07日
    浏览(134)
  • Threejs入门之三:让物体跟随鼠标动起来

    上一节我们创建了一个三维的立方体,将其放在了浏览器窗口中,但是目前来讲它只是一个静态的图片,我们并不能通过鼠标控制其旋转、缩放和移动,这一节我们来实现用鼠标控制物体的运动。 首先我们要了解一个概念,在三维场景中,我们要控制物体旋转,实际上不是物

    2024年02月11日
    浏览(56)
  • Threejs开发3D展馆 | 大帅老猿threejs特训

    本文将介绍如果使用Threejs开发制作一个3D展馆,效果如图:  首先,我们需要一个展馆模型。我是通过Blender做出来的,在Blender中将模型导出为glb格式。 接下来,我们通过代码将模型加载到网页中。 在3D图形开发中,最基本的概念就是场景、相机和光源。这三个是构成3D世界

    2024年02月11日
    浏览(38)
  • Threejs 3D模型居中

    项目开发中难免会遇到客户导出的3D模型中心点并不在坐标中心,这时候直接渲染这个模型会发现模型位置会有所偏移 引用:Three.js模型居中

    2024年02月13日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包