three.js做3D场景，旋转动画，往复移动

最新推荐文章于 2024-07-07 11:52:20 发布

汉武大帝·

最新推荐文章于 2024-07-07 11:52:20 发布

阅读量1.7k

点赞数

分类专栏： three.js 文章标签： mesh javascript 云原生

本文链接：https://blog.csdn.net/yinge0508/article/details/122811608

版权

three.js 专栏收录该内容

112 篇文章 12 订阅

订阅专栏

这篇博客展示了如何使用Three.js库创建一个包含立方体和球体的3D场景，并添加点光源和相机。通过JavaScript代码，动态地让球体沿着Z轴移动，并利用OrbitControls实现鼠标控制视角。此外，还展示了轴辅助对象帮助可视化坐标轴。

摘要由CSDN通过智能技术生成

先看效果：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>first 3D</title>
  <script src="./three.js"></script>
  <script src="./OrbitControls.js"></script>
  <style>
    body{ margin:0; padding:0; }
    canvas{ margin:0; padding:0; }
  </style>
</head>
<body>
  <script>
    // 1, 创建场景对象
    var scene = new THREE.Scene();
    // 2, 创建网格模型
    var geometry = new THREE.BoxGeometry(100,100,100); // 创建一个立方体几何对象
    var material = new THREE.MeshLambertMaterial({color: 0x0000ff}); // 创建兰伯特网孔材料对象
    var mesh = new THREE.Mesh(geometry, material); // 创建网格模型对象
    scene.add(mesh);
    // 创建球缓冲几何体
    var sphere_geometry = new THREE.SphereGeometry(50,60,30);
    // MeshBasicMaterial：基础网孔材料构造器，color:0xfff000 设置颜色, wireframe: true 将图形渲染为线框
    var shpere_material = new THREE.MeshBasicMaterial({color:0xfff000, wireframe: true});
    // 创建网格模型对象，参数是球缓冲几何体sphere_geometry、基础网孔材料shpere_material
    var sphere_mesh = new THREE.Mesh(sphere_geometry, shpere_material);
    scene.add(sphere_mesh); // 将网格模型对象添加到场景

    // 3，创建光源对象
    var point = new THREE.PointLight(0xffffff); // 创建点光源对象
    point.position.set(400,200,300); // 设置点光源位置
    scene.add(point);
    // 4, 创建相机对象
    var width = window.innerWidth;
    var height = window.innerHeight;
    var k = width / height; // 窗口宽高比
    var s = 200; // 三维场景显示范围控制系数，系数越大，显示的范围越大
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000); // 创建正交相机
    camera.position.set(200,300,200); // 设置相机位置
    camera.lookAt(scene.position); // 设置相机朝向
    // 5，创建渲染器对象
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height); // 设置渲染区域尺寸
    document.body.appendChild(renderer.domElement); // body元素中插入canvas对象

    var axisHelper = new THREE.AxisHelper( 200 ); // 创建轴辅助对象（坐标轴）
    scene.add( axisHelper ); // 轴辅助对象添加到场景

    var flag = true;
    function render(){
      renderer.render(scene, camera); // 执行渲染操作，场景、相机作为参数
      mesh.rotateY(0.005); // 设置mesh网格模型绕 Y 轴旋转0.005度（以弧度来表示）
      let p = sphere_mesh.position.z; // 获取sphere_mesh网格模型的 z 轴位置
      if(p==150){
        flag = false;
      } else if(p===0){
        flag = true;
      }
      
      if(flag){
        sphere_mesh.translateZ(1); // 沿着Z轴将平移 1 个单位。
      }else {
        sphere_mesh.translateZ(-1);
      }
      // HTML5提供的新API requestAnimationFrame，目前还存在兼容性问题，所以需要对其进行优雅降级处理，这里提供网上的一些比较成熟的解决方案：
      requestAnimationFrame(render);
    }
    render();

    var controls = new THREE.OrbitControls(camera, renderer.domElement); // //创建控件对象,用于鼠标控制网格模型
    // controls.addEventListener('change', render); // 如果调用了requestAnimationFrame则不需要添加监听事件
  </script>
</body>
</html>