关注初识Threejs与小编一起学习成长
在Three.js的赋能下,WEB网页效果逐渐丰富起来,今天我们就来运用之前学习的Three.js基础知识,实现一个旋转的几何体-球体。
知识点
1、透视投影照相机、基本材质;
2、球体几何模型、全景贴图;
3、渲染器;
01
创建DOM
<div class="canvas" id="canvasObj">
</div>
为div容器定义样式:
html,body,.canvas{
width:100%;
height: 100%;
padding:0px;
margin:0px;
}
.canvas{
background:url(../libs/threejs/img/bg.jpg) no-repeat;
background-size:100% 100%;
}
02
引入依赖
这里使用import导入依赖,OrbitControls.js是轴道控制器控件,用它可以实现场景与鼠标交互,让场景动起来,控制场景的旋转、缩放、平移;CSS2DRenderer.js是CSS 2D渲染器,使用CSS2DObject和CSS2DRenderer可以绘制一个2D效果的标签,将三维物体和基于HTML的标签相结合。
import * as THREE from '../libs/threeJs/three.module.js';
import { OrbitControls } from '../libs/threeJs/controls/OrbitControls.js';//轴道控制器控件
import { CSS2DRenderer, CSS2DObject } from '../libs/threeJs/renderers/CSS2DRenderer.js';//css 2D渲染器
03
核心代码
1、初始化场景:
_this.scene=function(){
scene = new THREE.Scene();
}
2、初始化照相机:
_this.camera=function(){
/**
* 构造函数总共有四个参数,分别是fov,aspect,near,far
* fov:照相机视锥体垂直视野角度,实际项目中一般都定义45,因为45最接近人正常睁眼角度
* aspect:照相机视锥体长宽比
* near:照相机视锥体近端面 far:照相机视锥体远端面
* */
camera = new THREE.PerspectiveCamera(45, canvasWidth / canvasHeight, 1, 1000);//远景投影的相机
camera.position.set(10, 2, 20);//position用来指定相机在三维坐标中的位置
}
3、在场景里面创建球体:
_this.addSphere=function(){
/**
* 初始化球体几何模型
* SphereGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength)
* radius:球体半径
* widthSegments:水平分割面的数量
* heightSegments:垂直分割面的数量
* */
var earthGeometry = new THREE.SphereGeometry(_this.EARTH_RADIUS, 60, 60);
var textureLoader = new THREE.TextureLoader();//纹理加载器,用于加载球体的纹理
//基础网孔材料
var earthMaterial = new THREE.MeshBasicMaterial({
color:0xffffff,//线条的十六进制颜色
map: textureLoader.load(_this.sphereBg),//设置纹理贴图
wireframe: false,//渲染模型为线框
wireframeLinewidth: 3,//线框线宽
skinning: false,//定义材料是否使用皮肤
});
//threeJs 的世界中,材质(Material)+几何体(Geometry)就是一个 mesh
//创建网格对象
earth = new THREE.Mesh(earthGeometry, earthMaterial);
//设置球体标题
var h2html=$("<div class='title'><span>Three.js球体<br/>旋转案例</span></div>").get(0);
var earthLabel = new CSS2DObject(h2html);
earthLabel.position.set(0, 2, 0);
earth.add(earthLabel);//DOM元素实例添加到网格中
scene.add(earth);//将球体添加到场景中
}
4、初始化渲染器:
_this.renderer=function(){
renderer = new THREE.WebGLRenderer({
alpha: true,//背景是否透明
antialias: true//抗锯齿属性
});
//window.devicePixelRatio返回当前显示设备的物理像素分辨率与CSS像素分辨率之比
//设置设备像素比。通常用于HiDPI设备防止模糊输出canvas
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(canvasWidth, canvasHeight);//调整输出canvas尺寸
canvasObj.append(renderer.domElement);//把canvas添加Dom中
/**
* 初始化CSS 2D渲染器
* 可以将三维物体和基于HTML的标签相结合
*/
labelRenderer = new CSS2DRenderer();
labelRenderer.setSize(canvasWidth, canvasHeight);
labelRenderer.domElement.style.position = 'absolute';
labelRenderer.domElement.style.top = 0;
canvasObj.append(labelRenderer.domElement);
}
5、周期性渲染场景:
_this.renderFun=function(){
requestAnimationFrame(_this.renderFun);
var now = new Date();
var delay = now - lastDate;
lastDate = now;
var intc = 3; // 每秒转3度
earth.rotation.y += Math.PI / 180 / delay * intc;
labelRenderer.render(scene, camera);
renderer.render(scene, camera);
}
6、调用函数:
//初始化
_this.init=function(){
_this.scene();
_this.camera();
_this.addSphere();
_this.renderer();
//轴道控制器。相机对象作为参数,控件可以监听鼠标的变化,改变相机对象属性
var controls = new OrbitControls(camera);
controls.enabled = true;//鼠标控制是否可用
//滚轮是否可控制zoom,zoom速度默认1
controls.enableZoom = false;
controls.zoomSpeed = 1.0;
// controls.minDistance = 20;// 最小距离
// controls.maxDistance = 25; //最大距离
controls.noPan = true; // 禁用右键拖动
controls.minPolarAngle = Math.PI / 180; // 视角不能低于水平面
controls.maxPolarAngle = Math.PI / 2; // 视角不能低于水平面
_this.renderFun();//渲染
}
04
写在最后
以上就是此次案例的核心代码,大家可以动手尝试一下修改构造函数的参数值,如:基础材质的纹理贴图、网格模型的旋转方向等,通过它们的巧妙组合,可以让场景更加绚丽多彩,快去动手实践吧~
如果你对本文内容有任何建议,欢迎与小编沟通交流,一起学习成长!关注公众号回复three.js,获取完整案例代码。 |
你“在看”我吗?