最近公司需要用tree.js实现一个3D图的显示,就看了官方文档,正好有时间,就记录下来。
由于我们公司的前端框架用的是angular,所以我就把我的treejs封装在一个directives里面。后面放源码
首先我们要知道three.js的下载地址它的地址是: https://github.com/mrdoob/three.js。
其次,什么是three.js?
three.js的几个步骤:
1:引入three.js文件(打开调试窗口,并在Console下输入 THREE.REVISION命令,得到版本号,成功)
2:设置一个场景// var scene = new THREE. Scene();
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); 设置一个渲染器
5:把一个物体添加到场景中
modelUrl是所添加文件例如:$scope. DView = cy3DView. newCanvas ; $scope. DView. config( 'canvas')
$scope.process3DUrl = data.result.data.engineering_stl_mcube; $scope.DView.plan($scope.process3DUrl)
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, 0.6);
scene.add(group); animation();
}); }
6:渲染
renderer.render(scene, camera);
ok 是不是很简单,个人认为是这样,没有看懂的小伙伴可以私信我哦
源码如下:
(function(window, document) {
'use strict';
var three = window.THREE;
var angular = window.angular;
angular.module('cy-3D-view', []).factory('cy3DView', cy3DView);
cy3DView.$inject = ['$rootScope'];
function cy3DView($rootScope) {
return {
newCanvas: new Object(newCanvas($rootScope))
};
}
function newCanvas() {
var scene, camera, renderer, controls, group, ambient, fov, near, far, stlLoader;
var width, height, keyLight, fillLight, backLight, spotLight, lighting;
function config() {
//设置3D图的宽和高
width = document.getElementById('canvas').clientWidth;
height = document.getElementById('canvas').clientHeight;
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(width, height);
renderer.shadowMapEnabled = true;
document.getElementById('canvas').appendChild(renderer.domElement);
renderer.setClearColor(0xFFFFFF, 1.0);
scene = new THREE.Scene();
lighting = false; //设置3D图的颜色
ambient = new THREE.AmbientLight(0xffffff, 1.0);
scene.add(ambient);
keyLight = new THREE.DirectionalLight(new THREE.Color('hsl(30, 100%, 75%)'), 1.0);
keyLight.position.set( - 100, 0, 100);
fillLight = new THREE.DirectionalLight(new THREE.Color('hsl(240, 100%, 75%)'), 0.75);
fillLight.position.set(100, 0, 100);
backLight = new THREE.DirectionalLight(0xffffff, 1.0);
backLight.position.set(100, 0, -100).normalize();
spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(150, 150, 150);
scene.add(spotLight); //照相机配置
fov = 40;
near = 1;
far = 1000;
camera = new THREE.PerspectiveCamera(fov, width / height, near, far);
camera.position.x = 150;
camera.position.y = 150;
camera.position.z = 150;
camera.lookAt({
x: 0,
y: 0,
z: 0
});
camera.lookAt(new THREE.Vector3(0, 40, 0));
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.enableZoom = false;
window.addEventListener('resize', onWindowResize, false);
window.addEventListener('keydown', onKeyboardEvent, false);
window.addEventListener('mousewheel', mousewheel, false);
}
function mousewheel(e) {
e.preventDefault();
if (e.wheelDelta) { //判断浏览器IE,谷歌滑轮事件
if (e.wheelDelta > 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, 0.6);
scene.add(group);
animation();
});
}
function animation() {
renderer.render(scene, camera);
requestAnimationFrame(animation);
}
return {
config: config,
plan: plan,
};
}
})(window, document);
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]