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

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

[复制链接]

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

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

admin 楼主

2019-9-1 18:45:09

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

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

x

. U% C, Q3 v) L
9 z6 ^: P8 {) z, j8 @废话不多说,官网自己百度下, threejs.org ,入门很简单。, M& ?( h$ U& ]$ q* F' o
: f2 {% B  D9 G& w2 w. o" }9 \- D
创建的javascript脚本如下
* B1 N9 g; Y9 l4 H7 I
; O3 b% x( ?+ j  C+ f6 N: |5 \ GIF.gif
7 {% k% q. ], n. X. g$ c, ~[mw_shl_code=javascript,true]
9 X3 O; B4 ^8 U6 l9 u3 @# Xvar scene = new THREE.Scene();
! W1 z$ b2 n' f2 Q' _9 {2 Dvar camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
) Q7 |2 x0 e9 H* [$ p8 p* ]1 @var renderer = new THREE.WebGLRenderer();
# f$ b" q8 i) brenderer.setSize(window.innerWidth, window.innerHeight);
* \2 \5 y4 G5 w; H0 P( O6 Z0 zdocument.body.appendChild(renderer.domElement);; N. ^' Y" M4 T9 b& x
/ F" L* R3 J4 I$ d- ^1 ?% j' r
// Refresh Issue
) l& a0 G1 c8 A( x' y6 l, zwindow.addEventListener('resize', function () {
: r2 l7 I) j7 N4 N5 l; q' \    var width = this.window.innerWidth;
$ s' H" e7 o+ l9 e% @' o    var height = this.window.innerHeight;
, m9 [9 @( E$ C' [2 X- n    render.setSize(width, height);
# F& E( n- k* U& ?% ]    camera.aspect = width / height;* Z, Z0 ^- j: q( a8 K. }2 S* i
    camera.updateProjectionMatrix();7 V2 Z1 v( i$ ]) ]% {
}). V/ S; _1 }4 V4 o5 g+ g

$ m4 S1 u  _& d9 c//orbit contorls
3 y! u4 ~2 X9 S, F5 [- lcontrols = new THREE.OrbiTControls(camera,renderer.domElement);
2 D- A+ l5 ~0 d3 g" [7 ~) N
% y) g) P5 a/ @+ o( w//create the shape1 y& M* j+ [( i4 E* n7 ?2 ]: ^' q
var geometry = new THREE.TorusGeometry(2, 1, 16, 100);
/ |- a3 h5 f. |* I//create  a meterial
# S2 L. r, R9 Q; j2 Tvar material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true, });
  \& D% G6 i/ |3 I: @4 t//var myMaterial = [new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load('image/plmhome.png'),side:THREE.DoubleSide}),];( y' {& H1 [" S7 @3 e* Z8 t" o
//var material = new THREE.MeshFaceMaterial(myMaterial);
: U6 w" m& R& @) Z5 x2 P8 E+ ?# I: d
var cube = new THREE.Mesh(geometry, material);
/ M. f- i+ V+ iscene.add(cube);
  }) m( P$ p" W+ Acamera.position.z = 5;
0 H3 A! R' b, a* g- l2 J
* h9 b) n# [! g2 r% {5 R
2 _* V  _: d9 |- y0 D
8 \* U: |0 w3 M+ P5 n
8 |2 p( _  _* w! R8 k5 a" g
  W/ C* [5 }" Y: Z3 T//rotate . j4 D4 m0 B  ^  Q
var update = function () {6 ~' L* }, O5 U" w0 O1 |6 _
    cube.rotation.x += .01;
- J+ V8 s. `7 N, m5 g7 H7 G+ y    cube.rotation.y += .02;* [4 C3 |- ?! t. T
    cube.rotation.z += .02;; _! J, l% S+ ~% t: @1 f  R
}* L9 h, `. N* R. L1 B
6 F) c: @9 L6 T2 |, ~' Z% s
var render = function () {
( x8 z6 `. y8 I0 X5 i5 z: i) g    renderer.render(scene, camera);
5 g+ I% d) {$ \, R" k  a# w5 L}2 ~5 l- q! ?' B* J5 M

7 h& c* Y8 I, C/ V, n; {, j4 w8 y! f
. k/ r6 `6 E2 I4 @$ `" Y% D
var Gameloop = function () {
. k: T7 E9 W  O. o, T' a5 Y) l    requestAnimationFrame(Gameloop);
/ x. X* t) @6 Z- L) e- q    update();
) X7 H8 F8 k9 b4 ?  [; L, u    render();  i$ t+ u' y' V. e. g+ c, L4 A4 [  Y
}- \4 E% e, X+ j3 R- S9 Z
0 S; A1 k0 |7 E" z  F; m8 A. v4 F
Gameloop();
& b8 p- B( Y4 F$ r[/mw_shl_code]
% A% Q, `7 O& M( ^9 J" r+ K
; K! x2 ^, Z2 l5 i& k- u  A% U3 o1 k" @9 R
引入争取的html,& l: D# d7 w3 x+ N
# B( H* C" G: E+ M& n+ J
[mw_shl_code=html,true]<!DOCTYPE html>
' y& O( `7 x2 Q: [+ i. x<html>0 j! e! B8 s, N! O$ ^& g  o
( ~: X# V( c8 ]! B2 ~' \4 e! F9 E
<head>, `& Y2 C* H+ a* m# _  i8 P
    <title>hello ThreeJS</title>
( l- h% n( N* Z( B# j" P: ?    <style>$ ]6 H: g, o( J# E7 k& R5 b9 K9 Q
        body {6 P1 R! Q. s1 T8 V& b- J
            margin: 0;
' T, G9 F. X( ~$ z$ ?- M        }, x2 g. ^' A) k& _& k+ f- E
3 [& M- `6 M! }  W
        canvas {$ Q1 w2 ^, P0 E' ]; L3 q
            width: 100%;  v2 _. e1 \6 y- U. Y
            height: 100%;
* P) `+ V  }( V" n- V/ {; f        }
4 A: m3 t/ c% B* U: E9 ]6 T! j* o
        h1 {
4 X- Y0 q4 r% N" V+ e            color: aqua;4 l& h" W8 k6 K/ w
        }
" m# c+ ]8 U( H5 v& r# \" u    </style>, m  K0 `5 P3 L# Q+ ^& k/ f) a
</head>
, G% e9 l8 c8 s7 p% @. b1 V5 z( n
# ~8 M% q( ~% _# h) X* D<body>
( _) b3 R( y  d; D/ h5 { <script src="js/three.js"></script>
8 ^- ~2 G" I0 y/ z    <script src="js/OrbitControls.js"></script>7 j9 u  k4 L) _( v
    <script src="myjs.js"></script>4 A6 x  o5 `# L. M0 L: V( [1 z
  3 [0 ^9 r  G3 J7 o5 Y( T  S1 N
6 i: T" {8 C( z1 c  D
4 H3 F% E; I& T+ \* L' H$ Z* E
$ R& d2 a# b0 K+ H
</body>
% `$ o; X# }* F: C7 q. |7 y9 \2 ]& b! I, u, k
</html>[/mw_shl_code]: |2 H1 ^5 I. @
2 _! H/ V; K/ j. M( V( h
效果点击这里:
3 x: V' U: _* H1 [2 W/ E" X0 O& j4 H( w1 F) r4 e" p
http://plmhome.com/doteam/lesson1.html. T# j! N" V% M/ e6 u' q
. @5 b+ w: N0 a
+ P( M3 L* B( ?6 q
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了