PLM之家精品课程培训

PLM之家精品课程培训

联系电话:18301858168   |   QQ咨询:939801026
NX二次开发培训

NX二次开发培训

UFUN/NXOpen C++和实战案例

适合初级入门或想深入了解二次开发的工程师,本培训结合ufun,NXOpen C++,大量的实例及官方内部的开发技术。
公众号二维码

关注公众号

点击扫描二维码免费在线高清教程

课程详情
Catia二次开发培训

Catia二次开发培训

市场需求大,掌握核心技术前景广阔

Catia二次开发的市场需求大,人才稀缺。掌握开发技能潜力巨大,随着经验积累将在汽车、航空等领域有所作为。
B站二维码

在线原创B站视频

点击关注工业软件传道士主页

课程详情
Teamcenter培训

Teamcenter培训

全方位培训,从基础应用到高级开发全覆盖

涵盖用户应用基础培训、管理员基础培训、管理员高级培训及二次开发培训等全方位内容,由多年经验讲师打造。
QQ群二维码

加入同行交流

点击扫描二维码加入QQ群

课程详情
×

PLM之家plmhome公众号

课程涵盖: PLM之家所有原创视频

×

关注B站视频

所有高清视频一览无余,全部在线播放学习

×

加入PLM之家QQ群

同行交流,疑问解答,更多互助

PLM之家PLMHome-国产软件践行者

[前端框架] Threejs 基于webGL的3D开发神器

[复制链接]

2019-9-1 18:45:09 2584 0

admin 发表于 2019-9-1 18:45:09 |阅读模式

admin 楼主

2019-9-1 18:45:09

请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!

您需要 登录 才可以下载或查看,没有账号?注册

x

: K1 e( R7 V: D9 Q1 S+ \. B
! F# U+ a# X" a' f) V废话不多说,官网自己百度下, threejs.org ,入门很简单。8 }- c% f% j! k6 H! E% M
' i6 B' d4 I7 N1 x; v6 a
创建的javascript脚本如下
2 N. G" M2 F& u/ Y8 v$ s
7 n- c& W/ d7 m- k GIF.gif , c+ J' F$ R5 s0 O, c7 Q& P
[mw_shl_code=javascript,true]4 R. W* ?. q) q# z1 v* e
var scene = new THREE.Scene();7 s5 L, {( t( u1 J
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);6 N; J/ |( p+ V& l9 t: l  n
var renderer = new THREE.WebGLRenderer();
8 @9 W' ?  [& `0 lrenderer.setSize(window.innerWidth, window.innerHeight);
5 S2 g( Y5 D, h% bdocument.body.appendChild(renderer.domElement);/ F9 R' \7 ~) I) v7 j

* [  d# e5 O6 P' E5 j; |4 H9 ^// Refresh Issue 3 ?4 f& ^% ]5 z2 r$ ~
window.addEventListener('resize', function () {
* b% K8 ~4 i: X" G& J    var width = this.window.innerWidth;
) D! M0 a9 f" f! U' @; q$ A    var height = this.window.innerHeight;5 b$ N. R0 C1 _$ A) v' f
    render.setSize(width, height);
+ ^) t6 G1 f) W3 @, K  v    camera.aspect = width / height;
+ k, U  D7 g! o3 ]3 \, e* d    camera.updateProjectionMatrix();' C" z3 `" M/ R+ w
}). p) @! e" [  O- O- y9 r" ]* Y4 _3 G

- n! Q1 k. v0 C4 Y//orbit contorls
) a% ]8 A$ F1 @& A9 h1 ~& q, B7 Vcontrols = new THREE.OrbiTControls(camera,renderer.domElement);1 K# z4 L* d5 q: b5 s! l
* _9 o( ^% h) x4 B
//create the shape- }" J4 D) ?; T( R' @
var geometry = new THREE.TorusGeometry(2, 1, 16, 100);
( c' ~6 A8 x! E* n//create  a meterial
) o: b& s, y2 b+ X: U8 Avar material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true, });$ I' M+ r6 d2 p6 e# i
//var myMaterial = [new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load('image/plmhome.png'),side:THREE.DoubleSide}),];1 ], P! l7 U* N& }' }* P, c* t0 d
//var material = new THREE.MeshFaceMaterial(myMaterial);
- i* x% S% b( [2 L' H5 u+ k4 e
0 M6 v# R' {0 d% ~# N; a7 w6 _var cube = new THREE.Mesh(geometry, material);
; k) V# h1 c% o/ }& ^4 }% nscene.add(cube);' |4 n4 r/ u8 Z  B+ n
camera.position.z = 5;' c1 q$ B$ ^9 y" K% p

$ [3 r3 d3 N+ J- p2 S$ A5 P! u; n5 h1 R- O3 s) Z+ G

# n. g7 d' a8 l# G: X7 |
9 M+ A! b! c& \% P) j- t' C2 ?, T% _9 l
//rotate
5 @% u$ E+ b# ^( Y7 [* Hvar update = function () {9 s5 X0 R3 y$ z  H! {4 p1 F
    cube.rotation.x += .01;. A5 E1 g7 ?% \+ r
    cube.rotation.y += .02;
