PLM之家精品课程培训,联系电话:18301858168 QQ: 939801026

  • NX二次开培训

    NX二次开培训

    适合初级入门或想深入了解二次开发的工程师,本培训结合ufun,NXOpen C++,大量的实例及官方内部的开发技术对于老鸟也值得借鉴!.

    NX CAM二次开发培训报名 NX二次开发基础培训报名
  • PLM之家Catia CAA二次开发培训

    Catia二次开发培训

    Catia二次开发的市场大,这方面开发人才少,难度大。所以只要你掌握了开发,那么潜力巨大,随着时间的积累,你必将有所用武之地!

  • PLM之Teamcenter最佳学习方案

    Teamcenter培训

    用户应用基础培训,管理员基础培训,管理员高级培训,二次开发培训应有尽有,只要你感兴趣肯学习,专业多年经验大师级打造!

  • PLM之Tecnomatix制造领域培训

    Tecnomatix培训

    想了解制造领域数字化吗?想了解工厂,生产线设计吗?数字化双胞胎,工业4.0吗?我们的课程虚位以待!

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

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

[复制链接]

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

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

admin 楼主

2019-9-1 18:45:09

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

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

x

8 k/ S, u/ P; A% X* b, F' |  @/ x$ H6 ~/ d" [8 S! u
废话不多说,官网自己百度下, threejs.org ,入门很简单。
5 E5 d$ e  W- d- W" j4 n( e2 o8 w+ j6 |, ^, g
创建的javascript脚本如下
5 l1 f" r- D2 X) V/ H' i( W
4 G* u! N% o3 T0 Y% L GIF.gif 5 `) X9 |. E/ P& Q. _) x* ?
[mw_shl_code=javascript,true]( n& t+ T! @7 F" M  J; k' w/ G
var scene = new THREE.Scene();& x0 ?3 o. R& A5 W) O8 u/ K
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);& E) l& J0 C( s4 R
var renderer = new THREE.WebGLRenderer();+ B. w; s3 K6 J, u! {$ G1 g& h
renderer.setSize(window.innerWidth, window.innerHeight);2 _, {2 {' ]) A' U+ |( q% [1 L
document.body.appendChild(renderer.domElement);
, z  A; E' I; t* B6 _/ `
& @) O& B" Q* `- F// Refresh Issue " C. e4 p# j$ h; ^, c8 Z; v
window.addEventListener('resize', function () {
4 l5 ?4 R  ]9 m+ K) _0 g1 R% I    var width = this.window.innerWidth;) d. p6 [& y3 o6 T% u+ E4 K; m
    var height = this.window.innerHeight;
) l/ B. ]7 S9 h5 F, ?( V    render.setSize(width, height);! @: T1 D. P6 S) r; s2 o; Q: i3 x5 n
    camera.aspect = width / height;& b3 @) t0 A0 \5 T) w" T# D5 ^: K7 \
    camera.updateProjectionMatrix();
' p* \6 o. y6 ]+ W& `6 E})7 s2 V& K1 C% h3 ~- \& v/ N. s

& a- m4 Q/ S  J5 H' x  g4 U: m0 f//orbit contorls1 h* W! k& Q  M; n
controls = new THREE.OrbiTControls(camera,renderer.domElement);) i5 E; m( W  m! U7 x$ x
  e7 b! b* A. D. W
//create the shape
0 A' R; P1 E& gvar geometry = new THREE.TorusGeometry(2, 1, 16, 100);8 r5 F! y" ^3 u
//create  a meterial
! g4 M* C9 K$ u$ B( \var material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true, });: v& ?+ F$ t. v2 q6 D) _5 L$ Z+ W
//var myMaterial = [new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load('image/plmhome.png'),side:THREE.DoubleSide}),];
  g: e$ Z4 k; ~0 W, p//var material = new THREE.MeshFaceMaterial(myMaterial);
