|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
2 w! a- w) r4 h z2 x N8 g+ R. C) W" b5 U4 P( H: U# v) z
废话不多说,官网自己百度下, threejs.org ,入门很简单。3 a' Q: z; d A' ^! m
% [1 }; b' F) W创建的javascript脚本如下
5 u# U& L. P5 p% k
3 b( F8 K6 n2 L- I! d3 f+ d. p
! \0 `9 _$ b- B1 G( F! i+ H8 n
[mw_shl_code=javascript,true]
! K2 C8 n) N# Y hvar scene = new THREE.Scene();
# y1 {6 ^3 O$ H% z2 `5 R; jvar camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
, }* d0 }) W j3 [3 s2 w1 B2 xvar renderer = new THREE.WebGLRenderer();
9 s7 k/ h) k! ~8 j& M/ Grenderer.setSize(window.innerWidth, window.innerHeight);
, s% U& Q* r1 x- y: s6 G4 tdocument.body.appendChild(renderer.domElement);" s: K1 m0 P9 s& C- [5 X
. Z6 j) B3 _" O. ~! d/ v( h) T, ~// Refresh Issue 8 L! S1 ?& c \# K
window.addEventListener('resize', function () {
}6 ?- c+ S, u6 J) \- J8 e var width = this.window.innerWidth;
j$ S/ T+ C7 G' w$ [ var height = this.window.innerHeight;! |( v9 t- ~' k. L% v5 X
render.setSize(width, height);
~+ ^. }3 \: g- A camera.aspect = width / height;
) K. G$ b- m F# x {1 F3 g camera.updateProjectionMatrix();/ G3 w4 E- D' r% U. T0 u
})
- \2 Q+ k/ s- R7 K
3 T4 ~) V( I& h. I! }& R//orbit contorls0 V( @8 T& p4 w2 e! C1 x
controls = new THREE.OrbiTControls(camera,renderer.domElement);' |5 y: D; p% u" T& a; Y `
) X ^9 t0 q+ O9 [% \//create the shape
- q* R9 ^" f. i: }var geometry = new THREE.TorusGeometry(2, 1, 16, 100);5 w( b7 ?7 }, }/ b4 N4 P( v9 I
//create a meterial
8 u# S* ^. e8 F svar material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true, });. U$ B$ j8 R L/ B r$ G. @
//var myMaterial = [new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load('image/plmhome.png'),side:THREE.DoubleSide}),];
# {" g( \! q+ x. Z# X: y4 Z; n//var material = new THREE.MeshFaceMaterial(myMaterial);8 K& u/ [# O$ Y& F% h& V2 s; H
9 I0 R$ t& t' @! ]! C
var cube = new THREE.Mesh(geometry, material);
" b' L& q# y1 H0 C6 oscene.add(cube);& B5 a! P6 W- b+ l9 P& m% }
camera.position.z = 5;# P7 t: r m' v/ K2 \! E
. v9 i. ]/ r! E2 N- ^& }0 E6 Y# D. O) [- g; [ _
1 ]! G3 K% T. l/ T" U1 }' I
* s; l! L7 Y5 u% m6 j/ P
; f; Y6 h- U8 J1 h) E6 E) H2 B
//rotate
! [, J& V0 u# t, Q$ x% pvar update = function () {
G% E' [! J* G9 e( O cube.rotation.x += .01;
& d6 g; h( j. Z6 U) I/ ~7 L cube.rotation.y += .02;
% T c9 p( L" q2 ] l. d cube.rotation.z += .02;
" T( _5 A2 q! }3 J}) `% l( c A* n9 M
( _ t6 {$ p4 R% m+ ^var render = function () {) B- `' l; g% E# H/ A# y
renderer.render(scene, camera);! ^0 J% v0 {8 n: k- O
}$ J* M7 L/ T0 x8 Z0 |- k
/ V, e& f0 }. \1 C* W. x7 R
7 ?$ t! ]- f& n
, E5 _( X2 Y9 H# D8 M0 Jvar Gameloop = function () {4 N9 D4 a1 A, B
requestAnimationFrame(Gameloop);
6 Z/ k* f/ X, c- |& ]3 ] update();
+ o8 V1 p5 o0 @ render();) D) N& ]- g- ?
}* f9 }, s% a! [* ~/ M
; K* D' p2 q& T, ]: y
Gameloop();
5 {5 }+ O- X' U% s# T q[/mw_shl_code]
7 p+ G: e% G) ^
8 U( A' s0 r& }% p* {. r. i3 m' D* y- d3 Z
引入争取的html,
/ c/ u8 c/ i5 j5 a0 ? j
- }2 @4 T1 A+ L3 n+ T0 s[mw_shl_code=html,true]<!DOCTYPE html>
' J7 Q) M, o6 h7 h7 w6 {& _# e<html>
5 V2 u+ p3 i9 g7 h4 e0 Z1 r6 z7 h9 c/ S* X, P% V; d
<head>
' y h" F1 q% n! \! y) t/ l z, } <title>hello ThreeJS</title>
a* L. Z4 [8 _ <style>6 _( A f; t* W! U8 N
body {$ z- X1 R7 f9 S1 [; J, T
margin: 0;! u; b9 t3 s5 Z/ k
}+ b2 ], P3 H5 Z( S- ~/ R
( n7 J# X0 J% T* O$ W canvas {( y( V! @! m) h$ e& {2 w. J; B" u
width: 100%;
8 D+ B: S; P8 ^ N1 n6 m height: 100%; W4 X& ]. S2 w
}4 h3 N1 Q4 l* @& W/ S6 B
1 P9 d+ m8 R' y* t. m. p( ~
h1 {& r; K( ?+ Y! q
color: aqua;
/ R& Z7 s% C2 _6 i# V" y }( g7 D$ G1 Z- Q7 p) |# R
</style>. d# q: ~: `1 {+ Z
</head>
& z& T9 Y& C6 D& N* X( E; w' v l+ ^3 f m/ w3 I. p
<body>
% E& A2 ^/ b+ B <script src="js/three.js"></script>1 G# \- o i- `9 [+ f, P
<script src="js/OrbitControls.js"></script>
+ y; a E* y9 _' W; U) S <script src="myjs.js"></script>3 e) v. Q, [6 K% f. o
; G9 g; K9 d8 \& R% m: w
8 Z. o3 t6 n9 P' D- r5 V3 h. W: v3 U8 e( Q
) |( w8 E: N& D5 i</body>( r# C- E6 H+ `3 D
/ \, x, s% v0 a3 c+ K5 `4 N* d0 ^
</html>[/mw_shl_code]! {: e+ ^3 Z! i: V" m8 n# @
) L$ W& c4 z, L K# m
效果点击这里:
( |1 v6 c9 j- }' ?* P- O$ {; _; ?% g! Z! o4 ^" E, W+ q
http://plmhome.com/doteam/lesson1.html
8 b V6 _: P/ y- D7 |: C4 k5 S# q9 f$ [9 X8 v' ?
1 {+ Y* P+ ^9 J6 L3 _9 A0 ?
|
|