PLM之家精品课程培训

PLM之家精品课程培训

联系电话:18301858168   |   QQ咨询:939801026
NX二次开发培训

NX二次开发培训

UFUN/NXOpen C++和实战案例

适合初级入门或想深入了解二次开发的工程师,本培训结合ufun,NXOpen C++,大量的实例及官方内部的开发技术。
公众号二维码

关注公众号

点击扫描二维码免费在线高清教程

课程详情
Catia二次开发培训

Catia二次开发培训

市场需求大,掌握核心技术前景广阔

Catia二次开发的市场需求大,人才稀缺。掌握开发技能潜力巨大,随着经验积累将在汽车、航空等领域有所作为。
B站二维码

在线原创B站视频

点击关注工业软件传道士主页

课程详情
Teamcenter培训

Teamcenter培训

全方位培训,从基础应用到高级开发全覆盖

涵盖用户应用基础培训、管理员基础培训、管理员高级培训及二次开发培训等全方位内容,由多年经验讲师打造。
QQ群二维码

加入同行交流

点击扫描二维码加入QQ群

课程详情
×

PLM之家plmhome公众号

课程涵盖: PLM之家所有原创视频

×

关注B站视频

所有高清视频一览无余,全部在线播放学习

×

加入PLM之家QQ群

同行交流,疑问解答,更多互助

PLM之家PLMHome-国产软件践行者

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

[复制链接]

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

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

admin 楼主

2019-9-1 18:45:09

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

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

x
. w. b' Q1 }: O6 e3 G$ G7 n0 A! F
1 C9 Q7 ^7 G7 a& o+ d; V6 G
废话不多说,官网自己百度下, threejs.org ,入门很简单。
' A! P  k% ^0 T, y9 Z  r2 T2 \' o3 x4 G7 y9 i! c
创建的javascript脚本如下* C3 A. l  e; L( H

/ b2 X6 p  ^( b) T; ? GIF.gif * Q- j( ]9 e4 G3 t6 X% }  I& A$ f' R
[mw_shl_code=javascript,true]: t! s; t2 b; S
var scene = new THREE.Scene();
9 z* x0 ]9 C+ N+ S  `: L0 {9 a( Qvar camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);8 T: y$ T0 w, S
var renderer = new THREE.WebGLRenderer();
7 V8 J$ G0 {6 ^0 Q# d9 arenderer.setSize(window.innerWidth, window.innerHeight);
* y( `- u) ?+ w: J' ]* Mdocument.body.appendChild(renderer.domElement);
) a7 v" i6 `4 m( M( L
* C' E' \8 K: @9 h6 v8 G// Refresh Issue
) r3 s8 ~( m: a8 s2 y( V% K" gwindow.addEventListener('resize', function () {
( a: @+ h* L3 \: A    var width = this.window.innerWidth;
4 u6 x  }4 m+ b# j    var height = this.window.innerHeight;/ F6 Z. V* g; }, e# q
    render.setSize(width, height);5 N9 d& k2 U5 e2 X8 S5 U
    camera.aspect = width / height;
4 D9 U! T) M; @2 h' u    camera.updateProjectionMatrix();
9 U7 ]) H1 X) ]( [6 A  n})
% k  h4 A5 x$ w0 ~; C2 J1 Y, N# n8 b& q
//orbit contorls
- _; u* q9 ]2 Z+ f1 B% Y4 Ucontrols = new THREE.OrbiTControls(camera,renderer.domElement);6 D( @% B% N1 |% V# ?

5 Y# k6 X' u) ^, r$ n//create the shape
5 J* _% Y# K- m0 Gvar geometry = new THREE.TorusGeometry(2, 1, 16, 100);) \' s* @6 `- [
//create  a meterial
3 @( ?0 Q4 @& }* U% n% Cvar material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true, });1 X0 l' ~7 p3 f
//var myMaterial = [new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load('image/plmhome.png'),side:THREE.DoubleSide}),];7 U. |! N% ^& M4 S; h- @5 r
//var material = new THREE.MeshFaceMaterial(myMaterial);; \6 p, r, X) l* D% p8 S3 J

