|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
# w5 m3 z2 ~: @7 ^. p, Z# V c7 E8 R6 m' q1 r1 U$ \
废话不多说,官网自己百度下, threejs.org ,入门很简单。
) [! N- N3 E8 J' w* I( C* ^% \9 {; A6 `1 Q( G2 x& H
创建的javascript脚本如下$ D3 W: K' ?3 @: `
6 o3 ~& J( Q9 R4 x$ i7 f
! Z! p/ ~7 `. \$ _* v
[mw_shl_code=javascript,true]
5 p j D4 R- c4 K1 n/ C% \var scene = new THREE.Scene();* y3 L7 A; b: Z3 Z# S' G1 h0 R9 i
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
6 R/ k3 T. z/ ?& Q6 G' H# h! Ivar renderer = new THREE.WebGLRenderer();
: T9 A' F5 l7 N3 trenderer.setSize(window.innerWidth, window.innerHeight);
; l. t! v' a9 N$ M; B5 U2 @( p4 J5 z* bdocument.body.appendChild(renderer.domElement);1 G4 m! H: Y% L" D3 j+ B6 W& X9 A
G5 Y% V: E: s
// Refresh Issue
# k$ S6 X8 j$ J& ^: W" ~window.addEventListener('resize', function () {
6 `+ \. z+ z& X/ N5 q var width = this.window.innerWidth;7 N1 ^2 t+ `/ c" B
var height = this.window.innerHeight;" T& J8 r6 o- n: I, i
render.setSize(width, height);
; E+ g% u. C% Z* S camera.aspect = width / height;$ g9 Y9 S5 a- _& k1 R
camera.updateProjectionMatrix();
# ?. {6 p- k9 R# z$ p! m})
; t* B6 T7 Z/ ^4 B0 o7 N5 g8 t' u1 y ^5 b4 c1 e
//orbit contorls! D! s3 f: ~' e J$ B0 P+ r
controls = new THREE.OrbiTControls(camera,renderer.domElement);
+ a0 |$ G% m% a k4 a* g D
; c, Q2 o: F! \# v. Z6 x//create the shape4 t) J! U% p9 {* }
var geometry = new THREE.TorusGeometry(2, 1, 16, 100);2 D0 F4 ?) e" d0 w; {# W* C
//create a meterial
, x0 j! }3 M; i, u* M: @. s+ fvar material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true, });
6 {- ?* I5 I/ M4 V$ N2 \. X v//var myMaterial = [new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load('image/plmhome.png'),side:THREE.DoubleSide}),];) U$ S# I: O/ Q8 u
//var material = new THREE.MeshFaceMaterial(myMaterial);
8 U9 S9 ~( E# \7 l8 {2 w) a" c6 k: m' D
var cube = new THREE.Mesh(geometry, material);
' m* ^5 M% d7 S0 T8 u( Rscene.add(cube);# r$ I. b9 v* C Y, _. k* z5 P% U
camera.position.z = 5;# n$ G1 b9 y7 k! X0 I1 f, E, \0 T
/ m# Y2 G2 \4 T- W; J( Z0 p& d6 y y2 X- G; L
% X/ L( q- C; b; g6 @* T! A4 }7 x4 m
4 q/ u5 E: g* v3 F: z8 b
" w6 ~$ ^5 R5 H# l% ~/ g6 L, x w//rotate 8 @6 d) G/ u2 D# f7 M5 u
var update = function () {" E9 ?; l1 Q' j; t: w- {+ l# M
cube.rotation.x += .01;
! Q4 B) p4 m, C' s cube.rotation.y += .02;$ a1 y4 e4 n2 G! M) J7 h: Q
cube.rotation.z += .02;; D) w. w! i5 V6 {" {" S
}! i4 z; J Q8 Y3 s
6 W+ p6 l( ?- |7 @8 R: svar render = function () {7 f' U& b# z! V, i
renderer.render(scene, camera);
/ Z0 ?* P8 l8 q& A! }( Y}
" u% X$ g8 c8 S9 e8 d( i6 Q
" G" p3 B( M5 A2 E7 U6 Y
4 h9 `0 X, v5 ?) C6 B. _; p& s
var Gameloop = function () {
+ K( ~$ Z6 _5 x; d requestAnimationFrame(Gameloop);
. w! W7 H2 U/ |- V3 k update();
1 [& a& P( ]8 q8 t render();
* l J! R9 h6 k- e}
$ E. K8 L) ~1 [ X# }
7 s; |( ~/ { f; EGameloop();
! R9 E) m, U7 A# K; z[/mw_shl_code]- i8 F: h7 x9 R
# v# t! z9 @8 x% ~& H
8 J$ W$ N& e, w' U! H引入争取的html,% M; G1 `; _- y- l6 }
) j% P$ N/ G2 M, O7 u% t[mw_shl_code=html,true]<!DOCTYPE html>
; j3 L1 z4 g. ?* Q" z3 y<html>1 P7 k+ f( R2 o* h1 Z
( D+ A/ \% |. L6 \# C" t ^* x<head>' v' m; q% @# m1 g( U
<title>hello ThreeJS</title># D. W& Y& C* P
<style>
8 _3 d' T; b5 k body {9 l& l( w C3 i4 a2 a; \
margin: 0;
0 p; Y/ w6 k$ R" f; l } @9 p9 y$ X) u# P' y0 @/ g, x
! P8 P2 ]' _! w0 ]
canvas {
, N5 Z, f) o. q9 H) [9 J0 ~ width: 100%;/ g, E, V* B# U, Y
height: 100%;
/ g1 I: c9 s9 ?" m/ C }8 d+ A* |' c5 W& y& f4 Y
% O- O6 Q6 V% p0 v4 v0 _. j h1 {
( V& e- d# }) \$ y% a" Z4 X9 f* Y- C color: aqua;3 M0 A0 D6 q, q( q. L
}+ Q! u7 u! s: R- N5 }
</style>7 E1 G9 a# D8 X# U/ t* j& K2 Y
</head>
6 r4 o5 v, o1 W% h8 }5 ?/ ]7 `: p5 d" V. ?
<body>& |+ k( l' `2 \# I/ Z9 Q4 V6 p
<script src="js/three.js"></script>
8 P( p* [0 j, S <script src="js/OrbitControls.js"></script>
$ `0 i; l6 D7 t# [6 q <script src="myjs.js"></script>; r- P( N: b) D) n, T
. W: K* z; M u
9 X6 L1 e3 s8 t& B- A4 m g
: g5 @" T# K' s+ p4 E7 y4 x$ v" |+ u* E6 O8 l# z
</body>" ?/ |' b/ K; _5 x! n) o8 b
, l" s" P6 O: y. }& O7 U/ A
</html>[/mw_shl_code]
4 ~( P3 r3 B- c' S( d, U. M! z5 x0 U! N
效果点击这里:" C" M* }+ _' X( r) D+ F
- C( j# C6 F- x6 V, |7 Dhttp://plmhome.com/doteam/lesson1.html
" e3 i9 b0 y0 i$ \" i% Z: e! ^& K3 y+ a2 J
% o3 W& h7 P; ~' B
|
|