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 2560 0

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

admin 楼主

2019-9-1 18:45:09

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

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

x
  z- n# Y8 V6 B" j. \

: g# a1 T  D+ h0 L废话不多说,官网自己百度下, threejs.org ,入门很简单。
6 I8 P8 U& E2 R) X3 W: X$ L7 A  b* c$ E6 y: P( v
创建的javascript脚本如下/ q3 R( M) J: n! {  Q8 O; }

  E( r$ l! x6 _! o1 R GIF.gif
' w, L( g9 w" H* {[mw_shl_code=javascript,true]$ j. J0 R6 s! u9 T1 f5 C
var scene = new THREE.Scene();
4 h' Y) \% _& Y/ A3 Avar camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);: h# J0 F* a  I+ T& i1 }
var renderer = new THREE.WebGLRenderer();7 B& }3 I1 V4 D  F
renderer.setSize(window.innerWidth, window.innerHeight);
, U( M" J' }* X/ S' Gdocument.body.appendChild(renderer.domElement);
# \8 v+ l6 `, P1 L; g5 Q1 k( ^* S# |
2 ~, G0 a7 \! [9 h/ j* ~$ E  a& [// Refresh Issue
" s8 h; C% E$ z5 n6 Gwindow.addEventListener('resize', function () {
* Q. e) a( y; ~" `- q    var width = this.window.innerWidth;
3 p# ~9 E' e7 i" C& X; p    var height = this.window.innerHeight;
8 P% m/ n& H1 U5 _; |7 l3 C4 j( n0 W/ p    render.setSize(width, height);
7 A( e0 F) ~( @3 R; P1 H1 [% t/ I    camera.aspect = width / height;" v) q' T; c5 x
    camera.updateProjectionMatrix();! ^5 x0 }: I  X3 C
})
# @: {8 o4 F  \( t. z! ^& {3 u
4 d5 R" S+ f. H//orbit contorls4 o2 f9 M- Z" y; D+ @
controls = new THREE.OrbiTControls(camera,renderer.domElement);$ \3 [6 @+ L, g4 f) A
' Y% f. B9 M+ T+ h
//create the shape4 {: [' e% \8 a9 A
var geometry = new THREE.TorusGeometry(2, 1, 16, 100);  A- Q8 x; j+ n/ G# p' C$ m$ k
//create  a meterial
+ X' {+ D- }9 @" j7 g) L' kvar material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true, });
& B1 g1 _3 U. H+ t! l) B//var myMaterial = [new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load('image/plmhome.png'),side:THREE.DoubleSide}),];
# j" @/ d4 b  ]  q5 m  @//var material = new THREE.MeshFaceMaterial(myMaterial);
2 s$ l1 p' o# \7 q( r
, z8 S! X4 M8 N) w; e' Q  A$ \var cube = new THREE.Mesh(geometry, material);" Z7 f1 v( ^$ B, U
scene.add(cube);
9 L. K2 X  p3 {0 u" mcamera.position.z = 5;
7 h" C9 S2 X+ s, _8 G
7 b) c9 x, P4 n7 a
& A+ l( V" r% q# L; W3 b* `5 N; }  q0 X* ]( ~

4 V6 @- F' K6 N2 C% O5 n' {
. ~) ^! d# G. C$ l' O//rotate ' O: O# g, }! n2 J/ ^" l3 j
var update = function () {
  L4 ]1 }3 Q. |5 }) }    cube.rotation.x += .01;
% g6 {# n/ ?2 E    cube.rotation.y += .02;' h; r+ n2 K: I  m; y
    cube.rotation.z += .02;  y7 [  G. Z6 \2 L) }3 V
}
8 f% }- N- s5 O* V
1 D7 @( h/ _& ~# o6 p) Ovar render = function () {: L. i5 ?9 y; R. ]0 j
    renderer.render(scene, camera);
+ p0 y5 O  K, b0 b5 a9 w, k. ]}: p7 g/ V8 K( i- G4 P
% E' r! }2 K4 K6 k* b- T& W
; k+ b+ t" }8 @5 s
1 n  o: N" t( Q6 d$ ~) W
var Gameloop = function () {( x1 C+ V5 {+ Q! p; f/ q
    requestAnimationFrame(Gameloop);
5 {; \. R: m+ j/ Z    update();
0 e( c6 r. X+ I9 e/ J' L# o    render();' g' F+ Q2 y- u+ `: g
}# I$ d2 [, F: J. z2 ?/ `
# D: H0 v" S3 F% f3 b5 X
Gameloop();' a6 ?& r2 q) D% W
[/mw_shl_code]: q; x; L$ m7 |* d3 [
1 n1 N1 a- b7 R; L; y# S
9 ]1 z/ q; D" v( f5 w' C6 a
引入争取的html,
1 s1 Y, j8 ?" `" z0 h
0 }& `3 ^7 G  t+ e' v[mw_shl_code=html,true]<!DOCTYPE html>3 A. `' D: g7 ?! l5 z
<html>" E! e3 D6 M$ H" B( @" e- Q- _  ~

* P- |4 D/ F( Z( m8 n) j<head>/ Y1 d1 b  I: U' O, n% v; R
    <title>hello ThreeJS</title>( d, O/ z$ S9 m4 ?- [
    <style>  k' \/ T$ j* |. y
        body {4 F- L5 W) r' S/ O5 L
            margin: 0;
# I- y' \* Q8 w- w' z. d% |        }
0 }' U. x5 a7 [9 ]2 ~9 i. v, Y* l! \# c7 [2 o; t
        canvas {8 r8 y! ]1 @9 D  m
            width: 100%;- X' W' o: E% C. p& F  j, Q
            height: 100%;
) Y4 k* h* P6 v( d4 j        }
+ ^; N' ~# Q: a; v0 k: l5 f! p0 @' `
4 a7 g+ Y1 m; h        h1 {
2 {0 w9 Y3 i# ?8 c+ l8 N            color: aqua;
" C+ z! L! S; ~+ R* Y/ m        }
$ Q. W- l* v9 Q    </style>
7 p( z( V% g+ |3 r  i) L</head>
0 u  c5 ?8 ~6 D: p. W; {' u0 @5 N3 x1 N- B; P# _# L, s: Z% W, g! I
<body>
+ I& h# {3 E4 Y/ P  D <script src="js/three.js"></script>
1 e! d' _% {& C8 `    <script src="js/OrbitControls.js"></script>7 p$ ^3 p. U' e3 X0 h" ]
    <script src="myjs.js"></script>
' _6 W, h) B. s- @  
7 o: k7 u2 R( }4 a' T) W% r' A2 [* I! I! |( Y+ H

0 z! }4 F4 e, l' _, f0 M
9 E/ p) w$ ?9 r8 m</body>& C' C/ o# b2 ?9 ~; C
5 v% Q( ^! Z6 {5 ~4 v& Q$ O& O$ k
</html>[/mw_shl_code]. q; i1 ~0 j& {& o/ h5 @
; Q! p5 a6 y3 Y% W, T3 b3 \
效果点击这里:8 e, M2 n* n9 E9 o) z

# ~: J, c7 c  X6 v; h2 m3 chttp://plmhome.com/doteam/lesson1.html8 b" k" }. [. ]5 s; B/ l
$ ~, n9 J2 H3 z; X
; e  Z# ^. S! p4 O
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了