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

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

[复制链接]

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

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

admin 楼主

2019-9-1 18:45:09

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

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

x
% o( `0 W1 e0 c  T# D" A
/ r9 ]& ]( o% `7 k
废话不多说,官网自己百度下, threejs.org ,入门很简单。
5 {4 K1 ]7 d5 Q4 ^. r8 M; q$ c  K
创建的javascript脚本如下3 {4 u+ z6 C  U& W4 \! I2 Q* o7 q
6 O# |5 ?/ t$ s* t( X* [4 X; Y
GIF.gif # u. E. y8 r. N7 p6 b, x; x
[mw_shl_code=javascript,true]
% g6 r' r% C' A5 rvar scene = new THREE.Scene();2 b9 ~1 r  I  _
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
7 B7 ^5 ^) e. Z3 [var renderer = new THREE.WebGLRenderer();  C: Z) w% z. e! Q
renderer.setSize(window.innerWidth, window.innerHeight);
  s) `3 x, F9 H/ f# {. Wdocument.body.appendChild(renderer.domElement);; l6 |6 X0 I3 B# R  x2 z& s2 ?; r

5 D1 X+ Z% F0 T: G# _1 U% G$ {// Refresh Issue
, d% B  \5 v' wwindow.addEventListener('resize', function () {: m0 x4 n% x2 W3 x7 w2 ^- T' i( K
    var width = this.window.innerWidth;' A) r9 h7 U/ o4 u: r6 n; ?3 j" i
    var height = this.window.innerHeight;1 S: w( j) \  N+ u' C8 {$ w4 {6 _
    render.setSize(width, height);
, E4 o4 s7 x, j& B) x2 Z3 \    camera.aspect = width / height;
. \/ ~- o) w( ~    camera.updateProjectionMatrix();) |: R: U2 @" o1 f) o4 n
}). C) @; C( E, |- [& C6 M0 T# `0 J) H
7 x- f3 o: ?( [2 L
//orbit contorls+ W: l% f6 T  |3 U
controls = new THREE.OrbiTControls(camera,renderer.domElement);; u4 R4 I! d% x5 z, _5 P  d3 s4 F( d
! q5 X# y9 H- n$ b3 e$ _
//create the shape7 I4 W# v1 j& H& f9 _* K! n) q
var geometry = new THREE.TorusGeometry(2, 1, 16, 100);
8 Z  M" M7 ~! T. Z4 t//create  a meterial
, B1 O# v8 Y0 `- i* b4 r3 _var material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true, });
6 i! d  Q3 f, k8 q//var myMaterial = [new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load('image/plmhome.png'),side:THREE.DoubleSide}),];
& G; A" M& H) P. [. {) Q//var material = new THREE.MeshFaceMaterial(myMaterial);/ s6 k' p5 A1 D& K) y
; A2 T3 S2 k& o+ D4 R' B
var cube = new THREE.Mesh(geometry, material);
0 }  Q( k+ o) P: @, fscene.add(cube);
  q  J+ X0 O+ K) X$ ?- e7 ]" Ccamera.position.z = 5;; s$ A. ]  d' [
7 ~+ {/ J$ i4 R" C
  v0 C8 b7 A" E$ D3 E) H& B% N' ~

& C) t* f- H5 }
% g) v; D% a$ ^& p
% A- e; Q! h9 n8 G$ t//rotate
2 U5 K% a' g! Ivar update = function () {
8 Z4 E4 E- h* u+ F* U, b6 N    cube.rotation.x += .01;& T3 g1 L6 q% ^' z9 Z/ ^2 E: m
    cube.rotation.y += .02;& c! d9 ]/ a  T' H6 N/ g4 ^( T- V0 Z
    cube.rotation.z += .02;
4 _; o# ]- T; m4 j4 w: ^& g}
- `. l. e8 f( r' d$ M  c
, c# E% Q" j- j- P+ ^5 S" svar render = function () {- d% }) l7 n; Z4 ?9 t6 t. P
    renderer.render(scene, camera);
, F1 D+ n4 }0 a" z  F$ l}
# [/ f  E' }- n, M5 d$ m
( X! V, S, o5 b+ N- w1 r% i
8 V8 e7 d9 P$ F0 A' {
  u  u3 `( T' ~! r/ g8 _  Rvar Gameloop = function () {7 s, F! A3 n7 N: m9 b; V
    requestAnimationFrame(Gameloop);( K2 z' t, y2 i7 j. u" c* e
    update();. c+ A& n1 E) A, w+ n: Z7 A# b
    render();
! L1 i6 W" `7 @9 s7 o/ s7 \}. u; u  S; M  V' I
8 O, H# K" `2 E8 C3 U  N/ |3 e
Gameloop();
7 I3 q' l6 `5 u& t* g[/mw_shl_code]4 b/ U; g! N7 O
- m! M* M9 n" w

3 s+ y9 U' {: ~. o* g  f引入争取的html,
5 V' y5 ~! t" d' \& O
$ L, t/ @8 j( E+ M& ][mw_shl_code=html,true]<!DOCTYPE html>2 H9 K; ^$ `7 W" a1 A
<html>
  \7 p, N! L$ A8 g
6 E9 D& T! C* g/ ^8 J' o9 g<head>
, ]1 o8 j: c% V4 D  o5 j* S$ [. }& K    <title>hello ThreeJS</title>
  K: f$ {: }& a5 o$ V9 L/ w9 ^    <style>
( Q( s8 |$ u5 e+ V8 ^        body {
6 K3 {; s2 j) c            margin: 0;
7 T1 w2 ~- g  C0 J1 X5 O        }: H/ ]- u6 x1 o: S# |, w
" @3 v# H/ s/ x
        canvas {: k8 o+ j0 y5 Y4 H
            width: 100%;
  C: m2 J: I! }            height: 100%;
# m, v5 c# K3 V        }
. Z3 t! P+ _- o
4 S+ b& t+ b4 B! u        h1 {
, P3 E+ `" \/ v  z/ n( ~7 ?( B) z; S            color: aqua;5 r0 R. b1 C) r" b9 |3 N; D
        }
; u- O9 s6 N9 \: n0 E* m    </style>! m3 S/ d( k' u( u2 J. n3 U3 ?2 e+ d
</head>9 s' A+ J6 N0 x, ?. T" @6 x

* W+ l7 R0 S* c<body>
' q! ^2 e8 G( u' T, z# o <script src="js/three.js"></script>6 C+ }! |" E4 J2 W( p4 }
    <script src="js/OrbitControls.js"></script>
7 U3 e  t3 y: i7 o3 h9 i+ p    <script src="myjs.js"></script>9 }6 A! Z4 n% z! u) {
  5 j4 B& e/ W6 O4 r. A7 k. m

1 i9 P! k4 U2 ]( S, s0 }2 H. t: Q/ s& Y* ]3 J

# q! G' A) a, g9 {8 n</body>
. m" Q  W4 b' P# k2 U9 o7 q+ [1 s- a# W! G3 {' h
</html>[/mw_shl_code]% q7 B0 j' \- ~3 [# z1 ?4 ?: H/ Y

+ Y* t) V- T6 L5 x! t效果点击这里:
" B: T; A- S% W: l" v
2 s  k# i- Y! E/ yhttp://plmhome.com/doteam/lesson1.html
* j/ ?" B4 A3 d- P$ {7 @
* T  @1 C& S% k0 Y8 z" ^3 C: l, O, J/ b2 }# c, \  _! w/ ^
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了