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

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

[复制链接]

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

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

admin 楼主

2019-9-1 18:45:09

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

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

x

, {0 U# e/ ?, `5 ^/ a; l! x  j* W" O5 I' s7 d' V# T; A
废话不多说,官网自己百度下, threejs.org ,入门很简单。
6 L; Y! ^6 g% d( n% I3 ]
& z- R4 Y) [$ ]. ~( l创建的javascript脚本如下
8 R( g4 _$ S3 A5 p9 J% H/ }* a
$ n! j3 P6 z5 _0 A! P. s GIF.gif * J; C. |" H$ Z. @# B
[mw_shl_code=javascript,true]- l0 J# N/ f1 s: I$ ^( e- @8 E6 F
var scene = new THREE.Scene();8 e; p& ~6 `% `; T
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
& Z8 O0 Z6 `# J& b! {var renderer = new THREE.WebGLRenderer();
) D  U$ D8 ~; s7 F7 D/ x8 [+ P; ~0 qrenderer.setSize(window.innerWidth, window.innerHeight);3 k: y9 ^9 D, G" _
document.body.appendChild(renderer.domElement);
5 a, o. Q8 ]3 c, `2 I
% |( H2 W9 L0 Z: C// Refresh Issue % q7 Z* g6 U7 Q1 I) Y7 m: }5 o
window.addEventListener('resize', function () {
8 y3 ?# x8 U3 @+ [    var width = this.window.innerWidth;
1 v, u9 ?) A# ?) `: k$ `    var height = this.window.innerHeight;
: O9 {/ E8 }4 s1 A6 j0 y    render.setSize(width, height);
8 I  t$ b2 X3 R  ~; k* e    camera.aspect = width / height;
' a9 a& C. E  Z) R  [    camera.updateProjectionMatrix();
$ D" x7 u9 v0 @+ q: P- f: C( h})
6 K! J/ @$ L' L. r1 l, V
1 [. Q2 B9 {' \! K6 M! `//orbit contorls
! h1 E/ W' A  z/ {) econtrols = new THREE.OrbiTControls(camera,renderer.domElement);
$ l/ N2 i/ ]* {9 I- i
4 K( G* A( t/ e/ h& ?3 m$ I: M//create the shape* M8 R  f& a$ Y; c( ~& K
var geometry = new THREE.TorusGeometry(2, 1, 16, 100);
8 ?" r" @8 v; z& Y//create  a meterial  f' r& O3 i9 o% N! K$ F$ @! L  \
var material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true, });2 Y$ L1 j1 n, {; l; ^" k. p: ?
//var myMaterial = [new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load('image/plmhome.png'),side:THREE.DoubleSide}),];
& b- ^2 k3 N( ~8 P7 y! O3 y//var material = new THREE.MeshFaceMaterial(myMaterial);* ?; m0 W2 x  M0 N7 m1 R3 ~
+ O& ]; h- m' ]3 q, ^4 z
var cube = new THREE.Mesh(geometry, material);
3 J& {3 t8 W6 ]. x+ z* Bscene.add(cube);7 B' p+ q/ b  O3 f0 T
camera.position.z = 5;) B$ Y1 X' X- k8 p
; c# s% s% c' Z- m, ?% f

& ]( i+ r$ G5 d* x' H5 K4 V8 D' m! b+ V

9 m. {6 l) B- R% c% @; n3 o
. u, D. e, e% W//rotate
) P" e, p4 k% j6 hvar update = function () {6 N& ?1 O: B: c; Q
    cube.rotation.x += .01;
4 X$ T7 n% l2 _! j& @+ z& G  z    cube.rotation.y += .02;
, S* d, L9 y" f0 q% K' \/ ~    cube.rotation.z += .02;
/ p! l8 z" l  w7 y/ M5 ]: @2 `/ r}
$ C8 d' N( h, h: P) Z+ B
% Q5 |3 p1 y6 P+ S; hvar render = function () {7 ~1 m6 s; Z; c1 w9 ?: m
    renderer.render(scene, camera);
4 U% W2 M, Z9 N) ?& E}
1 a5 A$ t4 J# p& Q' \# D) d$ k1 u5 K8 N& v0 B% E- v

1 o% f* z2 d) P6 g1 K: v4 r+ p, V# F7 j& W
var Gameloop = function () {
7 @0 }& p) H5 J- x5 ~    requestAnimationFrame(Gameloop);. K4 z4 s- O/ @& w
    update();
5 d2 \2 M( ^; n7 l& K    render();& q+ }4 ]* y4 s' a. b, \: U
}" a5 c4 Y& C: w! C1 G
8 @. b- K1 Q0 z% P. I
Gameloop();1 q- |# l2 X5 ~5 Y3 X
[/mw_shl_code]
& v4 t, P+ H: C6 v
8 ^7 T. g. r, G" V3 Z8 h, P. P3 R% f+ G% G
引入争取的html,
1 i% ~  n+ @! l, Q& m
7 H: A1 l" ^  N[mw_shl_code=html,true]<!DOCTYPE html>
# j. J. A, J8 e( @2 v1 O<html>
8 W$ C) l8 O, @* |) i$ D5 n: W3 X0 {5 |% F- H% J$ M
<head>: h3 {9 l6 Y# N* A) l+ D4 a
    <title>hello ThreeJS</title>
7 A  i. W7 p- @4 R( D6 D    <style>
0 B# B9 F  x4 K; u" v+ \+ K        body {; E- X( t8 S% [" O, `- q
            margin: 0;
& ]% P& G% U3 P. c. g        }' K4 p  j4 `# V9 o
2 h; q- H' G' d  f
        canvas {
/ G! m, d( b4 d) f4 |& v            width: 100%;
  N$ x; F' u% n! w            height: 100%;
( T) |+ O) v) }        }
4 y' g/ o6 D6 w  x4 N+ i
  u# a1 h. H: x8 p0 p        h1 {
+ g/ S6 E3 Y9 g7 r            color: aqua;
* `, _9 f$ r! a3 k$ Y0 N. v6 B) S        }
- j# o6 b3 S3 w/ p7 Z/ I    </style>% n- q3 e+ y/ y' c4 D4 g0 E- R" Z
</head>
/ o$ n6 q8 [6 b- L
. L% ^* H- h& ?; X% u<body>
- n6 P) D, n  Y$ E0 C) b& X  W <script src="js/three.js"></script>( R/ U- W& o6 M- O
    <script src="js/OrbitControls.js"></script>: N& U- n3 g1 Y! [$ w. y1 ]
    <script src="myjs.js"></script>
* c) y5 i1 i" l  
& o4 t& T' _; H5 h' J; N) f/ K8 I3 M( B  G) [  b
. `& y) c& p$ a8 y0 v" H$ w$ S; y
9 e  u+ g8 O+ e+ l0 E
</body>6 W4 k/ _7 {) x9 Q

" }; O+ Y5 X3 e1 r* e. g</html>[/mw_shl_code]" d8 J9 Z: c% o* ?1 n% V6 C
# `( D( @: l8 I, u" J/ u
效果点击这里:
5 E" p/ D2 Y+ m2 l0 F6 M; R9 k- I! @- K, l- w
http://plmhome.com/doteam/lesson1.html2 t8 T- B1 z+ @7 h) D8 R6 [

" ^/ W% y4 t) b& a. j) j3 D4 n9 S6 P& T* i0 I
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了