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

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

[复制链接]

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

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

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

x

5 u* U( ]: p& n3 j- b  D* ^/ e4 t# U* R* I/ b
废话不多说,官网自己百度下, threejs.org ,入门很简单。: Z! [; ~8 S1 c- [& ?
8 ^) g+ {: q3 w  B( l
创建的javascript脚本如下
. y) b9 o5 N9 \2 {4 ]- p1 E! q5 d' f& k8 W; q
GIF.gif 8 }: C7 I' G' K+ c& I% `
[mw_shl_code=javascript,true]
  Z( Q) ~1 V  Z/ [# i$ U! ^' ~var scene = new THREE.Scene();
, b/ N5 k9 C" B' N7 ^9 T0 r) |var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);# d6 p3 G4 L2 P* v% ?+ K$ E
var renderer = new THREE.WebGLRenderer();: t$ l1 Y: L$ k) ~' d& x4 x
renderer.setSize(window.innerWidth, window.innerHeight);+ P5 M7 S$ V$ `& p1 H2 h
document.body.appendChild(renderer.domElement);
, w. {! K/ I  e- ?* s
" a6 ?" e: i- X) N- a// Refresh Issue
  a/ E" g' F8 [% t) c$ }0 Ewindow.addEventListener('resize', function () {& W2 E" q8 ]- K+ R4 _& M
    var width = this.window.innerWidth;
$ m0 Q: f% s% ^- H" r    var height = this.window.innerHeight;
2 n/ `5 g8 d. p# E* N, a  l    render.setSize(width, height);! ~3 |% }# z. E& X6 l  b
    camera.aspect = width / height;% \) ^* z5 X7 k7 P& v6 x9 E
    camera.updateProjectionMatrix();
& |' f/ q% _) h})1 i! C) l4 @6 _
/ C: }5 t0 D$ q- V
//orbit contorls
6 z# x6 ^- P8 A9 X/ icontrols = new THREE.OrbiTControls(camera,renderer.domElement);1 @+ K/ ~) h* n" Y/ `, _

' u) Z; i; [7 }9 k: j//create the shape
( l; h  X7 [+ y  r) i, Svar geometry = new THREE.TorusGeometry(2, 1, 16, 100);
" Q4 l- {3 _% w) \//create  a meterial; k7 h: q: r% r- c& x
var material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true, });. [* ]2 p% X* X. P9 {
//var myMaterial = [new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load('image/plmhome.png'),side:THREE.DoubleSide}),];" Y1 _3 ]4 J1 O& B5 v' Z+ H- |
//var material = new THREE.MeshFaceMaterial(myMaterial);/ S4 X5 ~- O: s
$ S4 W# l+ U2 O+ W9 g' V
var cube = new THREE.Mesh(geometry, material);
; S: O5 c+ {. {- b& W' ~+ Nscene.add(cube);1 K% `! [# H/ s! n3 _3 P+ Z9 O: S3 ^
camera.position.z = 5;9 c; M6 `; c3 w) z

* K& S6 r& F9 L2 d5 x( q, n6 p' w. z' }# ^- ]

9 X: ]" x* s$ T5 ?, m3 t* d% M  m/ \7 B+ O, n2 |' x  S
6 I$ o5 |+ q4 |, w& i. O$ _
//rotate : Q3 \2 Y/ `/ o" x9 h- P2 ^
var update = function () {: G3 ^: S, J! m% K) e: ~6 T; O1 r7 e
    cube.rotation.x += .01;# [! z5 d  f: {
    cube.rotation.y += .02;$ ~6 w* P- r3 a$ z* b
    cube.rotation.z += .02;  m. m) d, o7 a2 w1 t5 @
}
* s# ]  B! I3 _) L6 V* @' t$ o. q! j9 o, }, D9 a! v
var render = function () {  O% }- `- V! D" |) ^3 B: ]* \
    renderer.render(scene, camera);
1 y7 _# B4 @5 A, g& w}
0 }: y1 w" c! m7 A0 i# z  `
! {- }5 O& |5 f4 s% h8 A* o6 K0 ]4 Q# z% K; _" E; V& `

) Q* c5 M0 P# k, xvar Gameloop = function () {2 _) c1 \2 {% D
    requestAnimationFrame(Gameloop);# {1 c0 q9 v8 F. K* `- `+ Y
    update();
; E3 |, i/ r7 ]" i+ k3 m* r    render();
' ~7 @) K5 \# |( A" _}
- [% v3 T, E$ z0 V, j/ \  F$ [* m9 N. q1 u9 [
Gameloop();
% S3 o0 U6 V- o6 p" r% O7 o[/mw_shl_code]+ q- F" l# m' M, J0 e6 K0 V6 L

$ a9 @/ s3 D4 p+ U
- M) g2 W1 b* M1 h引入争取的html,
" Q/ h8 F( D, S- M( d& D
5 I& l: p: u6 B[mw_shl_code=html,true]<!DOCTYPE html>" N6 p& Z  L# l- Q' _
<html>
, ?% s; N" L2 d8 c2 J8 n- x4 H1 ]) G( t" v) [+ z
<head>
. K! E6 ~1 [# P! X. t' B    <title>hello ThreeJS</title>0 h: H6 _1 |& W9 m' A
    <style>
' j# d: z. ]6 H1 F/ }        body {6 L* u6 G: Z% u
            margin: 0;8 B* u! `3 A8 q% S! m8 M. n
        }; h/ \0 b: ~+ k; v+ X
" D4 J* D" a, b! e* I) M
        canvas {& B4 l0 ?4 k* t  h3 V
            width: 100%;
4 P) x  ^- e, M& E' P3 y8 v% U            height: 100%;" g% \9 j7 m. ?
        }, P# i4 [+ ?% p! `

9 s0 ?- l3 ?. m; p        h1 {
. E; R0 {# D' V0 T6 \  ]8 H  s: g) w            color: aqua;
, j7 |+ C" K5 \; P, Y        }
9 \! f7 D0 l9 G4 c/ v- h( l9 h/ @    </style>
5 g/ V+ S) u" E2 ~3 [</head>
5 M$ m# i) Q' Y7 e, P  X  V! o  p; U2 `! G, a6 N& Q
<body>
# A% [3 i- Y! E1 l7 Q9 `( A <script src="js/three.js"></script>% T# I% A, T, R/ L
    <script src="js/OrbitControls.js"></script>
3 f' d) s8 S5 M3 Z# }3 @6 @    <script src="myjs.js"></script>9 Q& `) v/ L& W2 X+ v/ |" t
  ) ]9 s; I% \7 _5 `5 {* G/ n

0 ]3 ?$ r2 @5 V0 z3 \, Z+ T7 B* U: x9 s) n8 T/ L
- e7 t0 N% [, y  F: r7 z. g8 C
</body>- u! j. U% B/ O% h# }) s
' I$ ~7 L# v" L0 G9 O$ {
</html>[/mw_shl_code]7 l8 C- C# m& T$ Y" |6 j' C

. n9 e( J, ^! u, I效果点击这里:" C% \% x9 Q5 s) h, V5 v3 p) ]
7 T! Y9 X3 ^  s. B9 U
http://plmhome.com/doteam/lesson1.html
. a+ G/ \# v/ u+ o/ F
3 l% ]% G) T1 k+ ^: L) D1 t. m4 k9 n' r, x4 K
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了