|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
8 k/ S, u/ P; A% X* b, F' | @/ x$ H6 ~/ d" [8 S! u
废话不多说,官网自己百度下, threejs.org ,入门很简单。
5 E5 d$ e W- d- W" j4 n( e2 o8 w+ j6 |, ^, g
创建的javascript脚本如下
5 l1 f" r- D2 X) V/ H' i( W
4 G* u! N% o3 T0 Y% L
5 `) X9 |. E/ P& Q. _) x* ?
[mw_shl_code=javascript,true]( n& t+ T! @7 F" M J; k' w/ G
var scene = new THREE.Scene();& x0 ?3 o. R& A5 W) O8 u/ K
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);& E) l& J0 C( s4 R
var renderer = new THREE.WebGLRenderer();+ B. w; s3 K6 J, u! {$ G1 g& h
renderer.setSize(window.innerWidth, window.innerHeight);2 _, {2 {' ]) A' U+ |( q% [1 L
document.body.appendChild(renderer.domElement);
, z A; E' I; t* B6 _/ `
& @) O& B" Q* `- F// Refresh Issue " C. e4 p# j$ h; ^, c8 Z; v
window.addEventListener('resize', function () {
4 l5 ?4 R ]9 m+ K) _0 g1 R% I var width = this.window.innerWidth;) d. p6 [& y3 o6 T% u+ E4 K; m
var height = this.window.innerHeight;
) l/ B. ]7 S9 h5 F, ?( V render.setSize(width, height);! @: T1 D. P6 S) r; s2 o; Q: i3 x5 n
camera.aspect = width / height;& b3 @) t0 A0 \5 T) w" T# D5 ^: K7 \
camera.updateProjectionMatrix();
' p* \6 o. y6 ]+ W& `6 E})7 s2 V& K1 C% h3 ~- \& v/ N. s
& a- m4 Q/ S J5 H' x g4 U: m0 f//orbit contorls1 h* W! k& Q M; n
controls = new THREE.OrbiTControls(camera,renderer.domElement);) i5 E; m( W m! U7 x$ x
e7 b! b* A. D. W
//create the shape
0 A' R; P1 E& gvar geometry = new THREE.TorusGeometry(2, 1, 16, 100);8 r5 F! y" ^3 u
//create a meterial
! g4 M* C9 K$ u$ B( \var material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true, });: v& ?+ F$ t. v2 q6 D) _5 L$ Z+ W
//var myMaterial = [new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load('image/plmhome.png'),side:THREE.DoubleSide}),];
g: e$ Z4 k; ~0 W, p//var material = new THREE.MeshFaceMaterial(myMaterial);
% @# X! f$ N: p7 Y$ e% O+ t0 I( B' q% o; u
var cube = new THREE.Mesh(geometry, material);
+ C# h7 N; j8 m0 \scene.add(cube);& V- v5 k9 g' u2 }
camera.position.z = 5;
) {/ i' _' U+ P9 i+ W# C0 c* |5 C5 b' m, G# U. o& B" P4 X3 x
# @$ y6 g) ~1 ~) r+ ?
/ u! D' \' z4 n3 F( i3 v
8 x: R2 K4 ~4 o8 S
2 X; `5 F4 O4 e! p4 n. h* g//rotate , x6 W$ u' a$ D0 l, ?
var update = function () {
: b- s+ u- o6 X/ x9 W cube.rotation.x += .01;
) l( Y9 o3 o4 I8 a) G4 \ cube.rotation.y += .02;
B: ]( I3 W+ ?+ j z4 O8 r cube.rotation.z += .02;
6 d7 C$ B, M' h7 h}1 \) h9 c) |+ \' E* T
3 k( ]! ~2 W: E8 ]0 T3 U
var render = function () {4 {- d& I$ U8 k
renderer.render(scene, camera);" E! _, H8 w8 \9 C. {0 m) r
}" z7 K' C/ g* b; w! t9 f
/ z& p- G. g, g& N
( ^, n" ~- c% J! U% s) T
8 `, x1 _+ e4 l2 `
var Gameloop = function () {
( m# I! G) [: a4 \! r requestAnimationFrame(Gameloop);
9 n- q, a9 S4 j: y+ L# n update();$ m4 ?# i" U' a6 c
render();
& l+ D5 s+ E9 N}- Z3 H' W1 z& t; R, Q
- y: \% U$ }/ [* D( S# G% \Gameloop();; f# d+ h" e% ?/ Q: H% L% P
[/mw_shl_code]
( e, K/ ^8 J' f. _3 G
7 o9 ?* U7 m( C6 `1 `" X3 T8 C
7 _# Q& e: Q, t' u b# F; d) G引入争取的html,
7 v$ _5 ]! X3 r! ~0 G2 S6 X
0 P& Z4 }- K1 Q7 V* j3 O* }[mw_shl_code=html,true]<!DOCTYPE html>+ ^$ H5 J* y0 p7 M8 k; ^0 z6 G
<html>7 a3 }/ i1 J1 o9 A c
5 p. n- O1 q: O1 ^2 x<head>
4 j) _# d1 \+ ^5 R0 G+ H <title>hello ThreeJS</title>
1 b4 W9 d6 O( P$ c! ~ <style>
7 j) `7 p" z9 k! H7 k body {: l7 n7 U! a# m) V/ m6 h
margin: 0;0 G" X7 l. `, }: b/ h) j
}, @( @; `3 c5 K3 `$ \3 Q
; B: K" t# d" T0 o. I2 q
canvas {
: ~6 r" g& s3 K% t width: 100%;$ ]% j9 y$ D& k p v: u
height: 100%;
7 S& x' d o* u5 w f. A }: h/ v+ q3 l/ Y! }6 E# J; A9 E, Q
! [, e, D* l* m h1 {* F4 n- Z4 @4 P$ k3 T; L( _
color: aqua;' b1 M0 b/ C2 B8 E7 h& o
}
6 X5 S7 {* x2 ?/ d8 c </style>
0 a( E9 \3 N9 |2 R</head>
0 E# R2 s8 d5 l0 K1 E. R; G& ~. c& \+ Q2 x
<body>! d# U/ X& |% A }9 M! }
<script src="js/three.js"></script>
3 ?3 i, Y& ^; j. ^- k3 g- c8 H <script src="js/OrbitControls.js"></script>2 _$ {% x7 j# f. a! {- N
<script src="myjs.js"></script>
3 D+ H' \8 t4 F
5 V. I( ]' M6 D$ x) E
]) ^9 @( E) b: P
& u5 q$ b7 r; O/ ^) \2 [+ C# B# v% R+ u4 y7 P U
</body>
4 n9 P0 X; {% @: S' J2 N% \) y7 Y! |* z! d# x, n
</html>[/mw_shl_code]
) B( ~/ `/ {7 Z' Z8 ]& N1 K6 h$ |% V& v! A: o( ?8 u
效果点击这里:
9 U( {# B8 e0 N& x. S. G& n4 c2 u" v. Y9 e
http://plmhome.com/doteam/lesson1.html
6 P4 I9 W( I$ P/ j1 x" W( `) l; u4 I9 ^# q1 N& G2 O4 d6 u# y
4 N' O: G; r7 z |
|