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

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

[复制链接]

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

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

admin 楼主

2019-9-1 18:45:09

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

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

x
) o) Z; _$ o5 ]$ y) g
; t* n, X* \; ^3 Y0 r0 z
废话不多说,官网自己百度下, threejs.org ,入门很简单。& @; r4 i* C: g

% d  e) w9 u8 C* f4 e3 L: R( o$ s创建的javascript脚本如下0 o- r1 P# {: c9 _! U

& u7 K# o; {4 ]( Z# M5 U GIF.gif
) `5 d: B5 p' O4 {: l6 V[mw_shl_code=javascript,true]
( v( q3 c3 }& I" X: \var scene = new THREE.Scene();+ q2 R% a3 w! C4 O6 @, H
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
5 I5 s! l0 S4 C% @! X5 Kvar renderer = new THREE.WebGLRenderer();
+ {, S* w8 h# b2 o4 w8 Vrenderer.setSize(window.innerWidth, window.innerHeight);
& q( C, A" W7 F# Fdocument.body.appendChild(renderer.domElement);
5 \* v" `1 F! z$ [; Y- I$ O% O- o& Q6 t3 Q, ]3 K) W3 n
// Refresh Issue
9 C- R1 o9 Q, e: r+ j1 M( O, P% c$ hwindow.addEventListener('resize', function () {
# h; {% T+ P, N% \% _! [4 n    var width = this.window.innerWidth;% C$ b6 n, l  ]  J" u
    var height = this.window.innerHeight;2 _6 K- h4 L" T8 W8 F+ Z; f
    render.setSize(width, height);
4 f2 G/ R( W! ?    camera.aspect = width / height;
- g( G! }' ?8 G0 O0 q    camera.updateProjectionMatrix();  Z* o  w$ Y7 ]6 ^, m
})$ p- u, l) E4 k7 \- Y' ^# d7 ^) E0 I

: ~: C8 ?: \* [$ \( m( _//orbit contorls6 ^/ H$ W- n+ a
controls = new THREE.OrbiTControls(camera,renderer.domElement);& H$ A# |; |! f' k+ Z9 D+ v

& l" t+ W( _( A//create the shape
- c4 F2 m( ?/ |. S/ Pvar geometry = new THREE.TorusGeometry(2, 1, 16, 100);1 l3 g$ q3 g" P
//create  a meterial" y2 T8 j; N  I/ _+ @0 L" d( `6 j& U# c
var material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true, });
9 L$ h" p8 C+ c% W9 G1 t; V//var myMaterial = [new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load('image/plmhome.png'),side:THREE.DoubleSide}),];
# u) M1 f  a# R4 T* K" F9 L' ^//var material = new THREE.MeshFaceMaterial(myMaterial);
$ q* Y" ^4 H1 ?0 c2 L- p9 N7 }, N0 u7 T
var cube = new THREE.Mesh(geometry, material);: A% E2 P: H; g0 q5 x( F6 \+ D
scene.add(cube);, V+ _& H2 Q* U4 |0 [$ v3 [, `
camera.position.z = 5;9 L: h$ j5 Q. Y' g& Y
% ]( }! u! v: t* X& D

+ N- V1 ^; U( V( j$ L- Q* S+ l9 G% r) [1 p- `% h* C- v
9 I3 n/ S: T$ R9 o) d, P' Q0 n1 t! h
# J  I! h7 W$ K. p
//rotate
2 s2 Q5 t- d2 Q0 Z8 N( `var update = function () {
2 d$ D6 A# U: C0 \1 K. T9 g    cube.rotation.x += .01;6 ~" r/ f7 a% j
    cube.rotation.y += .02;4 P# v! l, U: _
    cube.rotation.z += .02;' K5 c! {7 e. C# O3 C9 K; ?9 z# U2 U, y
}
) u4 d& p! g/ Z, p6 l+ y; b
' Z; v) E1 f# v' fvar render = function () {
3 _* `4 x6 K" E    renderer.render(scene, camera);
$ P, f+ s& O- Z5 F; m}
2 M% {, r! m8 w7 {- Y, v) j1 h" X9 T3 W; m

+ a9 ~4 I; R$ k6 ^& t$ |# f5 {, F& O, A6 X6 W; |5 C+ |, C
var Gameloop = function () {% c% ?6 O& I4 p8 n& n
    requestAnimationFrame(Gameloop);2 E: K0 J$ W$ x$ D/ \
    update();
. @. V2 S$ ]7 \4 b$ T( {# y' s. g    render();
6 F. S+ M; \& S}
- A9 y: k. ?& C0 C4 |5 Y. H& ], w+ B% N7 N
Gameloop();
) _; r0 R( X; i( V1 m[/mw_shl_code]
- B# s3 u# p7 R; c& _* h: h8 ^
, K7 n' H. @; R9 r7 x
3 H0 k7 a( z6 U1 s4 ]4 M引入争取的html,
# L' V6 {) Q6 |
/ ~) f  k+ p& }2 Y, ?1 i  c[mw_shl_code=html,true]<!DOCTYPE html>7 U  Q. w# C( n( B" t
<html>4 A. u2 |% U* x7 V0 b
  w0 S  P4 ?! m! x7 T0 l
<head>- H+ }2 d( @: K) s" [
    <title>hello ThreeJS</title>6 [0 E' `) Q9 j9 r. A1 [
    <style>
4 F' g2 b! e  s# e# r" Y        body {
: H9 V$ Q) i- \! P  M: j& G% [- L            margin: 0;
. z/ _! y1 j. {& K        }
% H+ o" i# ]% v& f$ b2 j
/ q" e$ M5 u8 [+ `        canvas {
2 N: k! Y( I9 u  `; w' {; q$ m            width: 100%;
& K. p! x% U/ j" \! Y            height: 100%;
4 b0 o  L0 e' k* o4 X% \        }
! O4 w$ D; v: S2 I1 ?0 ]) w+ Q% a1 s: k9 D3 \% ]; z2 x
        h1 {
- [& C& l$ G" ?: r            color: aqua;
% t7 N' W- L/ O) h7 [        }8 d1 T  V+ J5 e8 r
    </style>
5 F7 m! i. V8 j+ |- y* s7 L</head>! d% I/ m' a% ]2 w/ R6 X9 k* t

: j# {1 m' K6 F  L& L<body>
/ g- B* r6 L% d3 f <script src="js/three.js"></script>1 C$ @) E- A% I: {5 I, R. h
    <script src="js/OrbitControls.js"></script>
& ]2 R- @* Y9 [" q    <script src="myjs.js"></script>; \: b$ Q* h% T' I
  ' Y4 A( k, p$ E$ a4 G
+ h& p& n2 l( ?7 `
$ b8 _- h7 C/ ~+ B9 R

0 ^- i+ J- j+ B9 `7 m6 @6 r( h</body>
# _) c, b/ l' k
9 Z: k% u. J$ i3 u0 Q( d5 I9 l</html>[/mw_shl_code]# p/ c) s% E8 N* q4 V" F; T
; l) Q& I( u& g5 Q" O! L' k  w
效果点击这里:" [- f2 r( j# s# S
: Z! V6 P9 N3 z2 c- [
http://plmhome.com/doteam/lesson1.html
+ G* W; A  h' j! [2 Q; f* x- q4 [8 i" {9 ?  x# }. v+ }3 Y, N6 D+ K
. v0 u0 {0 ~" \5 a+ R! E( 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二次开发专题模块培训报名开始啦

    我知道了