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

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

[复制链接]

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

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

admin 楼主

2019-9-1 18:45:09

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

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

x

1 I: F  D. I0 I; ^' g
! Z$ B6 a3 j6 N6 i8 K废话不多说,官网自己百度下, threejs.org ,入门很简单。3 y; Q- W. x2 V2 o. K' S) }

8 ?; p' Z5 p5 A4 ~0 F: Y创建的javascript脚本如下
+ N0 q1 j8 e; F  M1 M. y% p5 n/ h3 I' l; q; u
GIF.gif 8 L; A- X* F$ @4 U4 i7 S
[mw_shl_code=javascript,true]
) J' Q0 v. e$ y* r8 kvar scene = new THREE.Scene();: L' \7 f+ F8 E1 c6 i8 u5 H
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);( X. L) [1 y9 V/ P& l7 r
var renderer = new THREE.WebGLRenderer();. R* X, M9 q8 Z+ Y' I. a* X6 v. ?
renderer.setSize(window.innerWidth, window.innerHeight);
4 y$ R5 @- f3 Y0 Qdocument.body.appendChild(renderer.domElement);6 |$ E" O0 u1 S

8 T" ]% O) Z7 l( z+ |1 g1 k// Refresh Issue 2 k$ P7 S1 ~2 t3 r$ l
window.addEventListener('resize', function () {, \; W) r2 a: [" {
    var width = this.window.innerWidth;- l/ ]7 m& S+ v$ }2 o, g
    var height = this.window.innerHeight;9 |# r1 C# Q. ~
    render.setSize(width, height);3 o9 V6 h, O. l/ W' R
    camera.aspect = width / height;5 ]5 f6 L" h3 |% j/ F  D
    camera.updateProjectionMatrix();
3 C) D* J4 ^6 C6 A})
! E1 a- K2 ]; W; u+ M( R1 z
$ f) _4 ^, Q( d//orbit contorls# K  b# ]+ B$ V* t( n8 I9 B
controls = new THREE.OrbiTControls(camera,renderer.domElement);# {$ }0 G4 N* K: m& d  \

; E2 _1 n" A3 U+ A4 G9 U1 K; C//create the shape
& ^( ~+ {" ^( d5 ~var geometry = new THREE.TorusGeometry(2, 1, 16, 100);
+ T6 d0 ?6 z8 m//create  a meterial
6 q( ]! F1 f' k( B4 T) I% V/ Avar material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true, });+ c& y: E" }/ h1 F( E& t
//var myMaterial = [new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load('image/plmhome.png'),side:THREE.DoubleSide}),];
: j: N$ ?# Z# Y7 u6 P3 w$ v//var material = new THREE.MeshFaceMaterial(myMaterial);
7 ~& G! `6 @  u; U
5 R/ v* ]- g. A8 Xvar cube = new THREE.Mesh(geometry, material);
) y. j6 s  C2 J  z2 M7 D( Dscene.add(cube);: Q8 g  t. Q: W/ w" v0 ]4 o
camera.position.z = 5;
8 g0 k+ _( J( J8 f/ T+ k
/ |* L- [) n0 k1 D/ V, }
! @6 K# s3 I0 C; ?  d, G% k9 q3 r) I) m. c
$ R' q+ J1 s- H) E2 x  T& ^  x3 Z& F" G
+ R+ h. q4 c0 i+ q/ g
//rotate % M$ `/ X# J8 d# m7 ]/ G( Y4 a
var update = function () {
3 N2 U2 }1 h& M2 R    cube.rotation.x += .01;
6 S* W% E) l( H* F6 C    cube.rotation.y += .02;5 C* S- U6 F5 M. }5 i6 x( N0 H/ ?
    cube.rotation.z += .02;
' ^/ J7 F! d7 O3 M% \0 C- I}
$ ?7 ~7 X: L, V6 H1 r# o0 N6 h! }/ H& I
var render = function () {
) N; z- `/ H' g; f3 o7 i$ b  N4 l' T    renderer.render(scene, camera);7 X* ]: r+ _+ W) F
}: `# B" r: k- [# {7 N- W# u

6 d2 i  T. `! Q6 n# [$ l1 y+ W0 ^1 c0 @( T
% N7 o* T+ G; r
var Gameloop = function () {
6 n/ M& ?/ ~8 M# Q    requestAnimationFrame(Gameloop);
" j# J! N/ H; @    update();! x& y! A4 w3 V, F
    render();
& z( W" e' M# i' }% ?% u}: L  \1 q, N- \; J2 _! f4 G

: u5 m  d1 x' I. W, R( }! o5 MGameloop();5 r) j$ q$ F8 J2 N
[/mw_shl_code]; @8 |: o2 E/ ^/ V9 R& C3 {3 t
/ o# ~; m8 J! s$ Q

/ m( Y; B7 r: d: b% U+ S4 Q( h" z引入争取的html,
/ F  [: Y: f; @+ D  i# N/ I/ g: x
[mw_shl_code=html,true]<!DOCTYPE html>' |7 _' N" w5 s2 ]" I+ q
<html>8 ?* }" |! z: o$ P
4 t9 H2 \/ p: @# L7 q
<head>
6 b* L, }- n2 s4 {5 o2 ?    <title>hello ThreeJS</title>3 i6 n5 p" U, {4 k! Q/ _1 }
    <style>
& l- Q6 v9 n+ x$ \% y) z' O9 u        body {$ U/ G5 S) }' }5 O# E# r4 |* l  z
            margin: 0;% ^, M; I5 {# p' w  Z% Z
        }8 t1 i' C5 w# E" Q3 S
) ^+ C0 f1 n$ f
        canvas {" D* _2 n5 |  Y4 S0 ]8 W9 m: \4 R+ C: c$ u
            width: 100%;
! n8 g5 o4 l1 K0 C- V, A            height: 100%;
- w: X- ?/ [+ i        }
9 Q; {4 i6 ?, d& E& Z5 }. P6 w0 h) k) }8 |( r
        h1 {2 g) Z0 p; L6 k* h# N1 b- L4 q
            color: aqua;
$ f" Q$ T, U0 V8 h# V  n, d6 A7 ^  e        }" I9 d' Y# }# x8 F& _4 q
    </style>% d1 }3 Y# E  t( K2 {+ X; F
</head>: N+ s# l, h  b; j
3 K2 A$ {+ B4 \+ B
<body>1 ?! s! _% v0 k! H
<script src="js/three.js"></script>
# {/ U0 Q* j1 s: _    <script src="js/OrbitControls.js"></script>) G  j) n7 B, r
    <script src="myjs.js"></script>) b; a( y  A) R
  $ |( P& ]8 ~* e. N( j4 ^, A

% n) f& N3 |* n# X6 y
$ `' D" A; s# `9 ]6 h9 v$ E5 K8 {% M. v0 n
</body>
# G" D! s8 S. e# d/ g
( |5 d1 v6 Z2 D7 g) c</html>[/mw_shl_code]$ p$ K# }) C) O: ]6 Y6 B

7 H9 x, R- Z0 Y- B5 c) M2 A效果点击这里:
! \, }- e, c9 j  k3 J2 F
6 u# ?+ u$ @; a* ~$ fhttp://plmhome.com/doteam/lesson1.html3 u5 H1 m/ `! o

' R/ H4 y; L8 r+ a4 L$ ^) n" Y' p+ T" X0 p8 Y+ \
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了