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

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

[复制链接]

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

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

admin 楼主

2019-9-1 18:45:09

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

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

x

7 ?5 D9 V% c" B/ q9 V
+ j  [- j$ Q+ y  ^( p* }废话不多说,官网自己百度下, threejs.org ,入门很简单。# h4 F! {% M, G  @
/ p# W8 W* g- w6 O4 p6 q
创建的javascript脚本如下* A! d+ l/ \5 A5 Z$ A, p$ u
# y# v! g* k  x! {1 q4 z
GIF.gif
6 P+ j7 U1 o% m0 W9 ][mw_shl_code=javascript,true]
+ l1 K9 C0 A" F: \var scene = new THREE.Scene();
; o* ~5 M( I% M+ F7 x; i" g9 Hvar camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);  _: f& Q& o: J  L& @2 ?
var renderer = new THREE.WebGLRenderer();
4 _- J! R# n' X* h- ]renderer.setSize(window.innerWidth, window.innerHeight);
6 y: m" M$ t7 r! Cdocument.body.appendChild(renderer.domElement);
! [  s  v5 X8 A7 M* [: h- _  B0 ~% |7 w. f0 w& _# F$ A; X; h& [( U
// Refresh Issue 9 j8 ?# c, t) G( j* b& r
window.addEventListener('resize', function () {
0 I+ w, w1 w( g2 Q2 F1 S4 j    var width = this.window.innerWidth;
4 d# E( a8 D1 e. }0 F. d    var height = this.window.innerHeight;
3 l! t# a; I/ K' W* `    render.setSize(width, height);& I+ Z3 ~. F$ V9 U. N; r
    camera.aspect = width / height;: ~2 R' ?8 A2 }; k9 l' Z) h& `- w
    camera.updateProjectionMatrix();
7 Z+ x4 `/ `! Y5 A! L& X1 c+ N})6 ~8 P2 K8 [6 {- B8 |" f
7 w, y+ F' w, p& F4 Y4 n  R
//orbit contorls
. {, ]. w, c% u- T8 r* scontrols = new THREE.OrbiTControls(camera,renderer.domElement);8 N$ J' T% ~7 b0 _7 t

3 G! }& @$ ?. r  Q3 p! v8 S2 R//create the shape
3 |0 [5 h# @' c1 gvar geometry = new THREE.TorusGeometry(2, 1, 16, 100);; W7 [( O% c+ `; d! h8 C  F
//create  a meterial4 I4 Y8 X" f# i$ v/ G% G& }8 b0 @
var material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true, });3 O0 t* d# U. N
//var myMaterial = [new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load('image/plmhome.png'),side:THREE.DoubleSide}),];
$ J) k4 C. U' G0 u4 L//var material = new THREE.MeshFaceMaterial(myMaterial);
: K3 ]5 p# \* f+ z# D
. `& v* K5 B8 p; a. u  k5 xvar cube = new THREE.Mesh(geometry, material);! z' J& c! _& Z4 C, Z2 K8 Q' \
scene.add(cube);$ F, X6 w+ [2 k& E+ B
camera.position.z = 5;7 O3 k8 }; I' p: m8 l4 Y2 w2 A" A
+ w7 `$ w) u8 M* ^( S) n

' G" O+ I( R: L0 m3 e( _# H
0 ]# y. c4 _7 {' ?+ Z" a: M" c5 w

" w/ w4 |1 v: C  e* E5 }//rotate 4 e% z+ ]( t% q$ |$ h
var update = function () {& }& ^& \' @1 g' Y: ~1 u
    cube.rotation.x += .01;! m; a  ]/ C5 v# x1 |2 y
    cube.rotation.y += .02;9 A$ e9 @3 t/ C. u6 V. c4 `* G
    cube.rotation.z += .02;, i  |% A- L9 Y0 s2 a
}+ c3 [# `0 [% H' `, E

$ M2 K2 y4 B8 P4 ]var render = function () {  H. E) ^* F2 o; C6 P& f
    renderer.render(scene, camera);
+ n  \# o5 c2 ~! u}
' ]" t7 _/ o: M: v- n7 r
$ a. k6 S9 F  L' c# X  r& F
- K- ]$ t( q7 e% G4 `# u) W9 A" }
var Gameloop = function () {  ?, e/ h$ H! O% w3 v7 Z' D- N
    requestAnimationFrame(Gameloop);
+ O" k# \# M7 G. A    update();4 ~9 D# D) `. G
    render();
8 k* t# v; {; Y5 @}
& m; _& [, w; Y# L9 ^* C& F- y
Gameloop();
4 K7 P5 V# e) v, `0 N  ~[/mw_shl_code]% p2 L0 k) }, r2 d: z0 g" L0 d9 E
0 X* S5 K1 C2 J2 t6 L$ C$ H

( T3 s5 |$ e' e4 N* y' C引入争取的html,* O' J5 y9 M( w; q( c! k
  R( Y; n) j  r' l2 b' l
[mw_shl_code=html,true]<!DOCTYPE html>
  x0 N% Y0 ~, D* ^. D' i/ m$ w# q<html>
9 ^* M$ G0 Y1 G3 |! x. j- e( N$ ?8 Q' i
<head>
! N+ {7 s- o8 B2 b    <title>hello ThreeJS</title>7 j- ^! F: _) E1 G. l
    <style>" Y1 o: p# v2 Y# d3 _
        body {% U, m# \: @; a
            margin: 0;
8 e( e; _. s8 ~  s        }
6 }( D' R, g: `& }0 ?4 X! P: Q
9 `7 D% G3 A2 P: L. ?( k: V' L" [4 k3 l        canvas {7 h6 s- C; x: s4 n/ P
            width: 100%;
& w  T" p0 \3 Z! j5 v            height: 100%;5 ]1 X9 w/ E+ t0 E
        }4 u( s( R  _: p2 g7 ?4 `
1 c7 T9 k& k6 @) l( j9 a# S
        h1 {
- t* _5 x) z7 G; _0 N1 u6 @            color: aqua;
' v' w4 }) T; d        }
5 D. J  U9 a; F+ b" m+ D5 J    </style>* p2 W% ~5 `# @7 Y" }0 U" a8 x
</head>1 P' E! O6 X$ J, G# F
. V6 G$ {* J' ]7 {" P( d: k& H- B; r
<body>6 _: j7 _& A  |7 S$ ^
<script src="js/three.js"></script>
' H+ G% ?7 f* ~8 m    <script src="js/OrbitControls.js"></script>
' p+ s/ @+ B8 [& f0 p6 ], A  y: R    <script src="myjs.js"></script>
9 J' W7 u9 S: s( N  ' M: X- I1 Q1 i! p, a
( K2 m8 z+ z0 F5 X
1 i. H- F4 ]0 G0 j
! |, S6 N% K2 p. v! O
</body>$ T' f# g, k2 r: P
- ]4 a+ k+ y1 B: t2 U
</html>[/mw_shl_code]
* s* j/ E% j& N+ B4 l6 V/ D0 u' i3 s+ o0 @3 F' _
效果点击这里:1 l; b4 N7 Z4 o" m$ Y+ [

& F4 r" W, {! Khttp://plmhome.com/doteam/lesson1.html
) r' K1 m* r9 W% C0 {* e6 T! G7 u! j4 G; l+ [3 k( D6 n
& h8 M0 m- E9 z5 H: x
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了