$ q5 w/ Q2 _; ^: Ivar cube = new THREE.Mesh(geometry, material);
3 A& o8 D) Q" u0 M4 [' X: l' n6 D" iscene.add(cube);
9 j6 ]1 J, m% T( ?7 @camera.position.z = 5;
7 ?; }$ i: z' l/ S5 O6 I$ J
6 M& J! X0 W4 C8 E& n
7 {3 `6 k$ A5 J% `) L2 H! T9 a, _7 j$ e3 H+ o9 ?( V8 ?  @; p

3 f8 o2 O5 v, _1 q/ W7 M
+ G" L8 O( o; N( G0 L9 N//rotate
# p! _; `3 p* u" q( Jvar update = function () {. H8 O- H, K+ Q
    cube.rotation.x += .01;; w7 E+ Q0 C8 H( }0 a
    cube.rotation.y += .02;+ Q# }: a0 W5 Q$ d9 D
    cube.rotation.z += .02;
- F, R) ~: @: B# u4 V1 c. P' i}, f4 |9 I6 z  J/ S( ]  w: a! z7 b% S
0 ~+ p( _7 X; |+ M; V0 V/ G, @$ o
var render = function () {
! G; O" ?( C6 |; n" m& t$ l    renderer.render(scene, camera);5 Z5 |) I' p& j, }3 S* D/ l& G
}9 i+ c9 I) `# w" U# l

  J5 @( Q& s7 T
( @0 {6 w3 }8 H! m0 M! U4 u% R* t
  {: _: @8 t1 K& Fvar Gameloop = function () {5 O3 x. M- i: M7 _
    requestAnimationFrame(Gameloop);" M$ |7 w0 m% J$ o6 M
    update();
9 |, J) l7 q; r7 i$ I1 q    render();
, M$ C- B9 ?5 |3 |}
/ `  r: ~9 N$ W
2 ^% ]% ]9 A5 C4 H) U+ R6 RGameloop();
) P: g/ }1 r2 L8 p; `[/mw_shl_code]
) v! O2 h1 M: t: x
  @. e- ?- D: ]* w$ W# v/ x! l: O" j  x
引入争取的html,
, i5 N% i# \, V' e0 d. a4 ^) Q% h& P% M
[mw_shl_code=html,true]<!DOCTYPE html>
# i. y% L% J5 j, v! w<html>& u- l; D8 {3 C8 K' q4 U

/ W1 w! T$ F5 d3 E" R! U& X' F/ H, A<head>
6 {5 S$ F- t: `& G    <title>hello ThreeJS</title>
$ b7 w9 v. g. S& T; I' h; M7 j    <style>
0 u9 Y+ F! P3 c! J, i1 ~        body {) ?; I2 M2 l+ A! J2 F( l
            margin: 0;3 W; N7 \; ]# z# P1 K4 Y
        }, R, w1 v* Z. H2 P! T- u2 s1 q

9 @$ N5 Z: B5 c' }; V        canvas {. X, c0 o& v/ n; ~
            width: 100%;! s! U, B- a$ Q+ P* g
            height: 100%;' r: j7 Y6 g  C) S: V
        }
1 A! Q3 @' J, n8 t7 q
% C" D4 i  O8 i1 y4 w! b' J5 V        h1 {9 Y$ t' ?* P/ Q5 J% B8 u7 {
            color: aqua;
2 f8 B6 _3 A: o# D        }+ Y# b9 a, l  F$ a' Q1 {/ j" X- V
    </style>
8 p, ]! {/ W, S- R8 R; d% D</head>
8 i! O1 L4 i2 b, ^! j+ \% s0 }. L  i+ f9 o
<body>6 ]$ l0 R$ S% _6 Q: h
<script src="js/three.js"></script>
& Q/ V8 q) l. v1 I! _- R    <script src="js/OrbitControls.js"></script>
. U1 J, I* k+ e. c    <script src="myjs.js"></script>
7 w: Z( |* T' q3 M6 B4 y# p8 |# {  
3 u0 L( s/ M' P% x' J4 E2 U" |; X$ s
, Y9 ~7 H' |) J1 r
" T$ p- p8 k3 k& g' m3 q6 q! B  `% g
</body>
0 g; F" {  C# u" g5 Q1 k1 J9 I1 B0 ~7 ^" }5 d* O  ~
</html>[/mw_shl_code]: J3 ?4 h; J7 d3 j& w8 c

& C0 W8 Z% B; [5 T" p效果点击这里:# P6 b) y; `* E) A

& e) s* |# M2 l2 Xhttp://plmhome.com/doteam/lesson1.html3 w. Q8 q' c( N
0 f, P0 r  f3 q2 y% u! R( q
2 N# y, M/ A* j( R, b5 X. ^# ?% L( T
上海点团信息科技有限公司,承接UG NX,CATIA,CREO,Solidworks 等CAx软件,Teamcenter,3D Experience等PLM软件,工业4.0数字化软件的实施\二次开发\培训相关业务,详情QQ 939801026 Tel 18301858168 网址 www.diantuankj.com/ doTeam.tech
回复

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 注册

返回列表 本版积分规则

  • 发布新帖

  • 在线客服

  • 微信

  • 客户端

  • 返回顶部

  • x
    温馨提示

    本网站(plmhome.com)为PLM之家工业软件学习官网站

    展示的视频材料全部免费,需要高清和特殊技术支持请联系 QQ: 939801026

    PLM之家NX CAM二次开发专题模块培训报名开始啦

    我知道了