|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
8 Q9 p+ j" P, n$ G
/ K3 c/ u4 l% o- |5 n2 _6 g2 [4 O9 G废话不多说,官网自己百度下, threejs.org ,入门很简单。
/ F2 r) ~5 k+ e* y: s! h9 U2 ]( f2 {
创建的javascript脚本如下) [; Q; W8 D; o c% l
$ z* B$ q& c$ \4 f( C/ J
( t0 W+ J! f' P1 |
[mw_shl_code=javascript,true]
4 {) T4 \/ J' H' [: k4 Q. u5 Lvar scene = new THREE.Scene();
3 X- R. y* o2 N0 a# O% b- H$ Cvar camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);6 K; s2 b5 [& ]
var renderer = new THREE.WebGLRenderer();
6 z+ o+ k+ {" w, [renderer.setSize(window.innerWidth, window.innerHeight);
) e* y& s- K Z9 A. {document.body.appendChild(renderer.domElement);0 d, J p. T0 s! V
8 s) I" W- h# F9 k! s
// Refresh Issue
. {6 Z6 I4 M$ C7 }9 r) `$ Pwindow.addEventListener('resize', function () { L. b4 Q: L: n. O/ d2 _8 K9 n
var width = this.window.innerWidth;
5 R/ K: k4 ]( h& x/ c7 q2 J var height = this.window.innerHeight;
# P; }: K1 J3 l5 I7 d" @ render.setSize(width, height);
+ i& {7 c3 y# k camera.aspect = width / height;
2 m; A0 C: ~8 {5 O$ T1 l2 ^ camera.updateProjectionMatrix();
# y1 y1 s, J t! T5 ~* e})
) V! e" e* U) E. g$ K1 _# k* }' g- x8 k/ x
//orbit contorls
; |5 C. D, L6 Y/ V& `9 f: c* Bcontrols = new THREE.OrbiTControls(camera,renderer.domElement);
- f: W k* d* h0 e% T) c0 Y
& G, h: N+ N% W( N. x2 ]' b//create the shape
! e) H6 d# d; g& s, b4 v) L2 @! `0 qvar geometry = new THREE.TorusGeometry(2, 1, 16, 100);5 i7 Z$ L" D+ C3 E# T5 S" X
//create a meterial- v# {7 t$ _. `5 L7 k# s
var material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true, });
( I' u4 X" M1 S6 t0 E- E$ s//var myMaterial = [new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load('image/plmhome.png'),side:THREE.DoubleSide}),];
% L1 r0 O3 E1 F% J4 P//var material = new THREE.MeshFaceMaterial(myMaterial);
" X. g# C5 k9 g4 J k- W
8 }' o& b9 r& i- K6 r! e$ \; Evar cube = new THREE.Mesh(geometry, material);/ v9 X8 L+ C9 [# W) U
scene.add(cube);+ E9 O7 v( [4 |- \4 J
camera.position.z = 5;
; ^$ s# r2 y5 Z3 g4 k/ g S; a" R3 [; u0 m ^1 P1 K8 I+ [
+ q: w: z1 k7 ~: K8 ^! j/ |$ _" t1 s! z" R- E1 a
+ e" u4 e9 P6 p. Q9 C5 p
) `8 ?+ y% v$ {8 p, ?+ U7 e V' h//rotate
1 h9 R A1 [ ]9 Dvar update = function () {
2 V1 P! J# z: F cube.rotation.x += .01;' g f; d3 r2 _* O5 X% T C' R
cube.rotation.y += .02;
3 U" Y4 m# L# Q' a/ [ cube.rotation.z += .02;% U1 e4 P, J& I; |6 j9 X. r" j
}0 r2 w# v3 u8 F
9 C; F, q* \. F0 y& avar render = function () {
9 j# u: m* N3 \5 N R# N renderer.render(scene, camera);" U0 ]2 ]; `! `! k$ @9 a5 J
}7 I' A a5 ^. h( U- W1 m, P
. c6 m1 |$ W+ o2 O
% e- E% w2 P4 R! _9 e: ~" A: ~4 |, }' }4 N" _5 y5 p
var Gameloop = function () {
8 S8 n3 f8 h3 i8 O& W3 ~1 N- c+ n" ?) A requestAnimationFrame(Gameloop);
7 e0 a/ c! ^' a9 x! T3 _ update();8 G! K) F! \) Q1 z4 a" e
render();
- p# V' K5 @+ m# Z; c8 @. L4 Q}
" H) Y$ j- p' z2 {$ B6 s5 u
N) j) ] c. ~Gameloop();
?/ F' D9 @8 x8 @# K[/mw_shl_code]
/ ?0 h( i* [2 F5 ?9 I2 e2 \3 Q' P0 i6 V# [! m; R F
4 h. R3 B |6 [% H1 }# Y
引入争取的html,
5 h5 ?" b, F: C2 M, y7 y
- Y: M. |& J/ p[mw_shl_code=html,true]<!DOCTYPE html>+ h+ j% T5 O. ]9 q5 Z: v/ z, \
<html>
2 g5 `0 _3 k* f' ^9 J. j
. E: F# V; }2 u5 p) P4 P% C M<head>/ F1 d) K6 X4 k
<title>hello ThreeJS</title>
$ x/ j2 O& c; Q& G7 ?& T. z- y <style>
$ h( x% f7 Z% Z# J3 D2 u$ e! C9 k body {
" s) {( b9 A% ]9 Z8 f9 t5 S& `$ v margin: 0;4 n0 O' B v0 x, N# w! d
}! G; I( h. y9 F5 P3 o- Y* {
# E; v8 n9 i( A) n) Q/ P canvas {
" A, b) d+ P8 P# i( f+ Q0 } width: 100%;
P3 K4 q( V$ v height: 100%;
, i& V8 M. G7 Z7 v8 W2 e }
5 X& c0 |: v8 j5 Y- j" H/ s- @9 \* D3 I1 q) U
h1 {
3 W$ O. y" J4 w+ I. _ color: aqua;) k2 C @( M3 z% \/ d5 f
}9 ]3 |0 M7 A) ?
</style>& a# Q* Z1 ?; K; P3 h
</head>
9 T' E3 \; l$ P) ]- m7 @" j1 Z/ T a3 u) T! x& Q7 X9 A
<body>
2 ?: ?) G" X" f' f <script src="js/three.js"></script>
$ {7 e: w8 Q2 T- E ?0 n <script src="js/OrbitControls.js"></script>
+ n5 Q1 y' x6 u; Q <script src="myjs.js"></script>! t8 Z: d9 [% r: ^
* R# p" q( Z$ g0 M1 f* g
8 i9 N. }* o! S% ^" }) q7 i$ V8 X! a! f+ B6 a5 m. K! R+ ^
- s4 Y& J2 l2 F i' n7 q; Q</body>. T5 ]+ k) g) ?' ^" |% B
3 Q6 l( b' @7 ~/ T0 D
</html>[/mw_shl_code]3 y/ z* A2 E' U: P. ~; @
* i" t% T d/ e; E% g
效果点击这里:
6 c1 z2 @' n9 A$ n0 i: H
/ _; P, ~+ G. h2 E1 _http://plmhome.com/doteam/lesson1.html
9 m4 k# U* {' p4 l" f0 P
' Z7 @ Z* P; z/ g+ O9 Q# Q% u0 t/ J
|
|