three.js 入门案例详解
最近公司需要用tree.js实现一个3d图的显示,就看了官方文档,正好有时间,就记录下来。
由于我们公司的前端框架用的是angular,所以我就把我的treejs封装在一个directives里面。后面放源码
首先我们要知道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);
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 怎么构图才有冲击力?拍出超强冲击力照片的十个脑洞图
下一篇: Python KMeans聚类问题分析