Three.js 沿着复杂曲线轨道滑行的方块

使用THREE.CatmullRomCurve3通过一系列的点来创建一条平滑的曲线。可用于物流包裹|外卖车辆跟踪系统

three, block, path

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 4828
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var Boxes = (function(THREE) {
     'use strict';

//
     function Box(pos, texture) {
         this.vector = pos;
         this.texture = texture;
         this.radius = {
             x: 20,
             y: 30,
             z: 20
         };
         this.counter = 0;
         this.axis = new THREE.Vector3();
         this.up = new THREE.Vector3(0, 1, 0);
         this.speed = 0.0005 + Math.random() * 0.0005;
         this.mesh = null;
     }
     Box.prototype.init = function(scene) {
         this.mesh = new THREE.Mesh(
             new THREE.BoxGeometry(this.radius.x, this.radius.y, this.radius.z, 2, 2, 2),
             new THREE.MeshPhongMaterial({
                 map: texture
             })
         );
         this.mesh.position.set(this.vector.x, this.vector.y, this.vector.z);
         scene.add(this.mesh);
     }

function Point(pos) {
         this.vector = new THREE.Vector3(pos.x, pos.y, pos.z);
     }

this.box = new Box(this.points[0].vector, texture);
         this.box.init(scene);
         this.curve = curve;
     };
     Spline.prototype.update = function() {
         var box = this.box;
         if (box.counter < 1) {
             box.mesh.position.copy(this.curve.getPointAt(box.counter));
             var tangent = this.curve.getTangentAt(box.counter).normalize();
             box.axis.crossVectors(box.up, tangent).normalize();
             var radians = Math.acos(box.up.dot(tangent));
             box.mesh.quaternion.setFromAxisAngle(box.axis, radians);
             box.texture.needsUpdate = true;
             box.counter += box.speed;
         } else {
             box.counter = 0;
         }
     };

//
     var width = window.innerWidth;
     var height = window.innerHeight;

var scene = new THREE.Scene();
     var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
     var renderer = new THREE.WebGLRenderer();
     var light = new THREE.DirectionalLight(0xFFFFFF, 1);
     //var controls = new THREE.OrbitControls(camera);

var canvas = document.createElement('canvas');
     var ctx = canvas.getContext('2d');

var splines;
     var texture;

function setUpWorld() {
         camera.position.set(0, -150, 120);
         camera.lookAt(scene.position);
         scene.add(camera);
         renderer.setSize(width, height);
         renderer.setClearColor(0x111111);
         document.body.appendChild(renderer.domElement);
         scene.add(light);
         light.position.set(0, -300, 30);
     }

function makeTexture(str) {
         var width = 512;
         var height = 512;
         canvas.width = width;
         canvas.height = height;
         ctx.translate(0, 0);
         ctx.fillStyle = '#202020';
         ctx.fillRect(0, 0, width, height);
         ctx.fillStyle = '#fff';
         ctx.translate(width / 2, height / 2);
         ctx.rotate(270 * Math.PI / 180);
         ctx.font = 'bold 130px Arial';
         ctx.fillText(str, -ctx.measureText(str).width / 2, 30);
         //document.body.appendChild(canvas);
         texture = new THREE.Texture(canvas);
     }

function updateClock() {
         var date = new Date();

var hours = date.getHours();
         var minutes = date.getMinutes();
         var seconds = date.getSeconds();

if (hours.toString().length === 1) hours = '0' + hours;
         if (minutes.toString().length === 1) minutes = '0' + minutes;
         if (seconds.toString().length === 1) seconds = '0' + seconds;

return hours + ':' + minutes + ':' + seconds;

}

function setUpTimer() {
         setInterval(function() {
             makeTexture(updateClock());
         }, 1000);
     }

function renderFrame() {
         window.requestAnimationFrame(renderFrame);
         //controls.update();
         renderer.render(scene, camera);
         splines.forEach(updateSpline);
     }

function updateSpline(spline) {
         spline.update();
     }

function init() {
         setUpWorld();
         makeTexture(updateClock());
         setUpTimer();
         generateSplines(25, 400, 60);
         renderFrame();
     }

return {
         init: init
     };

})(THREE);

Boxes.init();

编译

CSS

HTML

使用THREE.CatmullRomCurve3通过一系列的点来创建一条平滑的曲线。可用于物流包裹|外卖车辆跟踪系统

three, block, path

编辑器支持Emmet

快捷键

使用THREE.CatmullRomCurve3通过一系列的点来创建一条平滑的曲线。可用于物流包裹|外卖车辆跟踪系统

three, block, path

Three.js 用圆环套住漂浮的小方块

Three.js 平滑的花环隧道

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：