Home JS special effects Other special effects HTML5 canvas realizes 3D motion animation effect of geometric model

HTML5 canvas realizes 3D motion animation effect of geometric model

HTML5 canvas realizes 3D motion animation effect of geometric model

HTML5 canvas realizes 3D motion animation effect of geometric model

JS片段:

<script>
var {atan2,sqrt,sin,cos,PI,acos} = Math;
function project3D(x,y,z,vars){
x-=vars.camX,y-=vars.camY,z-=vars.camZ;
p=atan2(x,z),d=sqrt(z*z x*x),x=sin(p-vars.yaw)*d,z=cos(p-vars.yaw)*d;
p=atan2(y,z),d=sqrt(y*y z*z),y=sin(p-vars.pitch)*d,z=cos(p-vars.pitch)*d;
n=-9,b=1,l=9,d=1,e=0,f=0,g=x,h=z,k=(h-f)*(l-n)-(g-e)*(d-b),m=((g-e)*(b-f)-(h-f)*(n-e))/k;
return {x:vars.cx (n m*(l-n))*vars.scale,y:vars.cy y/z*vars.scale,d:sqrt(x*x y*y z*z)};
}
function elevation(x,y,z){
return acos(z / sqrt(x*x y*y z*z));
}
function subdivide(shape,subdivisions){
var t=shape.segs.length;
for(var i=0;i<t; i){
var x1=shape.segs[i].a.x;
var y1=shape.segs[i].a.y;
var z1=shape.segs[i].a.z;
var x2=(shape.segs[i].b.x-x1)/subdivisions;
var y2=(shape.segs[i].b.y-y1)/subdivisions;
var z2=(shape.segs[i].b.z-z1)/subdivisions;
shape.segs[i].b.x=x1 x2;
shape.segs[i].b.y=y1 y2;
shape.segs[i].b.z=z1 z2;
var x3=x2;
var y3=y2;
var z3=z2;
for(var k=0;k<subdivisions-1; k){
shape.segs.push(new Seg(x1 x2,y1 y2,z1 z2,x1 x2 x3,y1 y2 y3,z1 z2 z3));
x2 =x3;
y2 =y3;
z2 =z3;
}
}
}


这是一款很具空间感的基于html5 canvas实现的几何模型3D运动动画效果,好看的3D模型动画特效。

Disclaimer

All resources on this site are contributed by netizens or reprinted by major download sites. Please check the integrity of the software yourself! All resources on this site are for learning reference only. Please do not use them for commercial purposes. Otherwise, you will be responsible for all consequences! If there is any infringement, please contact us to delete it. Contact information: admin@php.cn

Related Article

Imitation of Sohu women's channel FLASH picture switching effect_image special effects Imitation of Sohu women's channel FLASH picture switching effect_image special effects

16 May 2016

When using it, you can refer to some other special effects on this site.

How to implement image and video special effects in C++? How to implement image and video special effects in C++?

26 Aug 2023

How to implement image and video special effects in C++? With the development of modern science and technology today, image and video special effects play an important role in entertainment, advertising, education and other fields. As a powerful programming language, C++ provides many tools and libraries for processing images and videos. This article will introduce how to implement image and video special effects in C++ and provide some code examples. 1. Image special effects to realize image reading and saving. To realize image special effects, you first need to read and save images. There are many image processing libraries in C++ such as OpenCV and

Describe Canvas combined with JavaScript to achieve picture special effects Describe Canvas combined with JavaScript to achieve picture special effects

07 Mar 2018

We all know that canvas is in HTML5. Canvas can make many special effects and other magical things. Of course, JavaScript can also do it. But have you ever played with canvas and JavaScript to achieve image special effects? If not, let’s take a look!

How to use Vue to implement digital animation special effects How to use Vue to implement digital animation special effects

21 Sep 2023

How to use Vue to implement digital animation special effects Preface: In web applications, digital animation special effects are often used to display statistical data, countdowns, or other scenes that need to highlight the effects of digital changes. As a popular JavaScript framework, Vue provides rich data binding and transition animation functions, which is very suitable for realizing digital animation special effects. This article will introduce how to use Vue to implement digital animation special effects and provide specific code examples. 1. Set initial data: First, we need to set a variable in the Vue component

