three.js示例之旋转立方体
Three.js简单的旋转示例
感谢:b站老陈
//引入three.js 库
<script src="js/three.js"></script>
<body><!-- 将在div里面输出画面 --><div id="threejs-output"></div>
</body>
<script>
//具体three.js的代码
</script>
window.onload() 方法用于在网页加载完毕后立刻执行的操作,即当 HTML 文档加载完毕后,立刻执行某个方法。
做一个简单的示例:
分步分析一下几个关键核心的代码:
1.场景scene
var scene = new THREE.Scene();
将某个元素加入到场景中(如坐标系)
// 显示三维坐标系
var axes = new THREE.AxisHelper(20)
// 添加坐标系到场景中
scene.add(axes);
2.相机Camera
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 2000)
// 定位相机,并且指向场景中心
camera.position.x = 30;
camera.position.y = 30;
camera.position.z = 30;
camera.lookAt(scene.position)
3.渲染器renderer
var renderer = new THREE.WebGLRenderer();
// 设置渲染器的初始颜色
renderer.setClearColor(new THREE.Color(0xeeeeee));
// 设置输出canvas画面的大小
renderer.setSize(window.innerWidth, window.innerHeight)
// 设置渲染物体阴影
renderer.shadowMapEnabled = true;
// 将渲染器输出添加html元素中
document.getElementById('webgl-output').appendChild(renderer.domElement);
renderer.render(scene, camera)
4.几何体Geometry 和 材质Material
//添加立方体
var boxGeometry = new THREE.BoxGeometry(4, 4, 4);var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000
})
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.x = 0;
cube.position.y = 4;
cube.position.z = 2;
// 对象是否渲染到阴影贴图当中
cube.castShadow = true;
scene.add(cube)
添加球体类似
5.光源Light
// 创建聚光灯
var spotLight = new THREE.SpotLight(0xFFFFFF);
spotLight.position.set(130, 130, -130);
spotLight.castShadow = true;
spotLight.angle = Math.PI / 4;
spotLight.shadow.penumbra = 0.05
spotLight.shadow.mapSize.width = 1024;
spotLight.shadow.mapSize.innerHeight = 1024;
// 添加聚光灯
scene.add(spotLight)
6.动效和鼠标控制
let T1 =new Date()
function render() {let T2 =new Date()let t = T2-T1;renderer.render(scene, camera)// 绕y轴0.01弧度cube.rotateY(0.01)window.requestAnimationFrame(render)
}//循环请求动画帧window.requestAnimationFrame(render)// 创建controls对象;var controls = new THREE.OrbitControls(camera, renderer.domElement)
// 监听控制器的鼠标事件,执行渲染内容controls.addEventListener('change', () => {renderer.render(scene, camera)
})
three.js示例之旋转立方体相关推荐
- php绘制正方体,Three.js利用顶点绘制立方体方法
本文主要给大家介绍了关于Three.js利用顶点绘制立方体的方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧.希望能帮助到大家. 前言 之前我们在学些WebGL基础的时候 ...
- three.js使用OrbitControls.js控制几何体旋转、平移、缩放
附带一个可用的OrbitControls.js http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js ...
- html5 css3 图片画廊,js和CSS3 3D立方体图片画廊特效
这是一款js和CSS3 3D立方体图片画廊特效.该3D立方体图片画廊特效通过CSS3进行布局,构建立方体,然后通过简单的js代码来完成点击缩略图进行立方体旋转的操作. 由于该该3D立方体图片画廊特效中 ...
- 用webgl绘制一个彩色旋转立方体
#用webgl绘制一个旋转立方体 ** 学习交流欢迎加群:789723098,博主会将一些demo整理共享 ** 今天给大家分享一个用webgl写的简单的三维场景:转动的交互式彩色立方体,其六个面的颜 ...
- 3d旋转立方体特效,可自由旋转,超强透视效果的html页面源码
大家好,今天给大家介绍一款,3d旋转立方体特效,可自由旋转,超强透视效果的html页面源码 (图1).送给大家哦,获取方式在本文末尾. 图1 可以用鼠标自由全角度旋转(图2) 图2 代码完整,需要的朋 ...
- JavaScript 3D动画库three.js示例篇
JavaScript 3D动画库three.js示例篇 本文主要介绍JavaScript 3D动画库three.js示例,关于three.js库基础知识可参见:JavaScript 3D动画库thre ...
- 安卓学习笔记38:利用OpenGL ES绘制旋转立方体
文章目录 零.学习目标 一.绘制图形基本步骤 二.绘制旋转立方体 (一)运行效果 (二)实现步骤 1.创建安卓应用[DrawRotatingCube] 2.建模:立方体类 - Cube 3.渲染:立方 ...
- html中3d哪个方向是x轴,详解用CSS绘制3D旋转立方体
CSS3D旋转立方体绝对是能充分代表这些年CSS发展新高度的典型案例.从一种只是简单的颜色和尺寸渲染的标记符,CSS现在已经变成了一种能够创造出复杂的.具有艺术感染力的视觉效果的编程语言.动画效果的生 ...
- OpenGL-绘制旋转立方体
OpenGL绘制旋转立方体. 编译环境 vs2015+glut 效果图: //By:ZHangFY #include <GL/glut.h>GLfloat rotate_angle1 = ...
- js版梅森旋转生成随机数
用js实现, 梅森旋转生成随机数, 来代替Math.random(); 该文章参考自 梅森旋转算法--伪随机数(加密.身份信息ID号)_Touch_Dream的博客-CSDN博客 <!DOCTY ...
最新文章
- AlexeyAB DarkNet YOLOv3框架解析与应用实践(三)
- 图像处理之添加高斯与泊松噪声
- 微服务发现组件Eureka:微服务注册
- 熊猫直播P2P分享率优化(下):ASN组网
- shell 脚本传参
- Linux 之父怒删工程师提交的补丁,称“太蠢了”网友:怼得好!
- 技术狂何波:战斗在程序化交易第一线
- redis 分布式锁 看门狗_为什么redis可以做分布式锁
- windowns定时关机命令
- java 自定义进度条_JAVA Swing 自定义进度条样式(简单实现)
- idea 主题文字大小修改
- 免费在excel密码破解--超好用
- linux s5pc100串口驱动,FS_S5PC100平台linux摄像头驱动开发详解
- mysql触发器new old用法详解
- Python 学习笔记 英语默写软件
- 2022年,来者犹可追
- Zabbix实现企业微信报警
- 如何写一个C语言头文件,C语言头文件如何写?.doc
- springcloud之简介
- Dagger 2 基本用法