% @# X! f$ N: p7 Y$ e% O+ t0 I( B' q% o; u
var cube = new THREE.Mesh(geometry, material);
+ C# h7 N; j8 m0 \scene.add(cube);& V- v5 k9 g' u2 }
camera.position.z = 5;
) {/ i' _' U+ P9 i+ W# C0 c* |5 C5 b' m, G# U. o& B" P4 X3 x
# @$ y6 g) ~1 ~) r+ ?

/ u! D' \' z4 n3 F( i3 v
8 x: R2 K4 ~4 o8 S
2 X; `5 F4 O4 e! p4 n. h* g//rotate , x6 W$ u' a$ D0 l, ?
var update = function () {
: b- s+ u- o6 X/ x9 W    cube.rotation.x += .01;
) l( Y9 o3 o4 I8 a) G4 \    cube.rotation.y += .02;
  B: ]( I3 W+ ?+ j  z4 O8 r    cube.rotation.z += .02;
6 d7 C$ B, M' h7 h}1 \) h9 c) |+ \' E* T
3 k( ]! ~2 W: E8 ]0 T3 U
var render = function () {4 {- d& I$ U8 k
    renderer.render(scene, camera);" E! _, H8 w8 \9 C. {0 m) r
}" z7 K' C/ g* b; w! t9 f
/ z& p- G. g, g& N
( ^, n" ~- c% J! U% s) T
8 `, x1 _+ e4 l2 `
var Gameloop = function () {
( m# I! G) [: a4 \! r    requestAnimationFrame(Gameloop);
9 n- q, a9 S4 j: y+ L# n    update();$ m4 ?# i" U' a6 c
    render();
& l+ D5 s+ E9 N}- Z3 H' W1 z& t; R, Q

- y: \% U$ }/ [* D( S# G% \Gameloop();; f# d+ h" e% ?/ Q: H% L% P
[/mw_shl_code]
( e, K/ ^8 J' f. _3 G
7 o9 ?* U7 m( C6 `1 `" X3 T8 C
7 _# Q& e: Q, t' u  b# F; d) G引入争取的html,
7 v$ _5 ]! X3 r! ~0 G2 S6 X
0 P& Z4 }- K1 Q7 V* j3 O* }[mw_shl_code=html,true]<!DOCTYPE html>+ ^$ H5 J* y0 p7 M8 k; ^0 z6 G
<html>7 a3 }/ i1 J1 o9 A  c

5 p. n- O1 q: O1 ^2 x<head>
4 j) _# d1 \+ ^5 R0 G+ H    <title>hello ThreeJS</title>
1 b4 W9 d6 O( P$ c! ~    <style>
7 j) `7 p" z9 k! H7 k        body {: l7 n7 U! a# m) V/ m6 h
            margin: 0;0 G" X7 l. `, }: b/ h) j
        }, @( @; `3 c5 K3 `$ \3 Q
; B: K" t# d" T0 o. I2 q
        canvas {
: ~6 r" g& s3 K% t            width: 100%;$ ]% j9 y$ D& k  p  v: u
            height: 100%;
7 S& x' d  o* u5 w  f. A        }: h/ v+ q3 l/ Y! }6 E# J; A9 E, Q

! [, e, D* l* m        h1 {* F4 n- Z4 @4 P$ k3 T; L( _
            color: aqua;' b1 M0 b/ C2 B8 E7 h& o
        }
6 X5 S7 {* x2 ?/ d8 c    </style>
0 a( E9 \3 N9 |2 R</head>
0 E# R2 s8 d5 l0 K1 E. R; G& ~. c& \+ Q2 x
<body>! d# U/ X& |% A  }9 M! }
<script src="js/three.js"></script>
3 ?3 i, Y& ^; j. ^- k3 g- c8 H    <script src="js/OrbitControls.js"></script>2 _$ {% x7 j# f. a! {- N
    <script src="myjs.js"></script>
3 D+ H' \8 t4 F  
5 V. I( ]' M6 D$ x) E
  ]) ^9 @( E) b: P
& u5 q$ b7 r; O/ ^) \2 [+ C# B# v% R+ u4 y7 P  U
</body>
4 n9 P0 X; {% @: S' J2 N% \) y7 Y! |* z! d# x, n
</html>[/mw_shl_code]
) B( ~/ `/ {7 Z' Z8 ]& N1 K6 h$ |% V& v! A: o( ?8 u
效果点击这里:
9 U( {# B8 e0 N& x. S. G& n4 c2 u" v. Y9 e
http://plmhome.com/doteam/lesson1.html
6 P4 I9 W( I$ P/ j1 x" W( `) l; u4 I9 ^# q1 N& G2 O4 d6 u# y

4 N' O: G; r7 z
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了