PLM之家PLMHome-工业软件与AI结合践行者

[前端框架] 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

% R. c# Y' N) v- L9 \" F, D& ^1 v
废话不多说,官网自己百度下, threejs.org ,入门很简单。
# \4 n2 N& e0 z  z  B' u0 U% h6 u9 k- a8 ^
创建的javascript脚本如下
7 b* |# A0 A9 ~( J& w2 n% y
$ l2 P# W1 T/ ?- x. r9 _ GIF.gif
( p; o% ^1 p- l* ?[mw_shl_code=javascript,true]
4 d3 ?& N* V* ivar scene = new THREE.Scene();
! {7 M# ^  P5 b+ w: N, u/ Avar camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);. W/ z# K3 W8 y  x4 K, N7 o- K
var renderer = new THREE.WebGLRenderer();$ Y0 ?6 s1 \$ `# o. n
renderer.setSize(window.innerWidth, window.innerHeight);7 |; h; l; o) v  I
document.body.appendChild(renderer.domElement);
0 Y# x; P; i2 _% y  a) @/ ]6 X" B* ~! |# _+ V. ~/ P4 v: Q, E
// Refresh Issue
$ \( c9 R6 C* _9 z% P, n/ vwindow.addEventListener('resize', function () {: S0 [# V; s; N( B* [- i" T
    var width = this.window.innerWidth;8 E( [. [- q2 Z6 S2 }. A5 N
    var height = this.window.innerHeight;
- N1 }2 n: {6 O: {+ A, i    render.setSize(width, height);1 [% e1 T3 a" {; p* V1 c
    camera.aspect = width / height;% h; D1 u8 z. l
    camera.updateProjectionMatrix();* K9 M; N9 F( S5 j/ Q$ w
})
, _; L; j! p. Y, W) ~; C
  U" n1 ]* ?9 E3 x! Z- Y) [//orbit contorls* P5 M" r" Z! j2 l. {
controls = new THREE.OrbiTControls(camera,renderer.domElement);+ t8 [. m4 g4 E1 `( v
# A7 S  h0 v( D! W% L7 ^, s
//create the shape
3 I: ^/ R- f* Bvar geometry = new THREE.TorusGeometry(2, 1, 16, 100);4 I1 a" E$ m2 S7 s6 D9 ~3 X
//create  a meterial4 X9 Y2 g/ F! @4 w
var material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true, });
4 c0 o/ U7 O* s6 p! Z//var myMaterial = [new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load('image/plmhome.png'),side:THREE.DoubleSide}),];$ m* A- P; t6 |6 R$ n2 u5 a
//var material = new THREE.MeshFaceMaterial(myMaterial);5 J1 z' d  J1 i  U

5 U$ y" ^7 T/ C- h  z# zvar cube = new THREE.Mesh(geometry, material);
& u- ]( @3 |  i9 D6 Dscene.add(cube);
1 r2 J% E. J4 U% m4 S+ J& c$ C5 }. Dcamera.position.z = 5;
" R% J* m3 y' w, j" h& ^$ O7 O0 \" {$ R* O# Q

. `8 G  D1 J0 ?, [  s/ {5 J+ a5 z" B5 ?
* G# q9 e4 I0 s. C5 |% M- s$ K

; J' L* c& V  K8 C, `, \) o//rotate 6 C* M* a* ^7 y$ g: N( [' Z& i
var update = function () {
. ?. o6 q/ |& h, h8 {    cube.rotation.x += .01;* |  h- P/ u0 Z6 T. x; {! B
    cube.rotation.y += .02;9 P- m+ ~/ ^* e3 J" X2 c
    cube.rotation.z += .02;
! A; D( p' o. K" j7 ]% w; A}
: F* ?, j3 w) v" }
9 C7 V4 P4 s6 ^, r; w/ `1 P/ ?var render = function () {
! C: r* U1 a4 N$ c0 c) D    renderer.render(scene, camera);
/ F6 P* j- S; a+ ], _}0 Z5 t; u& D* U3 x, j: g

- p0 t: N' _; B% O) v8 e# h7 q( X) m" p$ o& l7 t* P
5 I4 L1 i, G- S7 P
var Gameloop = function () {, G1 A1 o/ o0 O! }2 H
    requestAnimationFrame(Gameloop);
# f0 h2 [" S% K7 `& }    update();% ]! D  Z4 }1 e9 p/ U* ~8 x" O$ W
    render();; g- I$ J7 O7 X8 V' Z8 n% F/ I
}; F' ?) w* ?  U' C
( Y0 M: S. Y9 k" O, f
Gameloop();, t' a& K6 W7 j4 {) h; x/ k+ T( `9 ?# t
[/mw_shl_code]$ \" O3 s! J! @6 z
2 @# Z; n) [* C( z$ a0 a/ g* u

8 I; }+ j' [, {6 S( q引入争取的html,
! z0 ]: }$ c! o  T8 y& }
5 B8 z; m1 r3 Y9 [$ Z[mw_shl_code=html,true]<!DOCTYPE html>4 {: P, H# E! P" @# O  D, F0 D  U
<html>) P  C. |9 T2 _; d2 t3 j1 J) X

2 b" \3 ?9 b( x$ _  F" M<head>" k0 P4 m( \( y0 P$ J
    <title>hello ThreeJS</title>, S( P1 _+ B; T) r: U7 V
    <style>
0 |) L& C4 q0 W% K        body {
" m* k. a4 V+ u. _# c6 R            margin: 0;
4 W# U5 B8 i, ]0 c* `: `+ ~        }+ I4 g: i. ^+ c- e( o
) f5 m' k" n! V" `. N/ w; ?( ]
        canvas {  _3 |1 m+ y3 a( Q
            width: 100%;
0 H! j) U; F& U2 Y            height: 100%;
; V2 K6 K/ r3 y" R; U        }
1 K1 h4 [2 Z# F0 o: u! d' o( j& O6 ~8 u. g1 {" M7 J5 x0 {
        h1 {! W& [/ i; x# R: q: i' X0 J
            color: aqua;% W" U  m0 U; ^4 F5 t  D7 k7 p% s
        }
1 W  P2 Y' ?/ }# Z- t6 S' |0 j    </style>+ M' M7 _; c2 n" Y3 g
</head>
3 o5 N0 D# S7 G7 I
: `" y1 o$ q3 \5 |+ M$ b<body>
* M. p, P7 I. z) P- G <script src="js/three.js"></script>
, c" j. r' c; J0 }! l* |$ g+ }6 h    <script src="js/OrbitControls.js"></script>. b# K8 c- X9 Y# z" `9 H0 x. f
    <script src="myjs.js"></script>
/ J6 W1 {( F, Y% a  : e' v$ D- A" a1 e
; d/ H+ w, p. s5 E' O" ^

- a) I$ p( V# X" D/ P! h
, q) T: K$ y! \5 W2 I</body>
+ `; E  x& R1 D/ [; a6 [; X: x  f; U( F" ^0 B! Y
</html>[/mw_shl_code]
* u: ]( v! z6 d$ g1 M- L& k, ]3 g; S1 o* N. c) {& n
效果点击这里:
9 g7 \6 ^9 _2 s. T/ J+ _0 G7 ?) z" ^4 T
& h; T% q  K' y3 d' x6 {: h# vhttp://plmhome.com/doteam/lesson1.html
# Z; j# n; ~7 u( ]% Q" G
3 o7 Y" k7 x& i! x1 \) z" T* f1 n; _: o' u9 G
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了