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

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

[复制链接]

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

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

admin 楼主

2019-9-1 18:45:09

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

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

x

9 l' X# b& R$ [% N' J
! j1 S' p. Y0 ?# H# M废话不多说,官网自己百度下, threejs.org ,入门很简单。
2 ~5 M2 ]" l" u( W; Z
; p) k4 S) l" k( W5 P创建的javascript脚本如下
( b* a4 ~9 N! {' M6 c4 ?
/ r# u0 {! ~) Q0 } GIF.gif ) S1 L, N0 ~+ b6 }7 `
[mw_shl_code=javascript,true]7 x$ K  l6 a& V3 |, n
var scene = new THREE.Scene();
! E3 U- o; p$ |% {var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
, O; W5 M; y, n0 y  Z9 B* Avar renderer = new THREE.WebGLRenderer();
9 U5 p# Y6 P% X. a% C/ f# Zrenderer.setSize(window.innerWidth, window.innerHeight);/ ?/ ?; M6 @& ~8 d4 p
document.body.appendChild(renderer.domElement);
" Q# X; _3 s1 Y8 K3 i6 k, P$ |4 {
) ~/ }) _8 Z$ c+ H# ?9 O! Z  g: `// Refresh Issue 1 F9 U9 S. K  b  J1 Z) I) y: }
window.addEventListener('resize', function () {
) A3 G9 \, u% F5 m    var width = this.window.innerWidth;3 `1 B; c9 m' M+ @  Y( q8 ]
    var height = this.window.innerHeight;. B4 p) B6 j% q8 V+ A* A) e, i
    render.setSize(width, height);- Y& |& n3 J$ T: d, m1 k9 w
    camera.aspect = width / height;# k; c9 \: w5 q9 u, R" n8 q
    camera.updateProjectionMatrix();2 s  {& r2 w( ^7 c2 E0 f8 r
})
* {$ j2 P0 D( g( j3 h/ t  Z& z
+ T/ a, u( W5 i/ Y5 V. U1 x//orbit contorls1 s7 W# [1 K" J
controls = new THREE.OrbiTControls(camera,renderer.domElement);
  I8 p9 n3 `( f$ {1 J
0 U6 u' w# Y4 D$ a3 M//create the shape/ ~( V9 Y2 w7 ~; F; O( M
var geometry = new THREE.TorusGeometry(2, 1, 16, 100);! J% u* U: o( ?1 P. G
//create  a meterial- `" ]% m9 v1 |! @+ D" p) V% @
var material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true, });; P8 \5 U8 V$ Y0 g/ o( M3 Z
//var myMaterial = [new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load('image/plmhome.png'),side:THREE.DoubleSide}),];
' j( L7 s3 D# F) B2 e//var material = new THREE.MeshFaceMaterial(myMaterial);
# G2 a' k; |) w) T6 S0 K) t9 Q$ Z6 }5 ?& I
var cube = new THREE.Mesh(geometry, material);, `7 s" P$ f2 I1 ^
scene.add(cube);* {5 l7 ^/ D4 a2 M0 Z" [
camera.position.z = 5;
2 R" j, [8 d. k6 @2 J* w+ c9 m2 s4 S
9 y/ P8 P2 {8 u: A* M6 K* j2 H

, f0 x+ z# T/ o& Y5 R2 t9 [4 e3 V3 |: Z

; Q3 z' J, M' @  |" k8 A//rotate
) M. g' V/ x; }- P  l' k7 qvar update = function () {+ Z  ]4 c) }& g, `! {
    cube.rotation.x += .01;
9 {5 l1 ~! B# e! k% Y    cube.rotation.y += .02;" v1 V) z) U. o
    cube.rotation.z += .02;2 C3 |* f9 P" O/ z- h9 t
}0 Q" Z/ q8 o' L

2 X8 I( R& w- Y1 t6 `var render = function () {$ |+ ?8 S5 T5 c' o
    renderer.render(scene, camera);- q% c9 v6 s$ e; O
}
8 J( j7 ~: H, `3 O1 v* L8 y8 \- g' d
3 U$ g9 C8 q/ d: S* C7 Q% w+ N7 o4 z$ @, j5 ~5 d2 X& O" \
* A; F  e0 N8 m6 S
var Gameloop = function () {
: z/ w9 P/ x: r' e5 E& K, z: H    requestAnimationFrame(Gameloop);
/ b, E7 l& |, _0 k1 q* O9 Y    update();- m' M. f. |* r; g$ a1 \% y( m
    render();1 L8 ^8 g/ ~" J' x0 E
}
0 j8 D% I9 q* P  Y# r$ t  v
, y' m  k2 |9 WGameloop();
( E% Y8 D5 h+ H) f- s[/mw_shl_code]/ `3 C& J0 G* O% Z0 m; h$ O

% i, d$ Z1 j& c
3 l' @8 Y; Q: u引入争取的html,* d: b! [+ W' @

* }; p$ K- P' x1 I2 K[mw_shl_code=html,true]<!DOCTYPE html>
6 Z8 @- G# j* O; N( m  u<html>
9 t; Y/ f0 m2 I! f# M8 e  Z& c0 x- k2 N, T/ v
<head>
, U7 ~9 j% k+ `+ F( M' h8 z    <title>hello ThreeJS</title>( a4 M' L4 d$ A8 ]# U  p
    <style>9 y5 A) R* n0 E6 E1 |" V( ^; [7 I
        body {$ G# m5 j) v5 U; H
            margin: 0;* E$ C5 ^3 b* h+ H6 W3 f6 T6 S
        }
9 B, [% u$ C4 {5 }
; R' C/ Y2 H" _/ p: w        canvas {2 A) f) d4 i9 b: v: Z- }$ W
            width: 100%;4 z; M* X; N7 r7 R2 W& i- d3 P
            height: 100%;8 y- M  v3 m, K* X2 R
        }% [, S4 S8 |( n
9 ]. j& }  V2 M* n0 I, l3 I
        h1 {
6 Z4 r& h6 s  ^) [. u/ |            color: aqua;
8 C: Z9 q# q9 W: S2 L        }# j0 M/ r1 K) J! c! \: z
    </style>( P* ^3 }7 @5 P9 \/ t
</head>
* L. y8 _0 b+ D1 Q, u
4 s2 Z* Z) X, F+ K- V7 M- x( V: A<body>! Y  O( Z9 c9 n( J" u8 Z$ B
<script src="js/three.js"></script>& ?  T& p5 f% A" E0 U! L
    <script src="js/OrbitControls.js"></script>
* {$ Z3 d: ^. Q, U7 O' ~8 a    <script src="myjs.js"></script>
/ n8 }) [' p* x2 w! W- g/ T9 G  ! S6 J* x; g# b; I

- |- I) c( u: F; H' g$ W. O. y$ z+ [6 f; I) @% u: D$ `' Y
$ U5 c8 {" Q7 }. l1 U$ s
</body>
9 g! F$ q* d! ]( a6 b1 R
  x5 u& H& u$ c: @" e" Z" n</html>[/mw_shl_code]
  i, y1 B5 ?9 A' A* t( o# s( k( `7 J) H4 \. }, ?0 a+ y1 e- }5 Q
效果点击这里:+ Y& c( }8 |" ^. `
1 p- e" j, t5 [) A" g" `
http://plmhome.com/doteam/lesson1.html
. @# E. [+ v) k' [3 Q) \5 R2 v5 {
9 v, k7 c7 F; j/ _# [) y* ?
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了