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 2596 0

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

admin 楼主

2019-9-1 18:45:09

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

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

x

  g+ H) {* n# N, u& q% \2 k/ `# t. a$ \
废话不多说,官网自己百度下, threejs.org ,入门很简单。
. O6 o/ @  M) }' l, z  B
  S: v9 Y, [5 S1 N创建的javascript脚本如下$ @! a6 F: v1 K% {4 m' B( ]

% T: P) g; D( N7 T* y* @1 O GIF.gif 9 a! `7 [3 a+ ~" z% P
[mw_shl_code=javascript,true]; r4 `( Q. I5 X3 L3 E" c! h
var scene = new THREE.Scene();
+ j$ c) ?# f& |5 Q6 F3 [7 G# hvar camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
$ b8 _6 |. H5 w( w% m' ?6 ?var renderer = new THREE.WebGLRenderer();
9 Z& k& f2 N# erenderer.setSize(window.innerWidth, window.innerHeight);4 O/ G  L5 l9 b* L- O
document.body.appendChild(renderer.domElement);
* Y9 C, ?) r+ g9 m
5 |& |3 L0 K! D// Refresh Issue
, }- d" x! H: vwindow.addEventListener('resize', function () {# r0 A8 v. Y$ [4 i% j/ l& H8 G8 O" c3 O% `
    var width = this.window.innerWidth;+ Z7 V4 |; D' T2 Z* c% V) }
    var height = this.window.innerHeight;, l  x, i5 _8 o( D
    render.setSize(width, height);0 ]! |( L3 s0 D$ b0 Q
    camera.aspect = width / height;
$ W+ U; A- w7 C* G! D' _    camera.updateProjectionMatrix();( A: h: w) g9 U2 k/ a& \, C
})
1 ?7 D6 t8 E: j
+ N1 m3 Y! y2 \5 q. o) @+ @//orbit contorls! a: Q( e2 H9 R
controls = new THREE.OrbiTControls(camera,renderer.domElement);+ s1 m4 s" _. v- H1 o% X
9 e4 s  L3 l! ?6 _
//create the shape! ]4 L! i2 [- b4 {+ {
var geometry = new THREE.TorusGeometry(2, 1, 16, 100);
* c8 c, |" I' g" m+ k//create  a meterial/ l8 Z) S# W8 ^- J( _: w6 c5 p  ^
var material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true, });4 }0 O" G, q: }2 \2 f
//var myMaterial = [new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load('image/plmhome.png'),side:THREE.DoubleSide}),];& r4 z. H, O, ]' I3 ]  _% W
//var material = new THREE.MeshFaceMaterial(myMaterial);7 R& r* K3 X3 `8 `+ r
" K$ `/ t" q* ^: {& t! }# _9 v
var cube = new THREE.Mesh(geometry, material);) i+ U$ C& S, a
scene.add(cube);
6 g- x, [; a. @$ G& L4 tcamera.position.z = 5;0 v! i7 Q# [2 n& v7 O$ q6 b: n* x
9 n9 X0 Q$ h- [: V" a% A7 O2 i
; C& H" H6 h) l

) p* K! o; Z  r  @* ]2 c& z$ t
- ^6 m6 r2 B1 T; X$ a; k5 \
' l1 B6 V7 E1 o" Y9 W. b//rotate 0 l$ G  h1 d" P% A
var update = function () {
* R: Q- z" I4 _2 |2 r    cube.rotation.x += .01;
( ~* w! @: k3 U0 L' ?0 c    cube.rotation.y += .02;3 K/ J$ ?! u9 s3 }5 M
    cube.rotation.z += .02;
0 Z# ]! {0 V6 d4 j! n}1 H, Q$ A7 }  Q5 k: |9 @# g7 N
4 G+ P$ s+ f. U# b$ n
var render = function () {
5 e) x8 b' s. f! s    renderer.render(scene, camera);, @' S+ R8 E1 s- b5 _3 c
}- J! M* L$ |* ?- l6 o. C* P

; k8 j+ ]+ y. p* O0 Z$ v- s+ c% G: Q3 `- \
+ J( R* ^7 ?$ S, o# x
var Gameloop = function () {
$ y5 y( q' I/ G; I% O  N1 H    requestAnimationFrame(Gameloop);
: a; V% i# w5 z8 k, j0 p    update();/ m( {$ o: d. N( K5 [) N/ t
    render();  t( |  X3 ]' W/ {) ]
}/ Z0 ?/ |: ]4 G0 Q6 Y0 `! j. L
+ G8 A; S- g% O# X
Gameloop();
, g8 P1 o1 h; N% Z+ z8 @[/mw_shl_code]( U& B; q/ z0 U! n

9 P$ g; R! V7 U1 t+ W# b+ x, U! `5 P3 V) F6 n
引入争取的html,$ r; F, J0 l4 Q# N" K) r) l% o. b

' K; l' H9 h1 A[mw_shl_code=html,true]<!DOCTYPE html>3 u/ S  Y/ Z8 d0 [  j
<html>
' d! o% r0 J  B% n* z5 M/ s4 H- W  \- y3 P2 X
<head>$ `1 P1 m0 T- Z  q
    <title>hello ThreeJS</title># A! d- [  I/ q( d+ \
    <style>2 N6 z; [6 \8 [1 I
        body {, u$ F  v1 q0 ^+ V+ L
            margin: 0;9 P, z0 u! A$ {. v4 w9 u
        }
+ W6 G9 a6 _+ c; M
) b( T# u3 S& k3 K7 t4 X/ Q        canvas {
. L; L5 U0 E* H8 {7 ~) Z            width: 100%;, _0 I/ w- g8 g+ l  @& i" v$ `
            height: 100%;
* Q. _4 a& q  H; i* z        }
$ L! P) b& A( k: x! ~! H! o' q# `- I" _4 ^; f
        h1 {
- ~7 S3 b; r7 Y+ f& V* |            color: aqua;
( d+ m( r+ D$ {, {3 b        }5 G$ ?; t" Z. F+ M
    </style>6 a  z* e$ B6 N3 Y
</head>8 P6 y0 D2 p4 N! ^( `

, B9 n+ T: g, h<body>7 E! f% c; \8 h8 Q. d0 y
<script src="js/three.js"></script>5 r, ~; e- {8 R0 [
    <script src="js/OrbitControls.js"></script>
7 {& y  n, n5 p  l. }    <script src="myjs.js"></script>2 s& U( p4 N7 Y8 Y5 l8 H
  $ c) \1 Q/ B- E3 _; f5 s2 s% _5 f
' ]' h3 ]4 h5 U1 P4 a. m2 X

' l- @/ K$ q( i2 t1 D
$ p0 i4 i; d" j0 S# B, J0 d6 O</body>
( {) R- v# x& X. h8 ?* }
, Y  d3 {4 v3 ]</html>[/mw_shl_code]
& h- V+ A2 j; N/ W% Q5 q' }& E6 g' c. h% q. s  @* I9 a. N
效果点击这里:  R( e# Q4 l1 B3 \3 h/ |/ W. Q. Z
" U2 _. M9 ~# e# p
http://plmhome.com/doteam/lesson1.html
- b1 s2 W& t% {$ K: _1 X, k, a( b* B4 J! l% w
& O3 \& V; U) x
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了