前端之家收集整理的这篇文章主要介绍了
three.js 入门案例详解，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
最近公司需要用tree.js实现一个3D图的显示，就看了官方文档，正好有时间，就记录下来。@H_502_1@
由于我们公司的前端框架用的是angular，所以我就把我的treejs封装在一个directives里面。后面放源码@H_502_1@
首先我们要知道three.js的下载地址它的地址是： nofollow" target="_blank" href="https://github.com/mrdoob/three.js">https://github.com/mrdoob/three.js。@H_502_1@
其次，什么是three.js？@H_502_1@
three.js的几个步骤：
@H_
502_1@
1：引入three.js文件（打开调试窗口，并在Console下输入 THREE.REVISION命令，得到版本号，成功）@H_502_1@
2：设置一个场景// var scene = new THREE. Scene();@H_502_1@
3： var camera = new THREE. PerspectiveCamera( 75,window.innerWidth /window.innerHeight,0.1,1000)；设置一个 透视相机
4： var renderer = new THREE. WebGLRenderer(); renderer. setSize(window.innerWidth,window.innerHeight); 设置一个渲染器@H_502_1@
5：把一个物体添加到场景中@H_502_1@
modelUrl是所添加文件例如：$scope. DView = cy3DView. newCanvas ; $scope. DView. config( 'canvas')@H_502_1@
6：渲染@H_502_1@
ok 是不是很简单，个人认为是这样，没有看懂的小伙伴可以私信我哦@H_502_1@
源码如下：@H_502_1@
0) { //当滑轮向上滚动时
fov -= (near < fov ? 1 : 0);
}
if (e.wheelDelta < 0) {
//当滑轮向下滚动时
fov += (fov < far ? 1 : 0);
}
} else if (e.detail) {
//Firefox滑轮事件
if (e.detail > 0) {
//当滑轮向上滚动时
fov -= 1;
}
if (e.detail < 0) {
//当滑轮向下滚动时
fov += 1;
}
}
camera.fov = fov;
camera.updateProjectionMatrix();
renderer.render(scene,camera);
}
function onWindowResize() {
camera.aspect = width / height;
camera.updateProjectionMatrix();
renderer.setSize(width,height);
}
function onKeyboardEvent(e) {
if (e.code === 'KeyL') {
lighting = !lighting;
if (lighting) {
ambient.intensity = 0.25;
scene.add(keyLight);
scene.add(fillLight);
scene.add(backLight);
} else {
ambient.intensity = 1.0;
scene.remove(keyLight);
scene.remove(fillLight);
scene.remove(backLight);
}
}
}
function plan(modelUrl) {
stlLoader = new THREE.STLLoader();
group = new THREE.Object3D();
stlLoader.load(modelUrl,function(geometry) {
//console.log(geometry);
var mat = new THREE.MeshLambertMaterial({
color: 0x7777ff
});
group = new THREE.Mesh(geometry,mat);
group.rotation.x = -0.5 * Math.PI;
group.scale.set(0.6,0.6);
scene.add(group);
animation();
});
}
function animation() {
renderer.render(scene,camera);
requestAnimationFrame(animation);
}
return {
config: config,plan: plan,};
}
})(window,document);
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。@H_502_1@ 原文链接：https://www.f2er.com/js/34075.html
