PLM之家PLMHome-工业软件践行者

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

[复制链接]

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

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

admin 楼主

2019-9-1 18:45:09

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

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

x

8 Q' t# j+ K2 o7 F+ o3 c# K8 ~, h
6 f; M8 p  Y% j5 V废话不多说,官网自己百度下, threejs.org ,入门很简单。
* }+ a( O# h5 p( H" `7 N' c1 E, M* c3 r, [1 m5 d' M7 q
创建的javascript脚本如下% n, _; U4 W; m

. ^! X( f) P% a' r1 G" q5 { GIF.gif
+ ^. R( l! @" e  ~9 t* B[mw_shl_code=javascript,true]6 R% |9 G( q* V/ A( I" I
var scene = new THREE.Scene();
4 P4 h$ t1 c% C: E" Tvar camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  f( R* o" B: _, R( {- yvar renderer = new THREE.WebGLRenderer();
9 L+ L/ P  m& q3 V- Wrenderer.setSize(window.innerWidth, window.innerHeight);
6 `# j4 \, g0 z  C( R* U' G; ]6 fdocument.body.appendChild(renderer.domElement);, D* _1 L8 R8 Q% j. N
& u2 Y5 F( J0 |9 ^! j+ g* p
// Refresh Issue
! I2 D" i" U; o+ l' D* twindow.addEventListener('resize', function () {. s9 [7 Y5 l& E9 `
    var width = this.window.innerWidth;
5 f- c; P) K$ l4 `- U! ?8 o) y& N    var height = this.window.innerHeight;
  L+ o  d% E" d) `3 ]/ d    render.setSize(width, height);
, y' o6 Y5 l9 \" g. i. v    camera.aspect = width / height;
6 p" m# O( b: {; Y2 A6 z: N) A" [    camera.updateProjectionMatrix();4 o- j4 Z( c2 [5 ^; m  D2 _
})- @# G/ u  Z# l. s
, I; @% i( K6 X
//orbit contorls
; z+ \# ~/ j2 G; i+ y6 d" ]7 pcontrols = new THREE.OrbiTControls(camera,renderer.domElement);8 G6 ^8 g; I3 c
. T; T/ @% v3 V6 B
//create the shape# U1 D' F  w* A9 V+ i7 h, |  A. }$ J
var geometry = new THREE.TorusGeometry(2, 1, 16, 100);' g3 v" ]3 m' S6 v
//create  a meterial
1 f% }7 M# J$ b$ B# ^var material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true, });% i! ~/ u% e$ c/ ]/ q
//var myMaterial = [new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load('image/plmhome.png'),side:THREE.DoubleSide}),];: i* |7 V  e5 j2 m  ?
//var material = new THREE.MeshFaceMaterial(myMaterial);
* y/ R3 J% l3 `' a1 F  b
" b' G" n4 Z+ N# Y8 {var cube = new THREE.Mesh(geometry, material);! u' n, q: ?( M. p. ^
scene.add(cube);
5 M5 U& E& o' Vcamera.position.z = 5;( H5 \, h: C7 l7 p/ S- E1 v& E

  U* n( D$ {' P8 `3 f8 K& `  D/ N- f/ W! V$ s
' N( y3 U4 Q' j0 X  L0 x  s7 ~7 m. x

4 J6 |. F7 u1 n  G' `6 x2 {, d: |& Y/ i1 U1 ?
//rotate & M6 }1 e" {7 B3 v' P+ c' M9 O; e
var update = function () {
+ p! T6 P9 a! w5 ]: o    cube.rotation.x += .01;" X4 ?$ o+ u, l" U9 y$ f- ^
    cube.rotation.y += .02;
% c+ c. z: s$ ?3 C* x) Q    cube.rotation.z += .02;& }1 ?* {, ?5 x3 A8 L! A4 F  u
}" {5 d! J3 a# M' t9 B& q

, G5 A$ i) |, P$ A, b4 b! @1 ?var render = function () {
# _0 K) m( K, d- }" j    renderer.render(scene, camera);
$ l+ U; H4 S2 D}4 @4 t) k+ n8 M- v% v% h9 P' c2 ?
: {, g, E2 I: q) X
/ j. O$ u! h; t' r1 J8 Y

