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

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

[复制链接]

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

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

admin 楼主

2019-9-1 18:45:09

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

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

x
5 r7 c. H+ a- ^1 L. ~

( ^* V" ]/ g0 k7 E6 j4 ~6 c废话不多说,官网自己百度下, threejs.org ,入门很简单。
" J: A5 U/ E, q- K" t- `/ B1 P
创建的javascript脚本如下
# i( f: {2 o/ V2 G; E8 [2 p2 c$ z5 m  u
GIF.gif
- @" q6 X- l; W3 G2 _3 U, ~9 [/ ~[mw_shl_code=javascript,true]. c0 u# F) }, s  a* k; _) l" V
var scene = new THREE.Scene();1 {/ n( c# W3 r: X! M
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
0 M+ v1 {$ e/ b5 D# |var renderer = new THREE.WebGLRenderer();
3 n" y! ?' D5 b% @( C* b. {9 ?/ }renderer.setSize(window.innerWidth, window.innerHeight);
+ [  K! y# K2 D7 k6 E) r( C5 U, }document.body.appendChild(renderer.domElement);+ x8 [  i& d) V* v2 x9 \4 t
- t" }5 o% ~5 K! B$ Q! W
// Refresh Issue 1 m, {) _0 G% h, P" F& H5 x
window.addEventListener('resize', function () {5 `- J: l6 h4 e
    var width = this.window.innerWidth;: v" y3 X* @  n) M8 Z6 T
    var height = this.window.innerHeight;5 u1 U% {- G/ L9 \5 r( @* c  g
    render.setSize(width, height);3 m3 s8 u; a7 Y; n8 C. \
    camera.aspect = width / height;  j' D7 U$ q, T4 K) P
    camera.updateProjectionMatrix();
" u2 I' T3 p+ b})
" q, Q6 ?, Z: G; F# e( E; z7 ]  F! i* [
//orbit contorls
; k$ u4 n4 F( s( S3 [controls = new THREE.OrbiTControls(camera,renderer.domElement);
4 T5 B+ ?4 J6 _
. }3 M, d1 g& B" Z* l//create the shape
3 y3 k* F" ^/ [' }var geometry = new THREE.TorusGeometry(2, 1, 16, 100);
4 m. [1 g7 _9 l. j7 R/ a& L* H//create  a meterial% V/ K! r" w$ h+ E5 T1 {& D
var material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true, });5 P! q2 D  }2 d5 ]; T
//var myMaterial = [new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load('image/plmhome.png'),side:THREE.DoubleSide}),];
) H8 W3 k0 I' u; L9 J! J//var material = new THREE.MeshFaceMaterial(myMaterial);6 X( E0 H; j' J$ L2 Z. P- }

2 d! z; V: x. Z" E& z9 C5 xvar cube = new THREE.Mesh(geometry, material);" _, |2 z* ~% [! a2 U
scene.add(cube);
6 ~6 v; Y8 l- @- C% vcamera.position.z = 5;5 r4 ^4 M4 V8 c1 ?5 e: J! n% N+ R
% h/ Q- W) _' }% y( ~; I
+ x8 ^" e- X2 N$ @& I. N; w
& m+ ]  J$ w7 B2 S, a7 y# J
2 A3 t# a. v' {; u! k, {
' [- e2 E) r/ ~/ W
//rotate
& Q# d( T$ Y! y2 E. pvar update = function () {$ ^3 M2 Q1 K6 V! e, _" ]4 z. K; ~. v4 ~
    cube.rotation.x += .01;' L0 @# _4 j4 L; [9 I! B
    cube.rotation.y += .02;
. m2 \4 e  c7 N) l5 C6 N: H' H    cube.rotation.z += .02;
1 c, {4 F4 ?2 `1 x4 E+ L: `}- ]9 u$ s( {0 q6 @# q0 N
3 X% t" G4 u4 [
var render = function () {% s+ t0 s" m7 A& C( ]' y! n7 {/ R3 d6 H* s
    renderer.render(scene, camera);& K4 W, Q% O6 F9 j# V$ _
}' S& [/ S! P9 p: O9 O( Z5 I

# |& O1 K5 {* d+ `& x7 B
3 `* n& [& m' V0 d4 u5 v# U
6 P! [" e9 x% p5 {& G4 S/ C6 Zvar Gameloop = function () {( a  R' i  W5 F: d. [. w+ ?5 p
    requestAnimationFrame(Gameloop);
2 Z8 [; ^1 M3 F9 J9 |9 V    update();& O" v$ q" _0 D  k
    render();
* ?2 y2 U% J& y7 V}
, Z( k# y) j( a1 j' Q2 n
5 _( b5 S7 F0 h$ ~0 }' n$ JGameloop();
. a" |4 X3 }. g[/mw_shl_code]
0 @' y; ^1 o" I5 o% p* j
' i& q  }2 g' f2 @# \2 V" S' R0 ]8 H+ v
引入争取的html,/ ]- |: b& O. f& j% [& j' [

7 I. x' R. G* i  b: w& m[mw_shl_code=html,true]<!DOCTYPE html>
4 Y% D/ I( |5 A" L! I3 \<html>
9 \& ]2 W) W* B" A. ~' U) S2 r' k5 s5 d0 L6 X5 |3 y
<head>: n. @" a/ M7 o
    <title>hello ThreeJS</title>( f3 Q' z  h# a( b; x6 s) l
    <style>
: h( u6 k- B# c: m. m2 G        body {: E: i, b1 @1 f# k2 l* j; D3 E+ p
            margin: 0;
" \7 l$ r6 {: @- z0 m2 j3 e        }
& W: N" d# l+ T- z$ l; D# f# _* X, J0 m  f* e3 C- T3 D) H9 m. H
        canvas {
, Q, V+ @& T/ R, `2 G" O- W- l            width: 100%;9 q4 [) D# S' ^0 y" N& M8 y
            height: 100%;" K( ?, k  N1 A  v) M; W
        }5 C. X; F1 c# g/ s
9 H. {" _! N% N4 N5 Q
        h1 {
. N+ T* P9 B$ e% `& J- _; m( X            color: aqua;7 o- L% P' W% L5 {- R$ Q  b! V
        }9 N" X) l) t, v0 M1 r
    </style>
7 M6 A* H- m0 X# [# L9 Q' O: C</head>7 v  }3 O* u; O
3 J9 W% P8 j+ H; t; N2 {! R
<body>
# f& ]9 |4 r; k <script src="js/three.js"></script>
4 t9 }  ^9 S# Z# F, z" T    <script src="js/OrbitControls.js"></script>1 w$ I4 |+ f+ W5 j
    <script src="myjs.js"></script>: L' I7 X  v( Z! `) R# n
    ?: R! k% V9 ]
0 D. x/ ^+ [" R
) D) m/ T* V. q+ X7 k/ Z& ?

( L6 O- Y$ A+ l' j% I, L. g5 G# c, @</body>
9 P5 a! m) w/ e9 p8 i9 O* K
; |# J" C' b+ r9 K' U, q: ~</html>[/mw_shl_code]; c6 E5 M7 ^1 v* l
* i! E+ e7 y8 [
效果点击这里:4 _. b( h0 [8 `8 z3 T

8 \* d6 H) g- a; D6 X+ c2 }  Mhttp://plmhome.com/doteam/lesson1.html( z8 K2 m+ g& ~' o' o# A) w) y  i

9 i4 P3 Y$ T8 S& x4 q
' Z1 \" |2 @" z
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了