|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
$ A, P0 i8 m% W. y4 `! ?7 P! X
+ M0 j2 Q+ @( v( V2 C1 v* p废话不多说,官网自己百度下, threejs.org ,入门很简单。3 e2 q- T9 }: c: [
8 u+ W" @% d. ~
创建的javascript脚本如下! H. T! z+ }$ f$ j% [( Q
8 O, Q( R/ Y1 `6 `5 a, s
, K4 F1 E7 s& n& O. j3 [[mw_shl_code=javascript,true]
5 S+ ^8 `4 h3 V) I+ ?6 X! zvar scene = new THREE.Scene();( B) c/ a! J& x5 ~5 G
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);) Q9 [4 D' Q- p$ |( u; O
var renderer = new THREE.WebGLRenderer();
- P8 c7 M& g& L6 Q! f3 I6 c/ d/ m' L* urenderer.setSize(window.innerWidth, window.innerHeight);
3 S0 D9 i; I+ K6 l& R/ m9 l0 pdocument.body.appendChild(renderer.domElement);9 [* v- W, w/ ]0 X& g! u! e% y7 n
5 r; f4 X, r( W; d
// Refresh Issue ; J9 W' S' O- T! n. N+ N5 u+ N# ~9 d
window.addEventListener('resize', function () {! p$ M1 [- ?, d, e7 X6 `* n
var width = this.window.innerWidth;
$ j/ B: E9 }! X7 ?: r9 G/ R& b O4 w var height = this.window.innerHeight;
' D+ B( B, L! @" j. c" b: q render.setSize(width, height);
9 r5 G. s7 b& o9 |/ u; m- }/ F! O& N camera.aspect = width / height;8 F, W# I9 C6 [. J8 J
camera.updateProjectionMatrix();
/ U9 m4 M' {* h+ g) ^. V0 \})
8 V# u4 m/ U( P2 r" _- @7 T1 f* ~, o& z0 _, w
//orbit contorls
* F& H( h% `% H* `: lcontrols = new THREE.OrbiTControls(camera,renderer.domElement);1 G' ^$ y, {# _, L4 [
# H& I, W5 Z# z7 p" f//create the shape
6 L1 ^0 W4 J) uvar geometry = new THREE.TorusGeometry(2, 1, 16, 100);. A4 L2 R) A i! J5 o$ K; ^2 s
//create a meterial
- B! _0 v) v' V7 {var material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true, });
- k1 x. p3 ~1 [5 I//var myMaterial = [new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load('image/plmhome.png'),side:THREE.DoubleSide}),];) D' ]" d: ~4 }
//var material = new THREE.MeshFaceMaterial(myMaterial);* r" k; s3 p; k) G2 `4 ^# v" b
+ E. v- S! B) O8 _/ M
var cube = new THREE.Mesh(geometry, material);
4 S( L: y; @+ q! z3 f B3 N* i4 sscene.add(cube);
: ~! C% g" V8 B6 L' ]camera.position.z = 5;. q" f4 v, o' s% Y7 z
' N) t2 N3 M, G R+ m
0 l' t1 X3 P) O( u: j7 z7 G1 i' n2 T/ |
- M: u1 z# N" S ?+ A: {
6 {7 Z+ j& Q% F. o5 ]
5 C. N; P& Z- ~$ J//rotate ! o- k6 i Q4 W- L* O
var update = function () {% D4 B% ]8 \- j* B# v5 J
cube.rotation.x += .01;
' \& J4 \& Q, ^6 j4 @' | cube.rotation.y += .02;7 t* c/ Q- M$ k
cube.rotation.z += .02;# j, ]5 r4 _+ |- ]
}0 X/ q6 u! b! ?. i+ q
% A2 s8 W, C# K" y4 Z" {var render = function () {
$ X$ x) Y+ N1 G. e: Q6 t2 ~ renderer.render(scene, camera);' X& \1 o$ S, N
}, Y" O6 e+ O9 O3 g
! E! h7 D7 H( h+ R- M) H
6 z8 o* v ^8 Z" c1 a8 v v- d
6 p) }7 N+ p5 Qvar Gameloop = function () {" ?! m3 P, P- W* n9 j8 y
requestAnimationFrame(Gameloop);
) a+ } B% m3 r5 S9 c update();
# l$ Z6 n, k. ?% L, M. h render();( Q5 r/ ]0 n( S8 d6 u; e
}
. V) z! d C2 O: _/ ]+ q" u& S+ {# @6 B. n# A
Gameloop();' v. x9 B& [/ l* z$ K) R6 U
[/mw_shl_code]- V% b# v- D7 N4 v p# a
# m3 J- r& v8 T) W* c
. _; B+ z2 L) d8 H1 q3 b# Q
引入争取的html,! M* a2 `# T6 V; @1 k. D, t2 K
* A5 A4 C3 n9 X4 j& V. _% }
[mw_shl_code=html,true]<!DOCTYPE html>
% R8 ~% B1 Q3 ]<html># ^8 e. j( q) v/ v
) O0 R4 L' \1 E% g) v
<head>
3 R# [; M7 [, b: ]) g/ e7 Y8 U <title>hello ThreeJS</title>! n7 v" i$ n* w& c3 { l/ e8 a5 s& H
<style>
% @2 t }6 X6 f3 I0 ?! u$ G2 s body {8 A, K; |* |1 D1 [* S
margin: 0;4 w- P2 |; X% A) e
}
$ _; F& i9 m! w. v F) H/ ~
( T' M: d# i. s4 g( u; I! w canvas {
8 q w( }. v- r4 K( A1 ? width: 100%;
( `+ X, Q& n. e k0 c height: 100%;& F3 W+ l' o1 {2 J
}
+ q1 v8 [/ n. H5 Z8 r$ E8 `- e* C9 |7 }
h1 {' E4 m3 _" X7 {; z0 }5 d% ~& |
color: aqua;% a0 `( u! u4 f9 \/ g
}
8 p5 u2 D. y" N4 W3 B( \/ f </style>
3 u7 k& x' j7 g6 v8 `9 a</head>
/ A& w! F ^6 Y6 x( w: x, K, s& }, G. X* x/ ~) K
<body>: r5 _1 D: ~0 E" g# v/ N
<script src="js/three.js"></script>
2 ?: t, R1 y" l <script src="js/OrbitControls.js"></script>9 J+ x# F* B* A# R" M
<script src="myjs.js"></script>- c% \! Q( h' }6 f. N9 Q( E4 N- ^+ i
3 z' W" M* F5 u3 {# F6 O: z* V- f, Z7 P6 ?
! ~ F! N9 Y6 Q# N' X1 W: J9 G3 i9 I& e3 g2 ^4 e' H' j- O+ F0 a9 |, _
</body>6 y$ ~0 t, a( K0 h( Q
( l% L: p# A: r2 Q# v</html>[/mw_shl_code]8 M# r: E6 v/ R8 \
( L& G6 ]. U+ b" `9 o效果点击这里:5 d8 D( _5 M* `
3 g6 }! V9 A7 C6 ]$ V Mhttp://plmhome.com/doteam/lesson1.html4 |) S% v- v) B+ M' d6 S& o
4 p$ o, W% w2 {6 t+ x- K
% X; I2 W: i# S |
|