threejs【简单示例】物体随线移动

117sir

已于 2022-12-28 11:31:24 修改

阅读量1.1k

点赞数

分类专栏： threejs 文章标签： javascript

于 2022-02-24 13:42:49 首次发布

本文链接：https://blog.csdn.net/qq_43805885/article/details/123109865

版权

threejs 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

实现效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            //隐藏body窗口区域滚动条
        }
    </style>
</head>
<body>
    <script type="module">
        import * as THREE from './lib/threejs/build/three.module.js';

        var scene = new THREE.Scene();

        var geometry = new THREE.BufferGeometry(); //声明一个几何体对象Geometry
        //参数：0, 0圆弧坐标原点x，y  100：圆弧半径    0, 2 * Math.PI：圆弧起始角度
        var arc = new THREE.ArcCurve(0, 0, 100, 0, 2 * Math.PI);
        //getPoints是基类Curve的方法，返回一个vector2对象作为元素组成的数组
        var points = arc.getPoints(50);//分段数50，返回51个顶点
        // setFromPoints方法从points中提取数据改变几何体的顶点属性vertices
        geometry.setFromPoints(points);
        //材质对象
        var material = new THREE.LineBasicMaterial({
            color: 0xffffff
        });
        //线条模型对象
        var line = new THREE.Line(geometry, material);
        scene.add(line); //线条对象添加到场景中

        var geometryP = new THREE.SphereGeometry(5, 16, 16);
        //console.log('geometryP', geometryP);
        var materialP = new THREE.MeshBasicMaterial({ color: 0xffffff, side: THREE.DoubleSide });
        var  circleP = new THREE.Mesh(geometryP, materialP);
        scene.add(circleP);
        //环境光
        var ambient = new THREE.AmbientLight(0x888888);
        scene.add(ambient);

        /**
 * 相机设置
 */
        var width = window.innerWidth; //窗口宽度
        var height = window.innerHeight; //窗口高度
        var k = width / height; //窗口宽高比
        var s = 100; //三维场景缩放系数
        //创建相机对象
        var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
        camera.position.set(0, 0, 10); //设置相机位置
        camera.lookAt(new THREE.Vector3(0, 0, 0)); //设置相机方向(指向的场景对象)

        /**
 * 创建渲染器对象
 */
        var renderer = new THREE.WebGLRenderer({
            antialias: true
        });
        renderer.setSize(width, height);
        // renderer.setClearColor(0xb9d3ff,1);//设置背景颜色
        document.body.appendChild(renderer.domElement); //body元素中插入canvas对象

        var progress = 0;

        // 渲染函数
        function render() {
            renderer.render(scene, camera); //执行渲染操作
            requestAnimationFrame(render);
            //小球偏移量
            progress += 0.01;
            //console.log(progress.toFixed(3)==1);
            if (arc) {
                //getPoint不可大于1,大于1会出现bug，导致模型运动有问题
                let point = arc.getPoint(progress.toFixed(3));
                //console.log(point);
                if (point && point.x) {
                    circleP.position.set(point.x, point.y, point.z);
                }
            }

        }
        render();
    </script>
</body>
</html>