8 b# l% _" @( p: f' J( Tvar Gameloop = function () {$ l3 J' O: N' Y$ X6 J- S; R
    requestAnimationFrame(Gameloop);
+ R* x2 O0 j0 m; `0 Y    update();5 F+ Y/ S3 Z' `( M: P' c
    render();1 L: Y' o! g2 h1 v' Y2 _8 t0 I
}
" W- ^7 F* F$ B  X. T4 I$ s0 u3 W& F/ i3 G4 f* v! M/ B/ {( a9 x1 K
Gameloop();
* [: h3 D; @5 }# O[/mw_shl_code]
- i/ n% c! F+ U" |6 U! f1 K3 }( G( Z" h! d. @8 ^

! g% b& m# g+ U* W) C8 k' Z引入争取的html,
2 V5 M/ G$ Z/ [" X4 K
$ P: o& k& f9 N: b" O( r9 U[mw_shl_code=html,true]<!DOCTYPE html>
! ]  [5 i, l' w<html>* k1 s8 K! g' a+ n! N  O) A" \

1 w1 W3 {% h! z" c# M; U( K/ T. [<head>
9 O: T/ P: @! Z9 s( `" R- ^" X4 b    <title>hello ThreeJS</title>
, v; Z+ K3 g+ b% g3 I/ _    <style>% l6 S: T4 w& s' K: c
        body {0 X" ~- U2 z7 i7 ~
            margin: 0;# G4 T+ E& h# @$ E
        }! d* e$ v7 A3 I6 h" O, W

6 Y' _3 B/ [% T" @  N. Z  W2 \' j% I        canvas {
  p" _8 i; }: \4 ~            width: 100%;
1 S. R$ P% `8 \2 e1 W* ~9 Z: l            height: 100%;
# F  A1 u1 z6 J/ K/ a        }( ~/ O4 i; @# D
- p  {; Y' T; {) e, o3 @9 k+ [4 p5 y
        h1 {
# L6 K8 v# k- M" V( [( M( N0 n3 Y" ^7 Y            color: aqua;( ^2 R1 t* m9 o4 \7 K
        }' k- {& c& P6 ]% E$ z! O+ A
    </style>
: Q; _* @- c/ d# y2 p</head>
5 l" A, A  G3 g" w) n. I; W. b
8 i# P4 ~" R! d$ G* H<body>
4 L# l; R/ p9 Q$ _! |' i4 m <script src="js/three.js"></script>* n7 X+ _% U, u1 q
    <script src="js/OrbitControls.js"></script>
" }- e5 d' ~% C7 j, }! E    <script src="myjs.js"></script>3 b6 N# u6 x. b- a
  
; f/ @8 w$ t$ E8 a) |
/ n$ W# t# p& {- v" F, W  ~5 w; |4 N& l; m6 n$ A. }* `, t0 Q
/ |/ m. t9 u8 {9 m- V
</body>; r! _6 E$ N, @- O+ _
# I; N/ w* K+ O6 l4 d
</html>[/mw_shl_code]
! ?" m' N$ s$ B& Q0 `0 J) M& @. K  c4 o$ I' `
效果点击这里:+ C$ f  b7 n  j3 u( Q8 a! U( j

0 }$ n& m+ R; \9 ohttp://plmhome.com/doteam/lesson1.html
) P, p6 O$ H, r8 k) f
* z! P8 x; m/ G/ [2 v4 }  b  c3 W
9 g$ `3 e- k2 n" T1 s# {0 u
上海点团信息科技有限公司,承接UG NX,CATIA,CREO,Solidworks 等CAx软件,Teamcenter,3D Experience等PLM软件,工业4.0数字化软件的实施\二次开发\培训相关业务,详情QQ 939801026 Tel 18301858168 网址 doTeam.tech
回复

使用道具 举报

发表回复

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

返回列表 本版积分规则

  • 发布新帖

  • 在线客服

  • 微信

  • 客户端

  • 返回顶部

  • x
    温馨提示

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

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

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

    我知道了