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

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

[复制链接]

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

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

admin 楼主

2019-9-1 18:45:09

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

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

x
* `  n" p1 I! J: f: I9 j8 u

0 M; u" Y/ U8 a0 _废话不多说,官网自己百度下, threejs.org ,入门很简单。
. _& [" C, G; @) M, v  u+ ^
+ _2 D: Q, s- }+ N( I5 Z0 k创建的javascript脚本如下& i, v! y- O( U; n; _3 G
$ c; w3 w3 Q) d; U' f3 I! D
GIF.gif
/ n9 U8 ]; Q2 @3 K' u0 _! _[mw_shl_code=javascript,true]
8 q9 f& L. I, k) |6 }% V. Mvar scene = new THREE.Scene();5 k1 o9 f7 C$ }3 y$ `4 S
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
" m8 W6 F# Z: U' q: Qvar renderer = new THREE.WebGLRenderer();  S  f: h" X8 R. k. a' F1 C' i) `
renderer.setSize(window.innerWidth, window.innerHeight);
+ V4 Z1 E+ A# e" Ddocument.body.appendChild(renderer.domElement);
! u1 I" T' g& r$ d) A/ d+ E4 ?6 d; ]5 Q$ M% |3 e& x: }  e! c
// Refresh Issue ; ]7 o1 w- o: \( y
window.addEventListener('resize', function () {
! b+ p) f, f6 Q) N' M9 W0 W    var width = this.window.innerWidth;
( B/ }2 J4 ^9 {" D6 n7 f, e5 S    var height = this.window.innerHeight;" |" W) z, J) M: A
    render.setSize(width, height);
7 n# F1 V! _# i* \' l) Q: e1 C( Y    camera.aspect = width / height;1 L5 Z/ U3 M0 F, r4 B2 e* q; L, {
    camera.updateProjectionMatrix();" Q5 \; D& d" v2 g
})
+ l2 S# s# _$ J- A9 K: X
( b  v6 O" A" ~1 b//orbit contorls+ Z4 q& w+ V# f3 H
controls = new THREE.OrbiTControls(camera,renderer.domElement);( l+ d2 R' m0 z) }5 f
  E) X: z" C' k, i& r) v
//create the shape0 ]& N4 i- ~8 G; G7 Y
var geometry = new THREE.TorusGeometry(2, 1, 16, 100);5 B" P2 ~% V7 v, c0 K
//create  a meterial
- K' _6 t/ r/ _. V9 Uvar material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true, });
' p# l* b: g7 K//var myMaterial = [new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load('image/plmhome.png'),side:THREE.DoubleSide}),];
; v7 a5 [/ T+ Q! m) Y7 I2 f//var material = new THREE.MeshFaceMaterial(myMaterial);
7 b9 F" u, F! l5 X8 l& D6 k2 o
' R9 T" T! G. }3 z) j% L: T$ qvar cube = new THREE.Mesh(geometry, material);) }0 G4 l% a- Y* k3 w
scene.add(cube);
* C# q8 ]5 h. w4 t% x* gcamera.position.z = 5;
0 j4 ?# x0 I% }, a2 Y( Z
3 t$ J+ z8 V) m* C" {
8 K9 X) \$ {' i* R
$ H. y( J; f# [% Y0 Y5 q$ O
$ J2 C$ u* Z) I4 W' R" I( e, v/ F* n$ {
* D+ Y! @8 g; O9 K: J; y. P" L! c//rotate
, s; m. }4 b' J$ I) Cvar update = function () {5 Z$ v( s5 g# h- D7 V# K6 i2 ]: E
    cube.rotation.x += .01;( v/ E6 `8 e0 {" E& V8 y
    cube.rotation.y += .02;
7 i) [9 a( R+ |& v: J+ {% M- S    cube.rotation.z += .02;! Q. U5 }: p; h6 M) P1 x, K
}
+ k/ z5 a; U9 d9 D  y4 f- V* x- D) _
var render = function () {
) r, [) e1 ]$ n& Z# f' v" o    renderer.render(scene, camera);
9 w* {# J' N; o: L}; [) V4 H8 F1 Y2 c

# N% ~9 j( H, Z  f) K
" y1 K) H) O. ]1 I. @+ S+ D  F" G4 [2 `. n; S# K2 v5 N  c
var Gameloop = function () {
: ]$ E% b! [) b+ E$ c& l6 d  E    requestAnimationFrame(Gameloop);- x$ A& v& A( {" i4 ~; M
    update();
, t' g) W$ M" L* i) u    render();0 z1 F, \9 `1 X0 ~& V/ F/ f% T
}, h7 n9 \, T) {9 @3 U

1 k* ~" I2 n9 ~; i5 ?1 QGameloop();
* F0 Y5 N2 U1 x% Q3 c" \. g) G[/mw_shl_code]$ B2 s" x5 L6 s6 B

1 F$ r: F0 w. H4 J3 ]& m
: {. ^- S) v: u; ~: p( `引入争取的html,
( O: _8 `. ?! H# p( o- o$ y" V: r2 c
[mw_shl_code=html,true]<!DOCTYPE html>% y/ @! b. Y  |, u+ G3 H. U
<html>
" _; i  F0 m9 l4 Y* I0 W. @) L' S& Y7 B$ S5 _! z4 i
<head>
% H6 X2 s( ?6 w$ z0 n9 n    <title>hello ThreeJS</title>! F$ x- S3 E( j3 ^" o5 V
    <style>
" i  n4 S, M2 ]4 c+ @: V        body {
: `2 |# \: R, c' R& I            margin: 0;
8 i0 b  A8 {  |4 z: D; q  L* X4 F        }6 R$ Y- J" m" G4 h

2 _7 d0 Y: U6 o2 r: \9 I# y        canvas {: i4 F# T5 d5 P
            width: 100%;
) G! x9 L* l! Q4 N* Q            height: 100%;
9 |; U& g( y. Q        }
( s7 ]8 D: z' H3 Q& R5 U: n
! g4 N3 x1 b( O        h1 {2 m  ^$ l8 u4 K# t. j* @1 j- L
            color: aqua;
( {3 Y- K9 a( \2 l6 D2 z  d        }
3 Y$ @& p6 U+ w    </style>4 J$ v6 a) B; j
</head>2 Z% o& I* n9 t' S+ i9 M$ G

% W+ m4 K, D- O" e9 C7 q) O8 R<body>; V0 S3 k$ Q3 W8 `2 n4 B
<script src="js/three.js"></script>$ h3 d* e" W8 P, [/ V* }6 k
    <script src="js/OrbitControls.js"></script>
5 P) `" f. q' [" Z$ r    <script src="myjs.js"></script>& s( U6 W8 G4 G5 W
  ) x& ?# c7 w/ Y0 w9 V

3 g4 U4 q" R0 z5 v7 t  O5 K. v$ G/ W% {6 R8 k
! b& j) E! R" V9 f4 ]# v8 |
</body>
; P" A  S) b" E( h8 T9 Q' v9 v) r1 D8 b' _7 \; j6 {
</html>[/mw_shl_code]- ]- r1 [7 n% T) G2 b" b, P! K
. N1 b; C) t: ?6 B
效果点击这里:
( b+ s- V  M4 q! `% N$ k% \; Q8 E
http://plmhome.com/doteam/lesson1.html1 Y* g$ a( G5 I* D& R
# Y6 X* G: _; E6 ~5 ]

7 x0 r  T$ B" Q+ V- \
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了