|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
4 a/ ~7 A- e( s2 _
- I4 P' M! ^% Z
废话不多说,官网自己百度下, threejs.org ,入门很简单。; X* {5 W, z+ ~4 ^
, j9 t* z/ E/ F$ D4 J* K
创建的javascript脚本如下, H# _) s; G4 Z' n
4 Y7 q' j6 _$ t3 F
- B0 l8 s6 R3 g8 x7 c/ L
[mw_shl_code=javascript,true]% j0 ^/ l% i2 z( _7 k
var scene = new THREE.Scene();1 F: |1 X& j3 D3 a9 q9 @, t8 t
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
Y; P7 @' M/ T1 H7 U3 a% Jvar renderer = new THREE.WebGLRenderer();2 v, `1 ~) X, H1 N' D9 [+ ?: n* B
renderer.setSize(window.innerWidth, window.innerHeight);
/ z" d9 O- [; m8 r3 Q9 Cdocument.body.appendChild(renderer.domElement);
; _* @" q/ w: V( R7 E
; O( [- |# U I w// Refresh Issue W1 K: f3 @- M' d* Q# j
window.addEventListener('resize', function () {* Y) \& Y5 l2 P8 @+ C- k6 t
var width = this.window.innerWidth;
w( I( b$ a; m5 U% D4 T) G var height = this.window.innerHeight;
5 b! D% c/ C' W' n9 D render.setSize(width, height);
; a0 e; ~7 X8 \5 V- @ camera.aspect = width / height;
C, X9 t# f" I4 F camera.updateProjectionMatrix();
2 z" I3 A: I0 ?% A' S; Y+ G7 b" G})
2 L( u" b* R! r! P# L1 d( w* n6 J4 _( x; h. M/ r
//orbit contorls
6 @/ B( P. @. E4 v- ~, L- g* qcontrols = new THREE.OrbiTControls(camera,renderer.domElement);% a# B6 ^: z! r
3 L5 ~( @" d `* T8 N: n) j
//create the shape7 b. P: m4 i/ O( j% F8 d
var geometry = new THREE.TorusGeometry(2, 1, 16, 100);
& V' l( Y% N& d/ T% { h//create a meterial
& y! v* Q- F4 D% V i; m. Nvar material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true, });
5 {9 z/ G- D0 N' C/ O, D//var myMaterial = [new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load('image/plmhome.png'),side:THREE.DoubleSide}),];/ b. B. F, M9 g! y1 I' b! m
//var material = new THREE.MeshFaceMaterial(myMaterial);
: }2 i6 W" E: J) u1 N7 C7 Y9 Y6 l+ u. F, H8 L( P5 P, p, d
var cube = new THREE.Mesh(geometry, material);
* j8 k2 K( a, M H) b; h& cscene.add(cube);6 p+ Z! I! D+ `7 {4 t) r+ z1 H
camera.position.z = 5;& n( l4 ]$ o C+ V" @
* B; i# X' y% R$ `3 s5 }" H& ^1 g) l2 b6 z
! m E4 w6 x* G- X: C* e4 ?
) U. u! {( x6 }/ x8 g/ d$ V2 m( M- e1 F2 r- z3 c. q. w0 j
//rotate 1 | ]3 F! U i/ o: c" u
var update = function () {
+ D4 p$ }1 Z: f9 P) t- b cube.rotation.x += .01;
$ I* B5 f4 Q7 }3 f9 o! c: V cube.rotation.y += .02;
$ e- Y: R8 t; U2 b7 ?# C- U cube.rotation.z += .02;
, O7 ?' I9 Q7 [7 l5 p}
6 Q) Q2 o; R* q2 e/ ~3 a5 l$ q' H5 _: ?' E6 ]% a8 F/ `, m* R2 g
var render = function () {! }/ }% d( M e2 T: l5 l3 F; m! X
renderer.render(scene, camera);9 {) o! u v5 q2 g" O
}
5 {8 R' H" \6 a3 ~6 H7 I) L4 F p! R" U$ N4 }
( d# E! _2 G. V7 |' h) Z+ ^2 _' f- u
* |0 z% k2 ^6 ^; Bvar Gameloop = function () {! W2 b* U2 D4 o" Q9 L5 M
requestAnimationFrame(Gameloop);
* k$ l2 e% `( V1 J. H& k$ g update();
2 t# F o* [. g. G, | render();! p& L& a2 p8 R: [1 I, Z* e
}
7 b7 Z& u3 D5 J+ h6 @
& {6 k& K$ C0 qGameloop();# A1 S4 j, k+ h2 d5 B& n/ u: M
[/mw_shl_code]
, ?% I8 B4 T8 N& _* `; m
Z# B- }! F! ~& X# n( t7 {& n9 ^# j) g
引入争取的html,: n6 x5 F! X6 c1 u3 f
$ c6 y8 d- {& |- h7 t8 G% }[mw_shl_code=html,true]<!DOCTYPE html>' M2 N+ _0 B/ L# r8 }0 Z! e6 J
<html>3 Q& Z& ]2 H& \: F# B5 Q" C) l
! T3 |8 N$ L' i- A" W$ b8 F3 _/ S
<head>
0 S2 |7 a( V+ C D2 q. g <title>hello ThreeJS</title>1 o* m& c7 I/ M: u6 i- ]
<style>9 W6 {+ @& U0 h, H3 O
body {8 c. w# W/ X7 F% v6 W
margin: 0;. z1 q( [5 W/ f$ Y& F
}
. U+ q, E! M( D5 S/ a/ J
$ E: h; O7 X# I8 j8 U canvas {
- p5 B3 q1 U5 y6 W width: 100%;* D' W" ?0 ?1 p$ s/ x8 T+ t; j
height: 100%;
7 x c7 t. j6 K, r$ d }
9 `+ q- w% g( |. q
( z3 O- @, }& n8 x h1 {' ]3 g3 H+ G. y9 F5 K9 E
color: aqua;' u5 R8 Z4 |( j$ x$ @" S6 X4 k
}
Q4 K+ t, S3 t1 W5 f" b </style>
# L, Q3 E6 D+ J, W; ?4 w8 h</head>
( o3 h, y5 M Q' E4 T& w. I) g
4 x U6 K. i4 Y3 a; D- I<body>
/ g. Q! y# U% X3 g* e7 i; l& w$ F <script src="js/three.js"></script>
k2 ^* |( `" F, ^% y; ` <script src="js/OrbitControls.js"></script>: l2 n& v1 P& B9 \' I+ H5 w
<script src="myjs.js"></script>* e& S* ]9 K6 T& ^4 h
; o7 Z* V& C9 w' H5 n! U9 I, f2 w; m, O* u a( f3 Y; H2 q
2 p: L' \) c+ _ y+ P* P8 @
/ ]1 G; z- u6 `6 |</body>
1 G, C9 L) p, ?9 h+ b
" q- [: M$ y3 A6 t: o) ~& t- N</html>[/mw_shl_code] q7 X( L# n _: b
# ]4 [5 _- a' ]& D9 {) w; V2 J
效果点击这里:
" k& Z7 j0 c% d3 R# u2 }
2 o+ `1 T8 y) ?) phttp://plmhome.com/doteam/lesson1.html0 V4 c: ~. z0 b* c8 P
! J% p# @" d) `
: h# D. A2 Y9 o6 K# W/ M2 G+ P |
|