|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
3 T: M: E7 `# l2 U* H3 q
6 L4 Y2 f. Z5 [7 d废话不多说,官网自己百度下, threejs.org ,入门很简单。3 U7 O# ~ I; \; s/ k( z" b# q
}8 F) _ r. z/ Y/ ^/ X创建的javascript脚本如下1 N$ \* u" U0 g: G
9 L) y2 q0 e1 ^" ]. `
% x4 k! o& b8 G- `+ Y0 a1 M/ D[mw_shl_code=javascript,true]& k! q2 G7 w5 m$ I9 `
var scene = new THREE.Scene();( y% F ]% ]/ t
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);- z! ^3 m! v! V6 ?# d+ G
var renderer = new THREE.WebGLRenderer();
* b6 D7 a0 T8 q. n. Q/ yrenderer.setSize(window.innerWidth, window.innerHeight);
. }2 {0 f7 p/ D' }. _$ N. O6 G. \document.body.appendChild(renderer.domElement);) }' r P$ S' `6 d9 m: {3 |
! x2 c# U# J+ T) _. d( O9 H// Refresh Issue 3 D7 \6 k+ W/ L: W' s8 V! |- h
window.addEventListener('resize', function () {
2 ~3 E: n( y: g. P6 ^ var width = this.window.innerWidth;+ P. {* Z; e p$ J2 m' J
var height = this.window.innerHeight;
) O2 {& M& s7 @7 Y' A render.setSize(width, height);" ]5 l, x8 ^2 j. }0 J
camera.aspect = width / height;
3 D) r) h* G( f+ _- V: ^ camera.updateProjectionMatrix();
9 a$ l* S: G: z5 A4 v4 T}), S. c" j. h3 t: M3 \
* ^) P7 ^' ]/ j9 v1 h: t9 V
//orbit contorls
) J: `: |3 `: U0 g4 N) `controls = new THREE.OrbiTControls(camera,renderer.domElement);* t% O# l% Q4 m
+ N k: Y4 v, D2 N
//create the shape1 i: n/ e, F8 e5 m7 `$ | \7 E
var geometry = new THREE.TorusGeometry(2, 1, 16, 100);% B6 i' v f1 X- T
//create a meterial$ D: A" B! o8 R5 ]- F
var material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true, });: q2 I } N! D+ f- \) R) O
//var myMaterial = [new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load('image/plmhome.png'),side:THREE.DoubleSide}),];# J$ ~1 V; q) X; l
//var material = new THREE.MeshFaceMaterial(myMaterial);
r! u' u7 p' @, B
' R: H& L* y2 rvar cube = new THREE.Mesh(geometry, material);
3 s$ v7 n3 U) U9 e0 q5 |0 T" sscene.add(cube);+ j& Z3 G# J, p% t5 r; @7 J& y
camera.position.z = 5;
l3 P* t% K, P, @/ V) f' o' R
) ?: k: A6 z5 T i) X
* _6 |4 v) e) I1 a- C# ^3 I
, F2 p* y& t3 t+ \/ l: ^( }. H* W: e
: Y4 d6 j% X' a& l3 ^9 D6 d/ _//rotate
3 `( u& V/ G: e+ H4 x! Gvar update = function () {0 {+ |8 H9 `# l4 x/ m$ }5 [( e- J
cube.rotation.x += .01;
6 v- s+ p9 ?6 D( a cube.rotation.y += .02;" Y( N: C" J8 ~- X. u$ L2 K
cube.rotation.z += .02;
: p) O; @# i# N' R/ a% K" z3 s}
1 g0 |9 P% k7 y* \7 u4 u7 g2 G! @" o' f1 ^
var render = function () {5 x! L; p# A8 F) t/ Z
renderer.render(scene, camera);
" d6 n+ V K7 D& i* S# _6 [& a' x, m}, t$ q* O1 @4 c X6 u
1 [2 L! m) i8 t8 O d2 T8 ?
" D: h9 f+ T! R4 F1 W% q$ I4 y
: G0 R; r, @" a" |0 J( Z D
var Gameloop = function () {
0 Z! W% O6 P6 m5 ? requestAnimationFrame(Gameloop);5 A5 S; a9 U9 s* p# {0 y
update();
6 l+ G$ Q1 t S- i* C# r render();: x+ h1 r' e4 [0 F8 y/ u
}% u3 R, \' t) c3 p9 {
( i. p# I5 h5 L* H' {7 X
Gameloop();
0 Q/ y9 F* R" V! | k[/mw_shl_code]
/ `0 O# P8 w0 P1 v5 b1 y/ n( n/ n. G8 l: N, s) A
1 u, _9 t5 H# v" p9 E引入争取的html,
6 v! z& K1 k/ J/ d- q7 |/ O
, A7 O0 y* q* a+ G+ r. A9 J5 h[mw_shl_code=html,true]<!DOCTYPE html>
, G, G1 o/ w2 w- W<html>! c* v0 j. q) X& _: N9 n* y, y a, B6 @
0 J0 H9 p% c$ k) W
<head>
- S* f+ o7 v7 C& M r <title>hello ThreeJS</title>; {2 w0 |( w7 ?) x" ?% r! J* Y
<style>
) w( Z+ m, K0 M0 n( _' Q" f' l: y body {5 ?( N8 _% z2 H* J: a
margin: 0;9 M/ {4 Y3 K/ p; f
}8 P) Z1 a1 y4 W4 I4 A
9 a+ n7 ]! K5 S canvas {7 Y6 W( i9 v9 h Y0 o$ K! J, F8 U3 q
width: 100%;
4 @- l/ ]3 h3 \' ? height: 100%;
, T" b7 ?# Z. l$ J1 C9 Y2 F' ] }
* x0 g0 l: c9 D4 l
/ K8 y4 A% g3 E4 c h1 {
% b8 j, p1 }. g color: aqua;
% W. C O0 s$ n5 y9 ~( a; s: g }) z6 h5 M T: V9 j o& {8 n/ W* {. J
</style>9 }$ U1 ^7 [/ j2 n0 {
</head>/ P! n8 y5 l9 s* S3 F! Y# r \
# ~4 C) S' M- y) I' h<body>
! E+ t* ~( m6 ~ <script src="js/three.js"></script>
& N j" [7 h7 }7 w <script src="js/OrbitControls.js"></script>: P$ p. m6 a0 P9 m) Z
<script src="myjs.js"></script>
% ~; l" [4 j1 e* Y
5 |+ I9 E/ u5 K' r) K8 X* |, Y# m5 m9 l/ t8 G$ R
! P. x) }/ T @8 I! i' j, G! b$ c
8 ~$ c- E0 P2 V# r& E" J/ F' y1 }
</body>
7 Y( g8 |$ W6 Q- Z
( A) }, C4 R( t+ O0 G" h</html>[/mw_shl_code]& m) O1 ], r% i
% O- s& e1 C% }$ o6 l4 O
效果点击这里:
% x* t" F# w; ^
' f6 y* W1 a7 R+ \ n1 Rhttp://plmhome.com/doteam/lesson1.html3 C Y2 f7 r9 n, C
; \4 b' O7 `" b; U3 K6 o
" @3 O* T. o" y$ [+ z |
|