0 w5 I; F" l- m8 f) P/ G. ?    cube.rotation.z += .02;. V& d; X6 y9 q
}' {7 g: l# s$ q2 c/ [

9 V, p& b# z5 x7 X( bvar render = function () {7 ~* Y) E! X2 w8 J+ `
    renderer.render(scene, camera);
) |- U8 D1 `) B- ^; p3 c+ l* n}
6 W/ y' `# ~) A8 j% f9 z; F  k7 ^! x- ?; e' O0 ?% B
. E; c8 ?  @6 Z5 D" R$ C
: @/ e: A4 w2 Q; K& i( o
var Gameloop = function () {
: ?' K& f) w5 s) X1 W$ }1 M4 T    requestAnimationFrame(Gameloop);
1 j+ X' k8 _, v: h& a4 W4 J5 ?1 n    update();( X/ |9 U, g! g  z3 k# h0 f
    render();
, k2 T2 p+ z& w! K$ y}* z+ h5 {2 z" e0 O/ M9 Q9 r' Z
7 i0 |+ Y% f9 }5 U% s5 a
Gameloop();" Q0 r" \) _0 }" Y( }" ], \
[/mw_shl_code]
; D  P+ b3 X+ ^! ^% a4 A4 x$ E' ~1 S4 g; u
$ N6 K7 ~6 B) i0 P1 g0 X" |
引入争取的html,' e* ]: l' f9 e- z8 u

/ X% `/ k1 N) N. I9 j0 H) M[mw_shl_code=html,true]<!DOCTYPE html>
1 \& |  |" ]. p0 `3 X- U7 u0 d4 q<html>
1 y/ t  }' r8 j" n. G' K. e; w
( Q( u% L6 n9 @1 R2 Q/ N<head>/ \( w; ]" E. D0 s
    <title>hello ThreeJS</title>
1 K$ A( F  l( L1 P- t8 v    <style>
+ a: m6 q4 I. f- ^- [; X( L0 r        body {; s! ?( ^+ ~6 ]( D$ c9 V# n+ `
            margin: 0;
) r% b9 g/ u/ y9 Z% n$ X9 y% |% c        }
  o$ T: B8 j% v, q7 m3 k( _& Z6 A" a3 K- i
        canvas {
* |, Q8 k3 [/ I8 f; o! t  h            width: 100%;
; U, O( }! P$ l8 @" Q            height: 100%;
% r6 q- a" }' l) n5 f, n/ y        }9 I1 ~1 i+ U8 r5 T

* ~6 `: `1 d. Q; k' Y        h1 {3 C3 l9 ?: Z0 S
            color: aqua;( E+ E0 x* ^- {# p+ a
        }1 z, l; |+ u$ d, j9 `" ?+ g: w( r
    </style>
  m3 L' Y- A% {7 [</head>
2 I. [6 a! R: k; q* D, E2 Q8 f* m. o, G! v2 G5 T1 E) Z
<body>
; t, W# H) g: X* H" Q. F <script src="js/three.js"></script>
. O! ]6 a% B9 L+ n7 Z, d. K; W    <script src="js/OrbitControls.js"></script>5 ?) I6 U- w7 r5 S" y5 j
    <script src="myjs.js"></script>
5 G* j/ q$ I2 {/ y) \  
/ j# l+ U" D$ f( U4 h3 R; i  B* _! Y, P2 w' A

/ D' L$ g; m! c" A- U1 v
# \7 x; x! q- r</body>
+ i# @- w6 k: P* K  u$ t
# `/ q* }) k% Y4 ~" S: ~</html>[/mw_shl_code]
9 c8 b' i9 o( ?( X4 J8 a7 [& H+ \9 A* {
效果点击这里:
- x* K% a+ `* g- `* I. O9 ?( Y' u: C
http://plmhome.com/doteam/lesson1.html( B5 ]1 \! |) f) \$ g, y
+ C9 j3 s  v* J7 M+ M

  }) \' W/ E' b
上海点团信息科技有限公司,承接UG NX,CATIA,CREO,Solidworks 等CAx软件,Teamcenter,3D Experience等PLM软件,工业4.0数字化软件的实施\二次开发\培训相关业务,详情QQ 939801026 Tel 18301858168 网址 www.diantuankj.com/ doTeam.tech
回复

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 注册

返回列表 本版积分规则

  • 发布新帖

  • 在线客服

  • 微信

  • 客户端

  • 返回顶部

  • x
    温馨提示

    本网站(plmhome.com)为PLM之家工业软件学习官网站

    展示的视频材料全部免费,需要高清和特殊技术支持请联系 QQ: 939801026

    PLM之家NX CAM二次开发专题模块培训报名开始啦

    我知道了