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

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

[复制链接]

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

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

admin 楼主

2019-9-1 18:45:09

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

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

x

! b, E: B. I5 P8 p5 J8 Z
* P, \1 \  c. o9 e, N废话不多说,官网自己百度下, threejs.org ,入门很简单。
( D; ?" O2 ~# n0 C9 G" X
- s2 K7 U! ~# @1 d创建的javascript脚本如下
; h( `# c! t3 y4 ?5 o4 @+ U  k# L
% ~( T+ H, @( D' E GIF.gif
' U) u! {2 N" s! E[mw_shl_code=javascript,true]
) Q% y0 x- u3 K+ B% U! j% l- Hvar scene = new THREE.Scene();
+ }% y/ F" c3 l' n0 x- i! Fvar camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
: ]$ H" m3 w2 @  mvar renderer = new THREE.WebGLRenderer();$ f3 g+ ~. V& @, [0 E2 O# `
renderer.setSize(window.innerWidth, window.innerHeight);! V  Z) j! Z6 j( F6 A
document.body.appendChild(renderer.domElement);0 ]) M/ [& m5 ^, b8 H
% ~& w0 F+ i- R% Y/ o+ U% r
// Refresh Issue
& x4 {1 G$ {6 m4 L9 N5 |; d2 Ewindow.addEventListener('resize', function () {- C, _* Z8 A' Q
    var width = this.window.innerWidth;
4 ?; j/ v5 V0 \8 q7 V0 J    var height = this.window.innerHeight;
$ r( L& b2 W4 b    render.setSize(width, height);$ R6 }7 Q2 F0 {* e/ D$ }
    camera.aspect = width / height;% t7 t7 g: A& U8 |
    camera.updateProjectionMatrix();$ `; v- g6 \& R
})
, E1 o" ]; c  f4 l. l8 ~& S6 ?6 x" I; |9 Y" Q. M' `
//orbit contorls! ~; i, Y8 G* C
controls = new THREE.OrbiTControls(camera,renderer.domElement);
. L( _) Y9 H, V' R$ _( ~& Q8 J( p: S) k5 z8 v- R9 u
//create the shape) s: ?2 b: T# `# p3 Z
var geometry = new THREE.TorusGeometry(2, 1, 16, 100);
3 f& F2 k: z+ Y5 d! ^; X% n; v% |//create  a meterial- c5 Y1 Q) o: n; g6 v+ P/ _- }# N6 e
var material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true, });
4 k7 x. l; v" F3 ^9 f# H//var myMaterial = [new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load('image/plmhome.png'),side:THREE.DoubleSide}),];; c% Y! j  V/ l3 G9 Y5 _
//var material = new THREE.MeshFaceMaterial(myMaterial);
6 k1 ~  h" F1 c7 e
) J9 m9 d" s1 x" m3 }& g8 Rvar cube = new THREE.Mesh(geometry, material);* ^  P8 B& N& \$ O
scene.add(cube);
0 `# K% @: p7 e6 u* a1 Wcamera.position.z = 5;9 v3 ]! m, E, B
2 U& G+ V9 P0 [& c" D

3 b6 M1 |! O. }) Q0 C$ Q
- `' i8 _+ N) i- A3 a& p5 R) R* u: c# @

5 `' Y0 C& K0 i) Q1 t  T: _, j9 x: ]//rotate 7 C3 g! S! P! `3 M
var update = function () {8 X5 E0 O) a- u2 k1 O8 i: i) q; Z0 F) i
    cube.rotation.x += .01;
5 R& g9 J' v2 F; q5 s3 }    cube.rotation.y += .02;: T5 q  e" _( v
    cube.rotation.z += .02;
  j2 r9 ?( S. \+ q" W4 f9 T/ P}2 c) t& _6 U$ X4 ~6 E9 w

6 X2 o$ j. c/ G- ^; N) V+ ~) s- Zvar render = function () {
2 {* s: P2 ]7 \% n/ b( J4 _    renderer.render(scene, camera);) Q% U6 Q+ v" j1 ]" ~2 z
}
" N$ ~2 |8 n  {0 _
! c# g2 m4 _& v7 A' G( L1 b% K( u; _2 T+ f; h* ~

) L* }( Y. ~  T" \& wvar Gameloop = function () {" D4 T5 [8 I# U) h" R8 \
    requestAnimationFrame(Gameloop);- j" \/ _9 y- E
    update();- H: l4 n% W0 |! v% ^$ C( o, \
    render();+ h8 k9 R4 }0 w( |0 Y' X2 z3 D# e2 j3 `
}
3 X' w6 t: H; p6 Z- x! d; Y. {9 A' i2 f  X
Gameloop();
/ \* \9 k* Y" {# K[/mw_shl_code]
$ i! `1 {" k5 N- N, Z9 g" F' Z6 g( z* p3 q1 w

9 j: ~1 K: R. o6 `3 z7 O9 D+ a引入争取的html,
" p8 k% ?- g! G; I) S6 \1 n# a  S7 M5 F( G) h
[mw_shl_code=html,true]<!DOCTYPE html>3 e- z5 K( N/ t* t* I; {% r4 ?/ m5 `
<html>
$ E8 J0 ]& N4 j$ P0 A1 h# U6 Y8 G
" {- ?+ K) A; }$ G. Q( D! X<head>
9 g% M3 S9 D8 Q9 P    <title>hello ThreeJS</title>
2 Q4 B1 `7 O' S- l* d+ O. a    <style>
' P6 H/ @, V' ~' m        body {
4 U) \) Y' s6 F' u/ N5 m            margin: 0;- b% \( I# H0 w0 l5 \, j0 p
        }
4 g- O" k: `, r. B/ S
, q9 h" E- I3 d* ~. m% N9 r1 @) @% ]" C        canvas {7 K% k6 h/ C" e% B
            width: 100%;9 {. v+ E% r6 i2 Q5 g
            height: 100%;
  ~! |5 ^- k. i4 u* h8 W1 j        }
: Q( P7 j3 G5 F% Y
+ I0 W  H% s- q        h1 {. p0 V: ^5 c5 K/ E: s% G/ A
            color: aqua;
) r# c% }2 V7 M! ^5 v6 D6 O        }2 P5 R3 K# u4 x% t6 S
    </style>
% @) x* @7 P! M. O% j4 |</head>
6 N1 S( L, t2 \% d8 L
- n; p7 G2 S) F* [<body>  f$ c9 N( o6 ^$ z3 E) Z6 \# p
<script src="js/three.js"></script>
1 q5 u6 z$ D! t" U4 E3 A    <script src="js/OrbitControls.js"></script>, p  p7 f/ M% L$ j5 K* Q
    <script src="myjs.js"></script>
. Q3 u9 _& w6 z: j4 h  
6 @+ @, Q. t1 B3 K+ D( ~
: ^) _2 }% i9 E6 G0 B5 F7 @9 I4 F1 R+ F: [$ R$ P
: v, V/ p- r0 I' X3 x8 I2 Z5 Y% L
</body>0 F4 e3 d  ^' K. h2 l/ @" W

, P4 c: @! [( M</html>[/mw_shl_code]$ A& @8 B1 A, T6 }
1 ?! Q% D4 X! B$ h6 x) u# q
效果点击这里:
" @7 \; F' R) W6 k4 y' S) V" M' p2 }, `. f
http://plmhome.com/doteam/lesson1.html; ^1 Q7 ^& a& J9 p

4 ^5 `! b7 r& E( ?6 \8 U* O8 @( @+ I+ I+ ^% ?5 _2 m
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了