JavaScript 3D动画库three.js示例篇

JavaScript 3D动画库three.js示例篇

本文主要介绍JavaScript 3D动画库three.js示例，关于three.js库基础知识可参见：JavaScript 3D动画库three.js入门篇_cnds123的专栏-CSDN博客

通过script标签来引入three.js，又有两种方式：

一是使用CDN（Content Delivery Network，即内容分发网络），如：

这种方式需要联网才有效。

二是将从Three.js的官方网站下载three.js或three.min.js文件（在下载包的Build文件夹中）复制到适当位置，这儿以存放到HTML文件所在的文件夹的子文件夹js中，如：<script src="js/three.min.js"></script>

这种方式不需要联网。

通过script标签来引入three.js比较简单，适合简单的练习，快速体验。

下面给出通过script标签引入three.js的模板：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title></head>
<!—引入three.js或three.min.js，后者是压缩的，路径根据实际情况写 -->
<script src='js/three.min.js'></script>
<body>
<script>//创建场景，游戏中的事情发生的地方var scene=new THREE.Scene();//创建透视投影相机用来观察取景，视角45度，画幅比例 宽比高等var camera=new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,1, 10000);//创建渲染器，将相机看到的内容绘制到屏幕上var renderer=new THREE.WebGLRenderer();//渲染器canvas宽高设为与窗口一致renderer.setSize(window.innerWidth,window.innerHeight);//将渲染器对应的dom元素添加到body中document.body.appendChild(renderer.domElement);//定义一个几何体（物体）-----↓-------var geometry=new THREE.CylinderGeometry(5,10,30);//定义一种材质，显示为线框var material = new THREE.MeshBasicMaterial({color:0xB3DD,wireframe:true});//网格(Mesh)是用来承载几何模型的一个对象，可以把材料应用到它上面var threeDim =new THREE.Mesh(geometry, material);//把几何模型添加到场景中scene.add(threeDim);//移动相机位置camera.position.z = 80;function render() {//渲染循环，以每秒60次的频率来绘制场景requestAnimationFrame(render);//设置球体绕y轴旋转threeDim.rotation.y += 0.005;renderer.render(scene, camera); //渲染，显示摄像头在屏幕上看到的内容}render();//----------↑----------------</script>
</body>
</html>

保存文件,用浏览器运行之，可见运行效果。

环形示例，源码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>环形</title></head>
<!—引入three.js或three.min.js，后者是压缩的，路径根据实际情况写 -->
<script src='js/three.min.js'></script>
<body>
<script>//创建场景，游戏中的事情发生的地方var scene=new THREE.Scene();//创建透视投影相机用来观察取景，视角45度，画幅比例 宽比高等var camera=new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,1, 10000);//创建渲染器，将相机看到的内容绘制到屏幕上var renderer=new THREE.WebGLRenderer();//渲染器canvas宽高设为与窗口一致renderer.setSize(window.innerWidth,window.innerHeight);//将渲染器对应的dom元素添加到body中document.body.appendChild(renderer.domElement);//定义一个几何体（物体）-----↓-------var geometry=new THREE.TorusGeometry(20, 5);//定义一种材质，显示为线框wireframe，平面阴影flatShadingvar material = new THREE.MeshBasicMaterial({color:0xB3DD,wireframe: true});//网格(Mesh)是用来承载几何模型的一个对象，可以把材料应用到它上面var three3D=new THREE.Mesh(geometry, material);//把几何模型添加到场景中scene.add(three3D);//three3D.rotation.set(0.5,0.5,0);//移动相机位置camera.position.z = 80;//运动function render() {//渲染循环，以每秒60次的频率来绘制场景requestAnimationFrame(render);//设置球体绕y轴旋转three3D.rotation.y += 0.005;renderer.render(scene, camera); //渲染，显示摄像头在屏幕上看到的内容}render();//----------↑----------------//renderer.render(scene,camera); //渲染，显示摄像头在屏幕上看到的内容</script>
</body>
</html>

保存文件,用浏览器运行之，可见运行效果：

JavaScript 3D动画库three.js示例篇相关推荐

GSAP动画库入门基础示例：心爱的小摩托
大家好,在我们谈论网页动画时,我们第一时间会想到用jQuery的animate()方法或者CSS3的animation和transition.今天的这篇文章,我将给大家推荐另一个可选方案,一款专业的W ...
JavaScript星星动画心形js特效
下载地址 JavaScript实现的星星动画心形特效 dd:
30个你应该在2023年里使用的JavaScript 动画库
1.Greensock 地址:https://greensock.com/ 用于构建适用于所有主流浏览器的高性能动画的 JavaScript 库. 2.Velocity.js 地址:http://ve ...
JavaScript 动画库
动画能使我们以独特的方式讲述故事并传达情感和想法.这里有 30 个 JavaScript 动画库可供我们在今后的项目中使用. 1.Greensock 地址:https://greensock.com/ ...
30个你应该在2022年里使用的JavaScript 动画库
点击上方前端Q,关注公众号回复加群,加入前端Q技术交流群英文 | https://javascript.plainenglish.io/30-javascript-animation-libra ...
tween.js一个平滑动效果的js动画库
tween.js一个平滑动效果的js动画库 tween.js是什么? tween.js是一款可生成平滑动效果的js动画库,允许以平滑的方式修改元素的属性值. tween.js达到什么效果? 它可以通过 ...
js svg语音波动动画_11 个非常受欢迎的 JavaScript 动画库，值得学习！
1.Three.js 超过46K的星星,这个流行的库提供了非常多的3D显示功能,以一种直观的方式使用 WebGL.这个库提供了. .CSS3D 和 WebGL渲染器,让我们在设备和浏览器之间创建丰富的 ...
JavaScript动画库：Anime.js
前言今天简单学习一下JavaScript动画库:Anime.js.官网的介绍是: Anime.js (/ˈæn.ə.meɪ/) 是一个轻量的JavaScript 动画库, 拥有简单而强大的API. ...
anime.js 动画_Anime.js –轻量级JavaScript动画库
网络动画已经走了很长一段路. 开发人员不仅可以使用CSS / SVG / JS组合制作任何动画,而且还提供数十个免费库来节省时间. 我的最爱之一是Anime.js ,这是一个完全免费的开源JavaSc ...

JavaScript 3D动画库three.js示例篇

JavaScript 3D动画库three.js示例篇相关推荐

最新文章

热门文章