|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
^2 @% q W1 V' f* X% V- ]) c$ n8 n) M1 T* o
废话不多说,官网自己百度下, threejs.org ,入门很简单。
3 f Q& E* p, G" R+ S
* f4 |# B5 w: @$ F' K$ T+ e创建的javascript脚本如下( f1 o8 P$ _/ Z8 k1 u' n- K' L+ r7 J
4 S+ e: [9 i' k% D4 O
! k* `7 I' M# g) T. Y$ [: J9 m+ e9 ]: M
[mw_shl_code=javascript,true]5 X) R/ W8 S# k
var scene = new THREE.Scene();6 G8 \; l) s6 ~5 o) Y
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
: r2 X: y$ J9 O4 v) {var renderer = new THREE.WebGLRenderer();
3 u( a9 q' W) ]$ c2 R8 V- L9 brenderer.setSize(window.innerWidth, window.innerHeight);1 B4 _0 S. F' V2 G# T
document.body.appendChild(renderer.domElement);
+ e- \' d- h$ |) G( L1 h& f3 _7 R6 h! C+ `! k9 o' @( n
// Refresh Issue
2 S; L! r5 C# e" y5 hwindow.addEventListener('resize', function () {/ N* a" \- Y& m" g% Q: V
var width = this.window.innerWidth;+ u/ F$ Z5 L: S! [
var height = this.window.innerHeight;
% y. u+ d0 T+ T. C' @ render.setSize(width, height);
$ I! z6 c7 a& B: {7 a! b camera.aspect = width / height;
/ ~8 d/ y6 h8 p6 W3 Y camera.updateProjectionMatrix();- N4 Z/ S3 `0 h! G0 M9 m+ D
})
2 g! K1 u, X6 j) E' Y0 a& `1 R9 I/ F7 o7 U t
//orbit contorls
. n1 ]0 \3 z! y* J' ocontrols = new THREE.OrbiTControls(camera,renderer.domElement);0 D4 Y6 t$ R3 R$ y" U
$ ~' U ]1 c0 i, P7 S& @//create the shape
; M2 B, q! I( P x8 N" |var geometry = new THREE.TorusGeometry(2, 1, 16, 100);% C" w! N. s5 _0 V
//create a meterial" k0 @& a( y& d
var material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true, });
$ l k* b" L0 |/ v( R. z//var myMaterial = [new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load('image/plmhome.png'),side:THREE.DoubleSide}),];
5 l) N Q& @. X& }$ [2 X; f//var material = new THREE.MeshFaceMaterial(myMaterial);
2 j$ e5 K3 {7 w% y6 @
" |1 E' H) m$ C3 w7 nvar cube = new THREE.Mesh(geometry, material);
7 V x' C# {8 I* S1 l8 Gscene.add(cube);7 J6 X& d _* _$ [' n7 y
camera.position.z = 5;5 E* A% `! H- r3 r
. U e. c, t+ V2 p
% H, X" u: t# @) }( h
6 c6 x. |" d6 \6 X
9 y5 u0 D& p! e
' l1 L7 k+ K$ M. ]; j//rotate
( p4 U$ N5 O9 ?( T4 xvar update = function () {* H+ _0 P5 X( `
cube.rotation.x += .01;$ }+ j `. z6 B% t4 B
cube.rotation.y += .02;
6 [- N/ E4 U' } cube.rotation.z += .02;
+ K- u2 v- @* c& I( o! k, a* p}
6 H2 M% v6 }/ t) l# N: m1 G
" ?% } O) X3 A Jvar render = function () {2 G7 s1 ^, k( u* ?2 P% h( E6 @
renderer.render(scene, camera);
: F2 w2 `6 t; n# Y6 y}
" o9 ~4 f6 J8 i6 U1 T
+ E1 R' ?6 r5 H2 Q
2 m" W3 h6 ~$ l) x" {& N+ P% O+ X6 Y# e% H2 W, V( Z+ ^% f
var Gameloop = function () {3 n7 `2 K v m! c; x
requestAnimationFrame(Gameloop);
# _# U8 g% R- [9 c) c update();
, L. E! a/ `! ~# O4 ^, n* T render();
& G$ {) N2 c( @ S8 [0 b* h}
1 C- o4 d# W) V3 g) C0 A) l/ i$ R& s2 g+ O+ z
Gameloop();
; P2 q c* g$ V1 X6 Z# O[/mw_shl_code]
+ a+ Y. u' G; x' C k
5 N+ F2 d x) f: F+ z
/ u0 @5 g. N4 A" h) s7 N引入争取的html,
$ q" k. ]( o5 ~, U- J8 w
1 C; ?: H; R- \& w5 N[mw_shl_code=html,true]<!DOCTYPE html>
7 I# K0 `$ C( ^# j" U<html>
- ~' S" n. p$ i' i6 j1 H4 c! N
0 g" }4 M7 y" d" @<head>6 n0 a7 r& S( {' W0 X: @8 m
<title>hello ThreeJS</title>
$ p3 q8 g5 O- P <style>
- C/ O$ }5 | x, w# z4 r. q body {- M& d; K! A& ]% n+ \6 Y2 ^8 h' k! l3 p
margin: 0;
# @3 H9 U# L" a( z$ q# C0 S1 K }' y3 L% c% }/ C- t% w
( I. q+ L/ _# J# Q- Z canvas {
' X. g) L9 c* I2 _( U7 K width: 100%;- Q7 l1 f+ m- i( F1 j( W- i" {$ U
height: 100%;7 M5 h+ m5 Y- `. k1 w# W* \
}1 W2 a# t- b% R0 C) c
Q9 L7 N8 D( E3 v6 w+ g- { h1 {' i- V2 U9 v* c( m2 V
color: aqua;
& i# B4 a |# `# o( W }
" _6 I& x* Y7 h5 e2 ]6 y </style>
$ z" W9 j* N( g$ l$ I1 E</head>$ Q* U/ z/ \9 b: Z _1 ]& x$ f4 C
8 p8 O8 C; O+ @! E+ z3 W<body>
, O! m/ D" W3 m. }% }4 S* f <script src="js/three.js"></script>& L: s. d @# r" \# A
<script src="js/OrbitControls.js"></script>
6 l$ R! M: r+ |7 w1 P; o <script src="myjs.js"></script>
. D, e; e3 R% U& J1 t, l
! D4 p) F$ {3 B$ a9 r- a$ E. D, `2 @1 g8 J- g* K; P5 ^. I' y
& C( ]" W8 ^$ n0 A
2 T: @% ]3 {- f: b</body>
* k" `7 y# z4 B! ?& Q7 a. T! O6 n, p/ ^2 O% }$ t, w
</html>[/mw_shl_code]
) z/ H+ e4 H, z. D- \9 r3 x s$ F0 R3 R
效果点击这里:; |: n9 _& k0 h3 y
2 W3 x$ G8 P D- _http://plmhome.com/doteam/lesson1.html5 }6 r' c1 |9 t3 Y% \3 _" }
& ]# i9 l- y+ R6 E, u; {
4 Z! e+ h6 ~7 c" @/ v% E4 h! c
|
|