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

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

[复制链接]

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

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

admin 楼主

2019-9-1 18:45:09

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

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

x

4 m$ g8 b9 S5 Z2 ^: w  o% W6 {6 |1 p1 J/ L/ [* k1 \
废话不多说,官网自己百度下, threejs.org ,入门很简单。
. A* k3 x7 l/ O: r9 W$ R
2 ^0 D3 K( R( h+ U" t! K创建的javascript脚本如下
' z3 t# [9 Y! k7 d/ f8 q$ R# \) A6 L9 x5 u5 N
GIF.gif
: R$ d1 a- ?! {  j+ u[mw_shl_code=javascript,true]
+ |& j1 y6 ]2 V# A- Y/ e5 fvar scene = new THREE.Scene();; q  a4 S3 o% F( k; w, M
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);6 z. e; v6 A8 C  F( {6 E# B
var renderer = new THREE.WebGLRenderer();- q; M1 }" l  u! R8 l
renderer.setSize(window.innerWidth, window.innerHeight);
  R* a2 K$ \* W3 G/ |document.body.appendChild(renderer.domElement);
( F% n5 R$ g" @% i# T2 S: G* L
* F. R( V* i6 V// Refresh Issue
- R' y1 Z* w/ `* K0 Lwindow.addEventListener('resize', function () {$ I+ _! h$ }' D- L" r$ R( @
    var width = this.window.innerWidth;7 n  q3 Z8 z2 C6 b, t
    var height = this.window.innerHeight;
3 N& p0 b; f4 `: T+ h: l    render.setSize(width, height);% w* f4 Z" p2 r7 @* B* \
    camera.aspect = width / height;( p/ i* n; K) E$ `5 H+ Z: b4 ?
    camera.updateProjectionMatrix();2 U" {3 |3 C0 m% B4 y" Y
})
* g: G4 g* K) o; y8 T6 y3 s% d" f. Q+ @+ U' i! ]! j4 l
//orbit contorls
# K6 S4 L/ G; ?6 ^5 mcontrols = new THREE.OrbiTControls(camera,renderer.domElement);1 j* M8 A' |) @+ u0 L2 V4 S, R" S

' Z1 k8 |) q* n//create the shape% ~+ {- [2 f# e6 n/ P
var geometry = new THREE.TorusGeometry(2, 1, 16, 100);
) [- T! u# E$ `; `//create  a meterial
5 f" [  |4 [7 R0 r" M  \var material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true, });
- `3 k3 F. v" D0 M//var myMaterial = [new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load('image/plmhome.png'),side:THREE.DoubleSide}),];3 U7 t' O+ s& m- b' V3 |% Q
//var material = new THREE.MeshFaceMaterial(myMaterial);
* D8 T+ X- K" S6 y) q/ X/ m( T1 r# Z  y+ O. }- u2 ~
var cube = new THREE.Mesh(geometry, material);
3 A; N! l* ~5 t; Vscene.add(cube);
5 X5 k4 {+ _; T6 S8 R/ S8 zcamera.position.z = 5;$ _9 D- E* @4 N! d  M; g4 F9 {
7 O7 G1 v; |/ r. H( @" j
# P: ?' l) M8 s& y

! ~# Z0 ^1 m  f. q% |/ Y0 M4 p. W! s$ H5 {" F' b! Y

2 i7 H' t2 _8 @2 @4 J//rotate . c4 ^  o, n3 O6 _+ ~9 E
var update = function () {
3 S" W. M0 d6 w+ ^2 O" c% U    cube.rotation.x += .01;
: t( i2 J1 M3 j; V- [    cube.rotation.y += .02;
( {1 w9 V4 b( ~2 V    cube.rotation.z += .02;
" S% X6 O" o8 \}+ Z( H2 c* e# V( [' |

- s4 Z4 |5 S$ {+ s* `5 l7 z: Tvar render = function () {
& A+ {8 o" l9 E( w    renderer.render(scene, camera);, ~6 q. `8 Q  t, w- b
}$ j4 q. K) o' }. t5 G

3 X% J' D- d" f! y9 H# d  Z& [1 c- _3 [( n, T
4 ?, H$ p) o# E. R$ O% e+ S& t
var Gameloop = function () {
- K" W/ X* m  n' T0 \- H4 ]* g    requestAnimationFrame(Gameloop);. x# ~0 i% V( j: g
    update();
4 z  e; F& x- y8 d. F7 m, F6 J    render();# H* p0 h5 r7 W* Y" M
}
* f9 L; r- @( f/ _3 F- ?- U& t6 i2 r* D! f- t
Gameloop();+ m9 k# |) F  ^
[/mw_shl_code]
2 S* R9 U: @$ G/ h8 U9 S, l' N/ I3 H+ Z9 l4 a
2 }! h) M% @$ K& \  H
引入争取的html,
+ `- ?* C% L, Y9 I3 j' |
/ y3 O3 m5 x* G5 P4 O/ V+ n0 Q[mw_shl_code=html,true]<!DOCTYPE html>
& h! h3 f& L# n& T( o1 m<html>
' j! K3 W8 K6 T7 u$ p+ p0 n' n3 O& B; W9 z* t8 L" l$ K
<head>3 l5 E. Q7 h$ l( m) v4 |2 j9 {
    <title>hello ThreeJS</title>& G& m* l5 \( @4 f$ g
    <style>
1 {& Q1 x- |+ X        body {
1 @$ w* R0 R. q# U3 D: n7 j            margin: 0;' L; Y' Y4 o3 T
        }/ e# u+ f, U7 [9 ?8 m5 D

) d3 @( G: v+ A2 m0 u: o. e        canvas {2 d$ S% ]# C0 T) k& A$ I) d9 i1 C6 p
            width: 100%;
& A: T& R8 J  R; J8 m0 T            height: 100%;' y( W: w, i) k4 ^6 k9 e) T
        }. c. g) |8 X6 w

% F! C* P; u+ ]- z5 S" Y5 @$ c        h1 {
! t5 X* i, k( H% e, c! R, u  _6 B            color: aqua;
4 }* G: [6 b' S5 v& e( @% n* M        }
( B7 I  [1 A$ `$ v0 z    </style>) x" r. T( y& R0 u4 z6 S( ^, b2 E
</head>
5 G% [! k# h& S1 u% f( ?: L( d2 O3 m% s; i& Y: Z' D* ?
<body>  `3 Q- \- M: h9 g& i0 d9 o
<script src="js/three.js"></script>6 F4 ?3 C- T9 `: ]; w, P& C0 B
    <script src="js/OrbitControls.js"></script>( n& w, C$ b2 ^, d$ T& k
    <script src="myjs.js"></script>
, }2 u8 u: Z* A0 E  T& O( n  
3 Z/ _: Y2 X2 l. c! R8 _, o) p' A
" Z+ @! h( B" y% o+ E2 j4 c0 C1 n0 Y% A: d

/ w3 p6 z. h7 _* N. P% m3 _1 _</body>
; E$ X. A+ S  ^4 U5 x& {/ r# a( @% S$ @$ ~$ `2 A
</html>[/mw_shl_code]
7 f  J2 ~( B4 l9 C  a( E5 I: Z# g4 `" z
效果点击这里:
- V( f4 Q7 m/ @5 O1 g2 s  I2 H7 v/ w8 Q6 H5 v- D; v# {
http://plmhome.com/doteam/lesson1.html5 M6 j# G' C/ t& b4 B" w6 H$ n
8 T# s4 Q( t& X' d

! E& V+ ^) z1 S2 o2 M4 J
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了