Three.js实现多个物体以中心位置各自向周围移动

最新推荐文章于 2024-03-22 11:20:24 发布
最新推荐文章于 2024-03-22 11:20:24 发布
阅读量3.6k 收藏 4
点赞数 1
分类专栏： Three.js 文章标签： Three.js 物体移动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26540577/article/details/81448564
版权 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>物体以中心点朝着四方八方移动</title>
    <style>
        body{margin: 0;}
        canvas{width:100%;height: 100%}
    </style>
</head>
<body>
    <script src="js/three.min.js"></script>
    <script>
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);
        var centerPosition;

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth,window.innerHeight);
        document.body.appendChild(renderer.domElement);

        var geometry = new THREE.BoxGeometry(1,1,1);
        var material = new THREE.MeshBasicMaterial({color:0x00ff00});
        var cube1 = new THREE.Mesh(geometry,material);
        var cube2 = cube1.clone();          //物体克隆
        var cube3 = cube1.clone();
        var cube4 = cube1.clone();

        cube1.position.x = 5;
        cube2.position.y = 5;
        cube3.position.z = 5;
        cube3.position.x = 5;
        cube4.position.x = 4;
        cube4.position.y = 4;
        cube4.position.z = 4;
        scene.add(cube1);
        scene.add(cube2);
        scene.add(cube3);
        scene.add(cube4);

        camera.position.z = 50;
        centerPosition = SetCenterPosition();

        //计算每个物体移动的方向，物体位置减去中心位置
        var direction1 = cube1.position.sub(centerPosition);
        var direction2 = cube2.position.sub(centerPosition);
        var direction3 = cube3.position.sub(centerPosition);
        var direction4 = cube4.position.sub(centerPosition);

        var cubeCenter = cube1.clone();
        cubeCenter.position.set(centerPosition.x,centerPosition.y,centerPosition.z);
        console.log("cubeCenter:"+cubeCenter.position.x);
        scene.add(cubeCenter);

        var animate = function()
        {
            requestAnimationFrame(animate);

            BaoZhaUpdate(cube1,direction1);
            BaoZhaUpdate(cube2,direction2);
            BaoZhaUpdate(cube3,direction3);
            BaoZhaUpdate(cube4,direction4);

            renderer.render(scene,camera);
        };

        animate();

        //设置中心点
        function SetCenterPosition()
        {
            var pos=new THREE.Vector3(0,0,0);
            //四个物体位置相加
            pos.add(cube1.position);
            pos.add(cube2.position);
            pos.add(cube3.position);
            pos.add(cube4.position);
            var count = 4;
            pos = pos.divideScalar(count);             //得出平均位置
            console.log("pos:"+pos.x);
            return pos;
        }

        function BaoZhaUpdate(cube,direction)
        {
            //console.log("direction:"+direction.x);
            //设置物体移动
            cube.position.set(cube.position.x+direction.x*0.01,cube.position.y+direction.y*0.01,cube.position.z+direction.z*0.01);
        }
    </script>
</body>
</html>

 

