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

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

[复制链接]

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

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

admin 楼主

2019-9-1 18:45:09

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

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

x
6 Y  q$ r6 V0 U# }

% n! E7 Q% M0 ~! x5 c4 X( f  e废话不多说,官网自己百度下, threejs.org ,入门很简单。
' l4 n' s. r  a  x
% h# l5 ^) o9 w, C: d- r创建的javascript脚本如下
) Z4 }* p" z. R6 _
6 S: L; r/ M" [3 p" N- l3 ? GIF.gif ; a- U/ d( J8 i; n9 J
[mw_shl_code=javascript,true]
: i4 K6 v: J. J) ]var scene = new THREE.Scene();  g) d- Q, G" d- `4 s
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);& J* n+ s7 V, C! P
var renderer = new THREE.WebGLRenderer();( X$ J0 u) [5 d# S
renderer.setSize(window.innerWidth, window.innerHeight);, {! a! B* y2 R/ Y
document.body.appendChild(renderer.domElement);; d5 [% @6 \4 J' o

9 Z! Y7 n; r; l' B# g2 `// Refresh Issue
6 T7 O9 a4 A- o+ Ewindow.addEventListener('resize', function () {) ?( G! y8 H) W; u" f8 D/ J
    var width = this.window.innerWidth;2 \- h! P: G+ b; ^/ E% `
    var height = this.window.innerHeight;
0 J, z$ {  n# Q- v' g" p    render.setSize(width, height);
& o: N3 |9 [0 @' P5 l& G+ E3 f    camera.aspect = width / height;, l; R( l9 E: O$ V
    camera.updateProjectionMatrix();
% C; c3 o$ T( u4 n( j; y# S% T})
$ w" e7 b) l' I0 U# \* P1 W' _" H1 E0 ]. f. V( Q
//orbit contorls; e$ d9 `) \  O8 p. r
controls = new THREE.OrbiTControls(camera,renderer.domElement);; _' P' J) @9 [5 {. I% p+ n
  k: B. X, o: m* o- P8 R- z
//create the shape
1 `/ ]) u8 N" l7 o8 A! O7 s; Nvar geometry = new THREE.TorusGeometry(2, 1, 16, 100);
* K+ L8 _5 J/ a& \. ]1 {; G9 z* V//create  a meterial
; N9 ^, u  m( V* s0 y" m6 Hvar material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true, });* z# p$ p+ g( x6 g5 n/ ^
//var myMaterial = [new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load('image/plmhome.png'),side:THREE.DoubleSide}),];
, k+ o. ~% d3 u9 _3 x: s" G" S# Y6 ?//var material = new THREE.MeshFaceMaterial(myMaterial);2 }: Q8 ~4 b3 t) K  }2 V& Y* j7 }+ w

. o& J7 @  N8 C% X) zvar cube = new THREE.Mesh(geometry, material);- ~0 e  p3 W8 z
scene.add(cube);
8 ]; c0 \' Q7 E0 _camera.position.z = 5;. {# F5 V" t$ p' Z" T) Q. b" V
. m& }. O( w6 N( a4 `+ T! y
- s1 h. ?5 k5 i
) N9 Z, d, T$ H  z! M/ }

( F5 d7 u0 d; `: T9 @# V$ r
% N( D3 f1 U( f! `* {& z8 X" M- K//rotate 2 J1 ]$ ?2 z2 `2 \) D' q
var update = function () {
* D$ D: ?* M9 `$ J: T    cube.rotation.x += .01;& z4 U1 C; i. f  [
    cube.rotation.y += .02;
4 F" i/ Q) i# n" W6 ]# A- O    cube.rotation.z += .02;
/ V% ?- E" `3 ^}
7 L; d( U& Y( x4 R& D: J. ^: H7 [- f: o+ d* n. u
var render = function () {
) j* k5 Z: Z9 a9 U    renderer.render(scene, camera);
  I9 t, ?% F+ b, W! h# J( _1 s}, z% d  u' q. K$ t. E# ]

+ M$ P, H3 c0 `' A
) m; |6 j0 a  |6 Z( t' u7 p: J3 F' _
var Gameloop = function () {
* g/ h, X8 c/ ?  K    requestAnimationFrame(Gameloop);4 u0 c) I1 I% {) x6 m4 s
    update();
5 q8 h1 F/ j& f    render();
# k; q; v5 q; ?! [, d}3 k+ U# T) v: x2 d9 |
! H5 I$ A9 S1 {6 A. x4 J
Gameloop();2 B! G& |0 p$ ^$ E9 s
[/mw_shl_code]
( }* A- X" E- }1 N. \/ ?2 U4 L; y+ e% N
: @0 t7 Q2 m( q( h6 k- x& j
引入争取的html,3 E9 k* g; n, t1 N9 z
, A; P1 ], E# G+ p9 v/ o' A
[mw_shl_code=html,true]<!DOCTYPE html>6 ?) Q1 h, Z) K% M* y  [9 K
<html>
* d9 ^: M/ q* o/ M( Z. J4 H& T9 Q, k; O: H4 A: p! \. y
<head>/ j, y2 ~( y& o6 k
    <title>hello ThreeJS</title>) D& x1 Y( ?5 H$ `7 G
    <style>
/ Y9 |  h0 P2 u/ {; I) S* B. B        body {' G: W4 K$ T3 S# `0 S4 n3 R
            margin: 0;
4 a5 X9 F/ D+ e3 X" `6 {" f7 }$ ^        }. o6 h; G+ X4 u

1 L' i6 o' H5 ~: j, E/ ]        canvas {
* H2 y' O$ y& m8 R            width: 100%;
& l. A( ]5 R( S% g  G& s; ]2 s            height: 100%;! N$ |) T7 r5 X% V
        }
: M  H* ~# O  `  x4 u
0 P+ O( p# c  H3 H2 ?" @        h1 {
( @- d( p+ t* o& Y  l            color: aqua;
; ]  y5 |) m6 S) F$ ]# @# U+ M" M8 x. i( S        }/ e7 l) @* J, C
    </style>7 [- _9 s  |2 f( A  ~
</head>
' }7 `" d' S/ ~. [) t8 A" c! X7 O* \( Q' B2 |
<body>
7 {6 w7 q; P% e <script src="js/three.js"></script>
' u( t. _, z  j2 j    <script src="js/OrbitControls.js"></script>
& }- V( s. s/ x( k. X5 k    <script src="myjs.js"></script>* b/ k4 V8 z$ [+ p. v
  * z) F2 R3 b& `7 ]$ F
2 w1 p% C) U$ P0 p& X. C
8 Y+ d8 p- N9 d0 R+ D+ h" O7 E
8 t$ N+ f1 I- K- [: [
</body>
" y- [' w3 s8 W% f& _/ R. ^" o2 r) }- V) z8 \) k5 [
</html>[/mw_shl_code]. f9 a5 ]) D8 ?6 s

# h1 f1 E0 c& a- X0 K) H: Z. H- {效果点击这里:6 \& c# r! R6 p" G% Q) n. ~+ M7 C8 Q
$ T' m7 i& @  y, q- h! M3 ]; Y
http://plmhome.com/doteam/lesson1.html& T* D: [" v4 I7 s

7 l+ h- r1 O/ s( b
4 G8 J* n' X3 c8 s7 g# E7 D
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了