What software is used to create TikTok's Disney special effects_TikTok's Disney special effects face creation tutorial What software is used to create TikTok's Disney special effects_TikTok's Disney special effects face creation tutorial

18 Apr 2024

1. Production - users only need to upload their own selfies or other people's portraits to convert them with one click, and the operation is very convenient; 2. Popularity - not only Disney special effects faces, but also other popular special effects are available at any time. Experience; In this experiment, you can also make filters by yourself. You can freely set various contents according to your own preferences, and the filter style can be changed freely. 1. After downloading and installing toonme, you can enter the software and select the special effects filter you want. 2. Check the photos you want to create and choose to start creating them immediately. 3. Wait for a moment, and the processed special effects picture will appear. 4. There are save local and share buttons in the upper right corner. The production of Douyin Disney special effects face and the introduction of software,

How to implement audio special effects and audio processing in C++? How to implement audio special effects and audio processing in C++?

26 Aug 2023

How to implement audio special effects and audio processing in C++? Introduction: With the continuous development of technology, audio special effects and audio processing are becoming more and more important in modern music production, film and television post-production and other fields. As an efficient programming language, C++ can help us implement various audio effects and audio processing functions. This article will introduce how to implement audio special effects and audio processing in C++ and provide relevant code examples. 1. Audio special effects to achieve the sound reverberation effect. The sound reverberation effect is often used in music production and film and television post-production.

Detailed explanation of class names corresponding to various special effects in wow.js Detailed explanation of class names corresponding to various special effects in wow.js

24 Oct 2017

Class names corresponding to various special effects in wow.js 1. (When the page scrolls down, some elements will produce small animation effects. Although the animation is relatively small, it can attract your attention.) Just learned about wow.js With this plug-in, when I visited other websites before and pulled down the scroll bar, various effects would appear, which felt very special...

What are the canvas special effects? What are the canvas special effects?

18 Aug 2023

Canvas special effects include particle effects, line animation, image processing, text animation, audio visualization, 3D effects, game development, etc. Detailed introduction: 1. Particle effect, by controlling the position, speed and color of particles to achieve various effects, such as fireworks, raindrops, starry sky, etc.; 2. Line animation, by drawing continuous lines on the canvas, create various effects. A dynamic line effect; 3. Picture processing, by processing pictures, you can achieve various cool effects, such as picture switching, picture special effects, etc.; 4. Text animation and other features.

18 kinds of vertical paging navigation button animation effects 18 kinds of vertical paging navigation button animation effects

18 Jan 2017

This is a set of very cool animation effects for vertical paging navigation buttons. This set of special effects has 18 general effects and can be used to create paging navigation buttons for slideshows, page switching, and other container component switching.

See all articles See all articles

Hot Tools

jQuery+Html5 realizes beautiful confession animation code

jQuery+Html5 realizes beautiful confession animation code

jQuery+Html5 implements beautiful confession animation code, the animation effect is great, a must-have for programmers to confess!

Couple's romantic confession js special effects code

Couple's romantic confession js special effects code

JS special effects code for couples' romantic confession. Such special effects can be used on wedding photography websites or placed on personal websites. It is also a good special effect. PHP Chinese website recommends downloading!

Simple js love confession artifact

Simple js love confession artifact

Simple native js love confession artifact

Bunker's html5 particle animation expressive effects

Bunker's html5 particle animation expressive effects

Bunker's html5 particle animation expression special effects code, the animated special effects text can be changed in the code, you can make a page where you can customize text input, it should be very popular, this HTML5 special effect is very beautiful.

jQuery responsive background login interface template

jQuery responsive background login interface template

jQuery responsive backend login interface template html source code. The login page uses jquery to verify the form and determine whether the username and password meet the requirements. Usually the login page is a page that must be used on corporate websites or mall websites. Responsive backend pages, When the browser zooms in or out, the background will resize the image according to the browser! PHP Chinese website recommends downloading!

Hot Article

Pokemon Pocket: How To Play With Friends
02 Nov 2024 Mobile Game Guide
All Black Ops 6 safehouse puzzle solutions
26 Oct 2024 Mobile Game Guide
Brotato: Best Hunter Build
13 Nov 2024 Mobile Game Guide
The Sims 4: Life & Death - Guardian Tree Guide
03 Nov 2024 Mobile Game Guide