前言:
从前天在GitHub上看了阿里的一个数据可视化的项目。被粒子动画深深震撼了，看到技术栈的时候，前端Vue.js Canvas Three.js，就一个Three.js没有了解过，经过一番折腾，就这么稀里糊涂地进入了3D的世界（当然我也是有目标的，想要做出自己想要的3D效果）。想想三天过去了…也不知折腾了多久…PS：昨晚11点多还稀里糊涂地睡着了…从火热中停下来，一盆凉水又浇在了我的头上，还是不足~就好像前天看了各种动画效果的时候，忍不住感慨出：“这真是个充满未知的世界啊…”，所以特此停下，开始总结以下自己学习过程的心得。
3D特效的组成
在Three.js中，每一个3D效果都离不开三个对象：scene(场景)、camera(相机)、renderer(渲染器)
scene场景
可以理解为3D的世界，然后你所需要实现的3D效果都肯定要在这个3D世界里，所以开发中也会经常用到scene.add(Object)
camera相机
此相机非彼相机，可以理解为看向这个3D世界的眼睛，即如何在浏览器呈现出这个3D世界的视界，就是由camera决定的，而相机的种类也由多种，最常用的就是PerspectiveCamera(透视相机)，它的呈像效果最符合人的视觉，即近大远小。
render渲染器
顾名思义，渲染器即用于渲染3D效果的，可以通过setSize()设置可视的大小，展示可视的3D效果，最后需要调用render()方法渲染。
那么现在就上代码，用上这三个对象，一个旋转的立方体
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旋转的立方体</title>
<style>
body {
margin: 0;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<script src="js/three.js"></script>
<script>
//创建一个场景
var scene = new THREE.Scene();
//创建一个透视相机
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
//创建渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
//设置渲染器颜色
renderer.setClearColor(0xFFFF00, 1.0);
document.body.appendChild(renderer.domElement);
//创建一个立方体
var geometry = new THREE.BoxGeometry(1, 1, 1);
//创建材质
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
//定义一个光线
function initLight() {
var light = new THREE.AmbientLight(0xFF0000);
light.position.set(100, 100, 200);
scene.add(light);
}
// 定义一个网格
function initGrid() {
var helper = new THREE.GridHelper(1000, 50);
helper.setColor(0x0000ff, 0x808080);
scene.add(helper);
}
//使用渲染器渲染
function animate() {
renderer.render(scene, camera);
// cube.rotateX(0.01);
cube.rotateY(0.01);
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
页面效果：
1967
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
