效果
用到的内容
此效果主要使用到了 three.js、tween.js 以及相关三维模型资源。
三维场景的基本介绍 基本入门这里就不做过多介绍了，网上的入门文章很多，这里推荐一篇蛮生动的基本概念介绍文章 zhuanlan.zhihu.com/p/27296011
开始
看到这里，想必你已经知道了三维场景的一些基本概念，那么基于上文展示的案例效果，我们可以分析得出，要实现这样的效果，需要以下几个步骤。
1.创建场景
2.创建相机
3.创建光线，确保场景内的元素可见
4.创建渲染器，将3D内容渲染在页面上
上面四步就把我们需要的展示“舞台”搭建完毕了，接下来，就是演员入场
5.载入狐狸模型，并放置在场景中间，调整摄像机到合适的角度，凹好造型。
6.加入交互按钮，点击每个按钮，摄像机都会移动到对应的位置。
7.演出（开发）完成。
接下来介绍代码实现
html
<!DOCTYPE html>
<html lang="ZH-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://cdn.bootcss.com/normalize/8.0.1/normalize.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.95.0/build/three.min.js"></script>
<script src="./js/OrbitControls.js"></script>
<script src="./js/tween.min.js"></script>
<title>Document</title>
<style>
.btns {
position: absolute;
left: 0;
top: 0;
z-index: 100;
}
</style>
</head>
<body>
<div class="btns">
<button data-pos="front">看正面</button>
<button data-pos="leftSide">看侧面</button>
<button data-pos="back">看后面</button>
<button data-pos="bottom">看下面</button>
</div>
<script src="./js/test1.js"></script>
</body>
</html>
js实现
- 创建场景、相机、光线、渲染器、辅助坐标系
var camera, scene, renderer;
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(20, 20, 50);
scene = new THREE.Scene();
var environmentLight = new THREE.HemisphereLight(0xffffff, 0x444444);
environmentLight.position.set(0, 0, 1);
scene.add(environmentLight);
// 增加辅助坐标系
var axesHelper = new THREE.AxesHelper(20);
scene.add(axesHelper);
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
- 增加鼠标轨道控制
var control = new THREE.OrbitControls(camera, renderer.domElement);
- 页面自适应
// 自适应
window.addEventListener('resize', onResize, false);
function onResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
- 载入模型
var loader = new THREE.ObjectLoader();
loader.load('./assets/fox/low-poly-fox-by-pixelmannen.json', function (obj) {
obj.scale.set(0.2, 0.2, 0.2); //调整模型大小
obj.rotation.y = Math.PI; //调整模型角度
scene.add(obj)
})
- 渲染
function animate() {
requestAnimationFrame(animate);
TWEEN.update(); //这边要增加补间动画，用于实现视角切换功能
renderer.render(scene, camera);
}
animate();
- 缓存不同方位摄像机所处的位置，绑定点击事件，封装摄像机切换位置的方法
// 视角摄像机位置
var pos = {
front: {
cameraPos: {
x: 0,
y: 20,
z: 50
},
targetPos: {
x: 0,
y: 0,
z: 0
}
},
leftSide: {
cameraPos: {
x: 50,
y: 20,
z: 0
},
targetPos: {
x: 0,
y: 0,
z: 0
}
},
back: {
cameraPos: {
x: 0,
y: 20,
z: -50
},
targetPos: {
x: 0,
y: 0,
z: 0
}
},
bottom: {
cameraPos: {
x: 0,
y: -50,
z: 20
},
targetPos: {
x: 0,
y: 0,
z: 0
}
}
}
$('.btns').on('click', 'button', function (e) {
var targetPos = pos[$(this).data('pos')];
animateCamera(camera.position, targetPos.cameraPos, control.target, targetPos.targetPos);
});
function animateCamera(current1, target1, current2, target2) {
var obj = {
x1: current1.x, // 相机当前位置x
y1: current1.y, // 相机当前位置y
z1: current1.z, // 相机当前位置z
x2: current2.x, // 控制当前的中心点x
y2: current2.y, // 控制当前的中心点y
z2: current2.z // 控制当前的中心点z
}
var tween = new TWEEN.Tween(obj);
tween.to({
x1: target1.x, // 新的相机位置x
y1: target1.y, // 新的相机位置y
z1: target1.z, // 新的相机位置z
x2: target2.x, // 新的控制中心点位置x
y2: target2.y, // 新的控制中心点位置x
z2: target2.z // 新的控制中心点位置x
}, 1000);
tween.onUpdate(function () {
camera.position.x = obj.x1;
camera.position.y = obj.y1;
camera.position.z = obj.z1;
control.target.x = obj.x2;
control.target.y = obj.y2;
control.target.z = obj.z2;
control.update();
})
tween.onComplete(function () {
control.enabled = true;
})
tween.easing(TWEEN.Easing.Cubic.InOut);
tween.start();
}
至此，一个简单的三维模型展示页面就开发完毕了，有问题欢迎拍砖交流！
附上源码，比较乱，但是可以跑。。。
链接: pan.baidu.com/s/10xWBoM0R… 密码:eme5
