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

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

[复制链接]

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

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

admin 楼主

2019-9-1 18:45:09

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

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

x

4 }- E( }9 R  `' V& k* T6 ~, V( x5 A# m# K, K
废话不多说,官网自己百度下, threejs.org ,入门很简单。
, f$ z9 {% ^$ S1 s! ~3 B+ c3 A% v6 L# Y) V: i
创建的javascript脚本如下1 R0 I0 s/ o, k5 H( `* P

/ C6 l* H& Q9 ~( G" ?5 T GIF.gif . a! c; l. m+ H' h- I' Z5 H
[mw_shl_code=javascript,true], N+ w6 W# H# [
var scene = new THREE.Scene();: ?' q! z5 }) e) T" w8 G, v
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);( _1 p: N/ h: Y& \
var renderer = new THREE.WebGLRenderer();
& e+ |! `+ d! A# {" [+ S% mrenderer.setSize(window.innerWidth, window.innerHeight);% A" y; B' S7 r, f  b
document.body.appendChild(renderer.domElement);/ s/ a  P5 r8 m9 c
: d' }0 V/ W) X
// Refresh Issue % u- Z5 \4 C4 O" w
window.addEventListener('resize', function () {" f" B# \& s: n. ]
    var width = this.window.innerWidth;( l8 ~; S! a% e  v: B
    var height = this.window.innerHeight;
  u1 O* s! P  j2 N! O    render.setSize(width, height);; ^4 I( u9 Q* V+ c( q
    camera.aspect = width / height;3 ^0 Q5 U! \: t& t- ?+ W
    camera.updateProjectionMatrix();
% k; A+ w. Z2 p6 m' h2 t})* q: w! U% ?7 x+ m
# a$ p. g8 k% a; g
//orbit contorls
' F3 s; k* g0 _7 bcontrols = new THREE.OrbiTControls(camera,renderer.domElement);* ^" l. ~2 s% Y: J! B

$ B  }& G9 N& X; g: z//create the shape
1 J2 y: Y, Y1 D. Z: lvar geometry = new THREE.TorusGeometry(2, 1, 16, 100);
1 ^% l, s6 [3 x7 O//create  a meterial, I3 ^; s* J* U5 N
var material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true, });
) z3 I- k/ o  ?6 O/ F% ^9 ~//var myMaterial = [new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load('image/plmhome.png'),side:THREE.DoubleSide}),];
/ v& J5 D+ |  D% ~3 c. W4 F//var material = new THREE.MeshFaceMaterial(myMaterial);
! o/ Y; a' k. H5 V" G
4 P5 F. p7 w, e7 v3 |1 \# e& w5 \var cube = new THREE.Mesh(geometry, material);
; o: C- ]- r2 S- ~scene.add(cube);& f# V0 B6 g4 ~1 Q/ O
camera.position.z = 5;
- e" h" {' @  }0 d7 g2 K% |5 m0 Q
8 T/ c4 M1 p* f$ {* b3 X8 R# s) W+ }* E# Y) P0 @4 J. ]# N( @

! c+ V/ X9 r2 r) q4 a
+ \0 z9 [  H' D3 f- |% \; F6 _4 u8 y4 f4 w! v* ^/ b8 |9 o- l
//rotate 1 w+ `- e3 Z- B- p! J
var update = function () {
3 u1 r) z0 K* C( [    cube.rotation.x += .01;
8 @9 ]: Y1 X# p+ ]) e    cube.rotation.y += .02;9 S4 @; \* V$ C
    cube.rotation.z += .02;
# E8 ^) K1 C/ i5 K$ ]" q, D5 C# I}% |" A; e; F3 S3 c& v. g

8 t- P6 v% k) S: ^var render = function () {
2 @3 ]+ X, X& I' u! q8 {    renderer.render(scene, camera);$ z1 k/ k9 f9 z: `" y1 g& U
}0 I  W2 ?6 C# [: G: L, R- }0 ^1 t

) y' j( ^2 V$ d' d
7 C1 v( Z' i) x! U& p7 ?  L: R! `- D0 |* y
var Gameloop = function () {9 }( _& y9 z* _5 @- j
    requestAnimationFrame(Gameloop);
# F1 R( k4 c% |- B    update();
$ u2 `; J! D/ u# Y# T2 X, J    render();
" o1 `+ L  L2 A% v& L9 N' L}
' o( ~  R' H% S3 V. l; X% v2 X
1 `$ u: D  f4 PGameloop();$ N5 Q6 ]; x* u! D* J' _# X  H5 I
[/mw_shl_code]
6 U* z. X) M! w- Z+ n5 Y& g  ?& d9 K( T6 C3 z5 [$ R
" l4 B; ]4 G4 p. L: L" a- C
引入争取的html,
* s7 z8 g- ?9 \' h/ G5 g5 j. p
" P5 r) S6 G" N& k[mw_shl_code=html,true]<!DOCTYPE html>
) Q+ I4 r7 F; k5 l<html>
  f  E& O- E4 x) g3 Q, c- X) Z: U4 e- H- b- A' u" _9 @7 ]3 |; \: z  |
<head>, `2 `$ p$ W- N5 N
    <title>hello ThreeJS</title>
) q% D) X8 h" ^2 ]3 v3 ]6 q, x    <style>
  o) O! C3 K+ \* ~        body {6 [9 ^2 `' Z4 K4 G, @
            margin: 0;
- \( F/ _% E: A7 S0 f# |        }
+ d& B3 q; ^0 \" F1 W3 e8 W4 K  H
# v/ ^' I, |" x1 N' @0 Q        canvas {
& y" u! q, V; ^8 o3 m            width: 100%;
9 h* O# P& W! S2 W. `1 v            height: 100%;& d! Z  n/ p" q6 ]
        }& c' k( w$ i8 G& |6 q
% g* o! \( A1 f. K: A3 B
        h1 {
' F" B9 p/ r  Z/ F            color: aqua;) Y( ]9 V7 c2 |3 l
        }  H. s  _$ e* q6 w- H. v; m
    </style>' {9 U0 L$ O  m
</head>% u( n1 p! @+ c: Y& \, b& Q2 f
7 V3 \& v! |% z" d' h( D9 K
<body>
8 B, V& q) G4 G- M8 g <script src="js/three.js"></script>
2 E! t, }6 t$ E1 |  A    <script src="js/OrbitControls.js"></script>- B4 \6 @( q& Y
    <script src="myjs.js"></script># Y9 s5 o, N# ^: _
  . u  J: u, ~0 R7 L2 A! P8 q

! l# U9 u( a% c1 F
6 i3 K, r# R; A7 i" u0 o. r$ s0 w; ~+ n9 n" T2 @  a
</body>
. _8 W# u8 [% c. q& I6 I- G, \1 Q0 F3 l. d" v
</html>[/mw_shl_code]$ f. V6 U0 N: x
; O( @3 h: F/ ~  T) l! U
效果点击这里:
: ]1 J+ s( r( J; L; \( E. W
7 h0 X. G0 r* Z/ \2 i1 b) V2 k" ahttp://plmhome.com/doteam/lesson1.html
  `' r7 e$ O, A( v% T3 E
) G& t3 w6 D- I4 |
3 s  i4 k; r+ U# Z# M$ ~: @  T7 O
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了