前言
这个是我们3月份做的一个小demo,不过文章搁浅了,现在补回来吧,这个demo基本是入门级别的了,做之前需要了解一些3d知识,可以参考学习3D前需要了解的一些基础
涉及的面有摄像头,场景,灯源,材质,运动,贴图,事件交互等等
技术栈
three.js
遇到的问题
- 贴图本地请求,在谷歌会有跨域限制,解决方法很多,我选用vscode的liveServer插件
- 场景,摄像头和物体的大小设置很麻烦,需要一个度,这种很不好形容,只能说demo做多了,度很好控制(当作废话吧)
- 月球和地球的自转轨迹的计算是最麻烦的,虽然写起来就cos,sin,但是如果没有做过的人和查过资料,很难一瞬间get到。
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0px;
background-color: #000000;
overflow: hidden;
}
canvas{
background-image: url(./images/star.webp);
}
</style>
</head>
<body>
</body>
<script src="../build/three.min.js"></script>
<script src="../build/js/CSS2DRenderer.js"></script>
<script src="../build/js/OrbitControls.js"></script>
<script>
// 声明全局变量
let camera , scene ,renderer , lavelRenderer;
let moon , earth
let clock = new THREE.Clock()
// 实例化纹理加载器
const textureLoader = new THREE.TextureLoader()
// 初始化
function init(){
// 月球和地球半径
const EARTH_RADIUS = 2.5
const MOON_RADIUS = 0.3
/*
* 实例化场景
*/
scene = new THREE.Scene();
/**
* 相机设置
*/
var width = window.innerWidth; //窗口宽度
var height = window.innerHeight; //窗口高度
var k = width / height; //窗口宽高比
var s = 10; //三维场景显示范围控制系数,系数越大,显示的范围越大
//创建相机对象
camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 100);
camera.position.set(10, 5, 20); //设置相机位置
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
/**
* 实例化光源
*/
//聚光源
var PointLight = new THREE.PointLight(0xffffff);
PointLight.position.set(30, 30, 30); //点光源位置
PointLight.intensity = 2 //光源强度
PointLight.castShadow = true; // 光源有阴影
scene.add(PointLight); //点光源添加到场景中
/**
* 设置月球
*/
var moonGeometry = new THREE.SphereGeometry(MOON_RADIUS, 32, 32);
let moontextureLoader = new THREE.TextureLoader().load('./images/moon.jpg')
var moonMaterial1 = new THREE.MeshPhongMaterial({
map: moontextureLoader // 添加纹理
})
moon = new THREE.Mesh(moonGeometry, moonMaterial1) //网格模型对象Mesh
moon.position.set(0, 0, 0)
// 对象是否渲染到阴影贴图当中
moon.castShadow = true
moon.receiveShadow = true
scene.add(moon); //创建月球
/**
* 设置地球
*/
var earthGeometry = new THREE.SphereGeometry(EARTH_RADIUS, 32, 32);
let earthtextureLoader = new THREE.TextureLoader().load('./images/earth1.jpg')
var earthMaterial1 = new THREE.MeshPhongMaterial({
map: earthtextureLoader, // 添加纹理
shininess:5,
})
earth = new THREE.Mesh(earthGeometry, earthMaterial1) //网格模型对象Mesh
earth.position.set(0, 0, 0)
earth.castShadow = true; // 光源有阴影
earth.receiveShadow = true
scene.add(earth); //创建地球
//环境光
var AmbientLight = new THREE.AmbientLight(0xffffff);
AmbientLight.intensity = 1.5
AmbientLight.castShadow = true; // 光源有阴影
scene.add(AmbientLight); //点光源添加到场景中
/**
* 创建渲染器对象
*/
renderer = new THREE.WebGLRenderer({
alpha : true // 可以穿透,展示背景图
});
renderer.setPixelRatio(width.devicePixelRatio)
renderer.setSize(width, height);//设置渲染区域尺寸
renderer.shadowMap.enabled = true // 设置渲染物体阴影
document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
/**
* 绑定控制和摄像头
*/
var controls = new THREE.OrbitControls(camera,renderer.domElement); // 创建鼠标控件对象
}
/*
* 动画效果
*/
function anumate(){
const elapsed = clock.getElapsedTime() //获取时间
console.log(elapsed)
moon.position.set(Math.sin(elapsed) * 5 , 0 ,Math.cos(elapsed)* 5) // 设置月球旋转
//地球自转
var axis = new THREE.Vector3(0,1,0)
earth.rotateOnAxis(axis, Math.PI/100)
render()
requestAnimationFrame(anumate);// 请求再次执行渲染函数render 默认是每秒调用60次, 大约16.7ms的执行周期
}
function render(){
// 渲染要使用requestAnimationFrame,因为纹理的图片是异步的,要先加载完纹理图片才能渲染
window.requestAnimationFrame(this.render.bind(this))
renderer.render(scene,camera);
}
init()
anumate()
// 调整尺寸
window.onresize = function(){
camera.aspect = window.innerWidth / window.innerHeight
camera.updateProjectionMatrix()
renderer.setSize(window.innerWidth , window.innerHeight)
}
</script>
</html>