|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
) S% j5 m1 [+ P( W. q+ M
. W; a" Y1 P; @
废话不多说,官网自己百度下, threejs.org ,入门很简单。# Z" U" s5 n# Y
& z! e) g* b, B
创建的javascript脚本如下
8 e }! b: w7 Z0 e+ ]
. J4 C3 \& j" @9 }1 u" s
. q0 o# H5 t& Z4 c2 \[mw_shl_code=javascript,true]
6 K( c' A$ j3 C8 b7 k# G }var scene = new THREE.Scene();
1 |& u3 [8 a. ]- z8 ^1 N, [var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
2 S$ v, |1 \# d5 \' e4 P, _6 Wvar renderer = new THREE.WebGLRenderer();6 Z8 Z! a4 G6 R
renderer.setSize(window.innerWidth, window.innerHeight);" E) J6 V( m [" B
document.body.appendChild(renderer.domElement);
! M4 b Z; Z2 C1 w: S0 Z+ @$ I; l( S) f0 K# I
// Refresh Issue 2 x3 H4 b) n/ z' [0 ^9 Q* n6 i
window.addEventListener('resize', function () {9 I6 p ]. L: ^* r. _
var width = this.window.innerWidth;
+ D2 \0 W; Y% U: \ var height = this.window.innerHeight;
\! P8 l4 r% v2 B render.setSize(width, height);, |) q2 C. g+ f& i
camera.aspect = width / height;
/ ^% Y) z, s' j- P+ q$ Z camera.updateProjectionMatrix();) P/ S* ]! {% c! a" e9 e4 o8 S2 ?% c& i
})
8 q: J& M- a/ H% w% E6 J2 Y6 a9 e. Z0 X1 X
//orbit contorls
0 a0 V- N) ? l$ S; V; B- Fcontrols = new THREE.OrbiTControls(camera,renderer.domElement);
' U3 A' q4 q( H4 L" C; s% `) b: ]0 r3 e/ p7 I. O% e- B
//create the shape
3 S. [7 p% g) Evar geometry = new THREE.TorusGeometry(2, 1, 16, 100);* Y8 C- K2 w% S- s
//create a meterial
: B8 A V/ j8 _; }* Ivar material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true, });3 ? D7 c6 F4 m
//var myMaterial = [new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load('image/plmhome.png'),side:THREE.DoubleSide}),];* R& G+ u' R' i Z& C
//var material = new THREE.MeshFaceMaterial(myMaterial);9 l3 Y0 M! [& u9 @; x
) o* T* a6 b1 Y+ U5 V- ?var cube = new THREE.Mesh(geometry, material); n8 c' \; Q6 U' T; W
scene.add(cube);
9 J6 z# ?# w- f& f. Wcamera.position.z = 5;
! x) q6 f! M7 i; I h4 E# R: u' s) l8 s3 \
( Q) g0 [1 v7 p# A' e
6 i! t2 O# l% J+ F4 y8 c1 @/ V& K$ z, E. E' Z) W
9 m2 {' B1 h4 ~! B5 d//rotate ; B/ T1 B; N- J
var update = function () {. o" G2 p4 y8 o+ p$ r6 Q9 \" n
cube.rotation.x += .01;, C1 r r2 v# i7 m* T
cube.rotation.y += .02;
- G& z8 [; Q; B+ [/ t+ i cube.rotation.z += .02;
" o8 W) l" V, z! s- h) n+ q}
# W* H5 L) ^. [6 g# z( l" @6 b- I( Y6 [, m9 M
var render = function () {
+ k5 |3 Q ^. {; q3 t1 Y) y4 C renderer.render(scene, camera);) V8 ?/ R! m$ w x4 m: y
}6 q+ ]/ X7 I, c: z. G2 y
: i: E5 T% K6 G4 y8 x
: a. B: S9 E3 R% h9 g
T7 [! N! l6 C5 Kvar Gameloop = function () {
6 u8 d" n3 Z( R# p% R requestAnimationFrame(Gameloop);
: h8 h: ?! [* u& [# w( w6 G update();8 \7 Z: A9 X& t+ |2 J+ [
render();
* o y, U |' E J5 |3 N+ F}9 ?* n6 E/ h8 J+ I% Y9 e3 V$ U: w
: f& U+ I* b) v# G2 |Gameloop();6 L4 x4 M& @! ^) x: x6 V
[/mw_shl_code]
. n' {1 U+ L4 A6 ^! d9 M' }' |3 [7 S( z( S* Z0 f% O
/ d* W- y4 F' o+ f( F
引入争取的html,
: B" s/ k, k, t
1 V6 y/ }! c" H5 h[mw_shl_code=html,true]<!DOCTYPE html>
) s, M' ` ? o<html>
# G/ S& i+ P$ n6 C0 x; K$ ]+ m, a/ h* i0 Q' K. Q
<head>0 g3 x' H, b1 k
<title>hello ThreeJS</title>6 g% n. w+ c- U
<style>
- Y# [/ y0 I% [. x+ z2 B body {* b, K4 H( e1 f, L
margin: 0;" ^. P. l/ O) c! {8 q
}
. t- T" k: n% D$ D/ m0 E5 @4 N& ~& a; `# A) O' b6 {/ p, F
canvas {
/ T) C8 j# G" J' W; g0 p2 `: K3 [& Z width: 100%;
. }1 ^3 g8 g5 J; \! r! l* T height: 100%;
+ d! |& f3 c' G$ X$ O! G }
, g: \" D$ t' s
3 X# x, C! e U2 [ h1 {
; Y" r3 ]3 a& j0 O" L color: aqua;# R9 U. [- z; L
}3 H( W+ ?5 o4 n" [
</style>
+ w' J S1 A, v; \& g4 |</head>$ x7 l- @( G, g
7 a$ m3 a% @/ t" g) T
<body>
0 t! `. \+ r w( z9 @1 u <script src="js/three.js"></script>& x" s2 ?$ o' \: ]4 N. Z
<script src="js/OrbitControls.js"></script>
H/ r) }' t( W! q/ c5 l( N <script src="myjs.js"></script>/ Q% K, x" w) a `8 i; X
3 g6 I' ?- E, N) R" A4 v9 \
% I" ^5 w4 q8 F
2 N7 I. R1 X i; f4 N( G1 Q6 e9 E( O
</body>) X4 l6 F3 q" X4 c0 O
: Y* J, g1 ^4 F- b! i, p( H! i</html>[/mw_shl_code]
/ S" u/ I, O# ?7 ?
. G- i* O5 `! N) ~, {5 p效果点击这里:' x3 u7 \; n. H
' o$ Y, \/ m& q: s- Nhttp://plmhome.com/doteam/lesson1.html
8 c/ j6 S1 ?. C' j5 T& l1 J9 X$ E3 p, S" z$ U; B# L" |# t$ \
2 S5 V0 q4 l u u3 C* n! u/ [
|
|