YanisWu
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
【three.js】旋转、缩放、平移几何体
qq_38196449的博客
06-15 195
BufferGeometry通过.scale().rotateX().rotateY()等方法可以对几何体本身进行缩放、平移、旋转,这些方法本质上都是改变几何体的顶点数据。我们先创建一个平面物体，样子是这样的。
threejs让模型移动
迪之的博客
12-08 1515
如果您想要更精细的控制动画，可以使用requestAnimationFrame方法，该方法在每个浏览器重新绘制屏幕时调用一次。您可以使用该方法更新模型的位置或旋转，并使用递归调用实现平滑动画。如果您想要一个更平滑的动画效果，可以使用Tween.js库。这个库可以让您在一段时间内逐步更改模型的位置或旋转。这些是在three.js中实现模型移动的一些常用方法，您可以根据自己的需求进行选择和组合。在three.js中使模型移动的关键是更新模型的位置或旋转。这将在5秒钟内将模型的x位置增加100个单位。
threejs模型顺滑移动
qq_31107521的博客
05-17 305
threejs 动画顺滑
ThreeJS-移动(三)
以爱护甲,爱满枫林。
03-29 2072
/但是requestAnimationFrame的回调函数注册生命只有一次，因此需要循环注册，才能达到一直调用的效果。//使用控制器控制3D拖动旋转OrbitControls。//将webgl渲染的canvas内容添加到body上。//创建轨道控制器，可以拖动,控制的是摄像头。//使用渲染器，通过相机将场景渲染进来。//渲染下一帧的时候就会调用回调函数。//根据几何体和材质创建物体。//控制3D物体移动。//将相机添加到场景。//将物体加入到场景。//添加坐标轴辅助器。//设置渲染器的尺寸。
three.js使用dragControls实现拖动
最新发布
weixin_43666952的博客
03-22 779
js中文文档中是了解到这么一个控制器的，反复设置就是不生效，因为希望是在点击模型底部的一个按钮后让他切换控制器实现单独的平移操作的。本身已经在使用的是轨道控制器，所以初始化的时候又加了这个拖拽控制器，比较发现在初始化的时候，两个的传参是不一样的，常用的轨道控制器职场需要传入相机和渲染元素render.document 就可以，拖拽控制器还需传入要拖拽的模型元素，就是你要拖拽的目标。由于我的是点击模型要整体移动，我就直接是遍历一开始要存储的数组挨个添加到group 直接用上面的步骤实现的拖动。
three.js之让物体动起来方式（二）移动物体
aaronthon的博客
06-05 5760
three.js之让物体动起来方式（二）移动物体 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Three框架</title> <script src="../...
ThreeJS使用Curve曲线让物体沿轨迹运动DEMO
12-09
本示例"ThreeJS使用Curve曲线让物体沿轨迹运动DEMO"探讨了如何利用Three.js中的Curve类来创建自定义的路径，并使物体沿着这条路径移动。 首先，让我们理解什么是Curve。在Three.js中，Curve是定义二维空间中路径的...
Three.js实现浏览器变动时进行自适应的方法
10-19
在Three.js中，创建3D场景时，确保其在不同尺寸的浏览器窗口中自适应是非常重要的。...如果你在实现过程中遇到问题，不要犹豫寻求社区的帮助，或者进一步研究Three.js的官方文档，以获取更多关于自适应渲染的深入信息。
Three.js实现的3D汽车展示平台代码
07-21
《Three.js实现的3D汽车展示平台代码解析》 Three.js是JavaScript库，专为WebGL设计，用于在浏览器中创建交互式的3D图形。它为开发者提供了丰富的API，简化了复杂的3D编程，使得非专业图形程序员也能构建出惊艳的3D...
three.js利用射线Raycaster进行碰撞检测
10-15
// 检测射线与多个物体的相交 var collisionResults = ray.intersectObjects(collideMeshList); // 判断碰撞条件 if (collisionResults.length > 0 && collisionResults[0].distance < directionVector.length...
three.js-线上运动的光效
10-19
在 three.js 中，可以通过调整光源的位置、颜色、强度和类型（如点光源、平行光或聚光灯）来实现不同的光效。动态光效可以增强场景的视觉动态感，例如模拟阳光的移动、闪烁的灯光或激光束等。 文件名 "step5-3" ...
three.js自定义路径漫游
12-27
基于three.js封装的自定义漫游小代码，传入最少两点三维坐标，即可实现飞行漫游。
threejs(二) 移动,相机
Jinming Su
05-22 7876
场景的移动1.改变相机的位置，让物体移动function animation() { //renderer.clear(); camera.position.x =camera.position.x +1; renderer.render(scene, camera); requestAnimationFrame(animation); }2.改变物体自身的位置，让物
threeJs进阶 让模型沿着指定轨迹移动与转向
c_qianxia5040的博客
05-10 4961
效果图：涉及相关知识点：欧拉对象和四元数主要用来表达对象的旋转信息。关键词：欧拉Euler、四元数Quaternion、矩阵Matrix4。
THREE.JS 使用TransformControls对模型拖拽
qq_44426236的博客
12-21 2102
该类可提供一种类似于在数字内容创建工具（例如Blender）中对模型进行交互的方式，来在3D空间中变换物体。和其他控制器不同的是，变换控制器不倾向于对场景摄像机的变换进行改变。TransformControls 是由 THREE.JS 提供的一类控制器。
ThreeJs 导入外部三维模型，并实现鼠标滚动放大缩小旋转效果
CodingNoob
03-29 6198
let i = 0; function init() { // create a scene, that will hold all our elements such as objects, cameras and lights. var scene = new THREE.Scene(); // create a camera, which defines whe...
threejs中模型沿着轨迹进行运动
weixin_44870969的博客
08-28 2019
threejs中模型沿着轨迹进行运动
干货！如何在高德地图实现自动巡航效果？
高德技术
07-13 1354
介绍在高德地图上实现自动驾驶导航界面的自动巡航效果，只要在3DTiles图层上展示主体车辆（后文简称为NPC）沿着既定的路径平滑移动就可以了，这里不用考虑NPC与场景碰撞问题，因此可以直接把NPC和场景拆分为两个独立图层，本文着重介绍一下NPC移动要如何实现。需求分析首先，我们需要获取数据并生成移动路径，然后绘制巡航轨迹。为了实现巡航效果，我们需要加载并放置模型，并在每一帧重新设置模型的位置和正面...
threejs球体旋转与场景旋转_Threejs：将球体（球体）旋转到球体本身上的另一个点（城市）...
weixin_39860108的博客
12-22 212
I'm building a globe(sphere geometry) with set of predefined locations on geo-mapped and drawn as point(sphere geometry). I would like to focus(moving one location to another) those locations by rotat...
three.js实现物体沿轨迹移动
12-25
Three.js是一个用于创建和展示3D图形的JavaScript库，它可以实现物体沿着预定义的轨迹移动。 首先，我们需要创建一个3D场景，并添加一个或多个物体到场景中。然后，我们需要定义一个曲线或路径，可以是一条直线、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

YanisWu

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值