|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
# ?- H2 F. W' \* u7 ^/ b# }% }& G% v/ V6 b8 p
废话不多说,官网自己百度下, threejs.org ,入门很简单。0 \, K# @( A( t5 f
; V- V4 G0 m; o3 B3 f4 K创建的javascript脚本如下0 c# A4 U4 \8 N7 }$ r
0 s, F8 o) s7 @0 y4 h+ F
8 X4 L" N* i7 v( y5 Y[mw_shl_code=javascript,true]
6 V+ R3 }/ M( C% Y, @+ Hvar scene = new THREE.Scene();
2 d7 z5 M0 @5 U6 z* b: \5 |1 ivar camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
; X5 ?7 B0 b0 E8 ?2 Dvar renderer = new THREE.WebGLRenderer();
; M" X& o" B# s! prenderer.setSize(window.innerWidth, window.innerHeight);
( B# D! ], }0 S1 a7 z/ Y- xdocument.body.appendChild(renderer.domElement);0 [8 i9 G! ^5 {* Z
4 E5 N$ m4 b$ K2 ^% u; }
// Refresh Issue & B3 ?' H, g5 j9 b; f+ K4 ~6 J
window.addEventListener('resize', function () {
d- _, e! ]- `+ x8 u var width = this.window.innerWidth;
3 }; ?# I9 O/ S z var height = this.window.innerHeight;
/ ?: x! d( `# N1 l render.setSize(width, height);
C. J5 p& A$ p# P! P/ N: h camera.aspect = width / height;
& z+ S% O4 v2 m1 A2 n# A2 p camera.updateProjectionMatrix();
- Y8 d5 y% y! F0 D})/ b& Y5 q7 b/ h& ^# s" H+ B1 f: O' P
; ~' y T3 ]( N# D) f+ J* z: V
//orbit contorls
+ ^, s( _* s* Z5 O1 F- |controls = new THREE.OrbiTControls(camera,renderer.domElement);
0 g6 f: Z2 `8 j0 b0 A
; C0 u; r: }- J/ m* j' {//create the shape
0 l1 c. P7 j( L* p @var geometry = new THREE.TorusGeometry(2, 1, 16, 100);& O* T2 `. z) ?9 d
//create a meterial- G7 \" N: m+ [1 |; [1 s. G
var material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true, });6 N& p1 i* g3 A( L( m1 b; n
//var myMaterial = [new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load('image/plmhome.png'),side:THREE.DoubleSide}),];1 U. M, Q! P- _, @
//var material = new THREE.MeshFaceMaterial(myMaterial);
; V8 r$ V4 U7 e) t+ Z' e) [' s
) T C6 i: ]4 c4 ivar cube = new THREE.Mesh(geometry, material);
& F+ r& z* X4 i) Y1 y# o0 I6 q* kscene.add(cube);, T6 z7 I7 Q% r0 d+ R8 X
camera.position.z = 5;
0 ]; L+ \6 U* O! E2 a* q1 F4 z0 O/ s
/ j" I3 e& C* o( d
5 M8 ]0 v7 e G5 u; u6 D7 y7 T2 M+ P! E. z+ ?
- O& N" p P* p; i/ M/ ?
D. Z- C: ~" E- f1 S+ R4 j& z//rotate
# F x L: s9 J& d" }) M4 ovar update = function () {
0 r2 {8 `" U: p cube.rotation.x += .01;
) V% E$ y. P9 Y& g1 o cube.rotation.y += .02;1 ^% X E+ C' A+ a
cube.rotation.z += .02;3 j# o- @: @1 Z" U: s% \% J- C1 q
}+ q+ k. y8 ]) h, E" }# y
) c2 B3 ]4 R+ r. |: g' S5 Qvar render = function () {: v- ]$ Z$ T/ n+ p
renderer.render(scene, camera); O, b6 m9 A2 V" U, O4 r2 [
}4 c/ s$ I3 l0 l. u; s
0 \0 Q& b* n/ k4 a! \
" s# s2 l4 _8 P( [% D$ x" q; V) @" {9 I2 v( u; [
var Gameloop = function () {
2 s" {4 U7 n/ N6 v6 w2 u. _ requestAnimationFrame(Gameloop);' t+ z1 S) U/ G7 @3 j- E2 h
update();7 f( [/ k) r! I) W
render();
7 o( }8 X9 \8 I# w}3 q# m" x7 b5 y. Y& W; }1 C. M
! u1 t6 F, ?2 \7 l
Gameloop();
+ d/ T0 Z }; Z3 ?7 H$ {" e. H[/mw_shl_code]
0 C8 r9 h( F# v% ~- Q. `
! R( Q6 x5 G, I5 ~3 x% M: @4 A4 E4 e: p5 [
引入争取的html,0 {: C& y7 G) D* h& v
, d6 R; j0 x( L# P _; L
[mw_shl_code=html,true]<!DOCTYPE html>4 o0 S0 L6 \4 N! ]6 E" t
<html>
y: b) M" b5 V: _! m- d3 J1 ~% {- A$ |6 _$ H7 H
<head>" [) E% l3 Y/ o& _
<title>hello ThreeJS</title>% Z# `5 h* @ Y& ?% B- H
<style>' R) q& _8 P! h! m9 W
body {
* y4 x+ L6 W7 Y margin: 0;+ h8 S% S, p2 B( Q, N1 q6 W, g1 v
}
4 `. {& H) i. B' s4 Q2 O0 X
3 V0 R4 E: U' f+ f: s$ k canvas {: T2 K" t0 c; _% J- f
width: 100%;4 x2 S) z3 j* ~ p" h0 M
height: 100%;8 C5 g L7 ?; n' M: n+ ~4 \
}
4 N& z& O$ ^2 D6 X, t( `- F8 Y$ Q6 {3 E w6 d$ I" F
h1 {
1 |& l; D- K$ @* X9 r' Y; M color: aqua;5 K* x* q/ j8 |
}
$ n3 s2 {# G- I; } s! E. C/ s( s </style>
5 i$ U$ _3 }( @& H' G# u" f' r2 H</head>
2 S6 C3 ?3 S) s- U0 C% c# T# _1 Q/ c4 k% ?
<body>2 W4 n% o% l7 {6 Y7 H6 F* m
<script src="js/three.js"></script>0 S% `- I9 ?6 O/ C
<script src="js/OrbitControls.js"></script>
$ S8 V7 A' e/ w <script src="myjs.js"></script>5 S$ l1 [& t6 p# _( N+ q6 ?
. K4 u# B6 Q0 r1 W2 G9 F
9 `' A1 V" f& u. Y* L0 E0 s- v; x& n6 H8 `
6 s0 A$ L: w4 [/ H( k</body>; E J' c0 r s+ Z& ~+ {
6 N K/ h6 i4 @8 [$ t</html>[/mw_shl_code]
* i) I, B# c8 ]- Y; X0 s: {" B" ?; O- N5 \5 E6 o
效果点击这里:
* b" ?9 @/ f5 x
8 s3 K3 c; h" n% O5 Nhttp://plmhome.com/doteam/lesson1.html
3 ?: v' {. {" R" D6 i" E6 l
9 s5 }- c; f4 G. H9 M- T# M, _4 L' N l2 ]
|
|