|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
. w. b' Q1 }: O6 e3 G$ G7 n0 A! F
1 C9 Q7 ^7 G7 a& o+ d; V6 G
废话不多说,官网自己百度下, threejs.org ,入门很简单。
' A! P k% ^0 T, y9 Z r2 T2 \' o3 x4 G7 y9 i! c
创建的javascript脚本如下* C3 A. l e; L( H
/ b2 X6 p ^( b) T; ?
* Q- j( ]9 e4 G3 t6 X% } I& A$ f' R
[mw_shl_code=javascript,true]: t! s; t2 b; S
var scene = new THREE.Scene();
9 z* x0 ]9 C+ N+ S `: L0 {9 a( Qvar camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);8 T: y$ T0 w, S
var renderer = new THREE.WebGLRenderer();
7 V8 J$ G0 {6 ^0 Q# d9 arenderer.setSize(window.innerWidth, window.innerHeight);
* y( `- u) ?+ w: J' ]* Mdocument.body.appendChild(renderer.domElement);
) a7 v" i6 `4 m( M( L
* C' E' \8 K: @9 h6 v8 G// Refresh Issue
) r3 s8 ~( m: a8 s2 y( V% K" gwindow.addEventListener('resize', function () {
( a: @+ h* L3 \: A var width = this.window.innerWidth;
4 u6 x }4 m+ b# j var height = this.window.innerHeight;/ F6 Z. V* g; }, e# q
render.setSize(width, height);5 N9 d& k2 U5 e2 X8 S5 U
camera.aspect = width / height;
4 D9 U! T) M; @2 h' u camera.updateProjectionMatrix();
9 U7 ]) H1 X) ]( [6 A n})
% k h4 A5 x$ w0 ~; C2 J1 Y, N# n8 b& q
//orbit contorls
- _; u* q9 ]2 Z+ f1 B% Y4 Ucontrols = new THREE.OrbiTControls(camera,renderer.domElement);6 D( @% B% N1 |% V# ?
5 Y# k6 X' u) ^, r$ n//create the shape
5 J* _% Y# K- m0 Gvar geometry = new THREE.TorusGeometry(2, 1, 16, 100);) \' s* @6 `- [
//create a meterial
3 @( ?0 Q4 @& }* U% n% Cvar material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true, });1 X0 l' ~7 p3 f
//var myMaterial = [new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load('image/plmhome.png'),side:THREE.DoubleSide}),];7 U. |! N% ^& M4 S; h- @5 r
//var material = new THREE.MeshFaceMaterial(myMaterial);; \6 p, r, X) l* D% p8 S3 J
$ q5 w/ Q2 _; ^: Ivar cube = new THREE.Mesh(geometry, material);
3 A& o8 D) Q" u0 M4 [' X: l' n6 D" iscene.add(cube);
9 j6 ]1 J, m% T( ?7 @camera.position.z = 5;
7 ?; }$ i: z' l/ S5 O6 I$ J
6 M& J! X0 W4 C8 E& n
7 {3 `6 k$ A5 J% `) L2 H! T9 a, _7 j$ e3 H+ o9 ?( V8 ? @; p
3 f8 o2 O5 v, _1 q/ W7 M
+ G" L8 O( o; N( G0 L9 N//rotate
# p! _; `3 p* u" q( Jvar update = function () {. H8 O- H, K+ Q
cube.rotation.x += .01;; w7 E+ Q0 C8 H( }0 a
cube.rotation.y += .02;+ Q# }: a0 W5 Q$ d9 D
cube.rotation.z += .02;
- F, R) ~: @: B# u4 V1 c. P' i}, f4 |9 I6 z J/ S( ] w: a! z7 b% S
0 ~+ p( _7 X; |+ M; V0 V/ G, @$ o
var render = function () {
! G; O" ?( C6 |; n" m& t$ l renderer.render(scene, camera);5 Z5 |) I' p& j, }3 S* D/ l& G
}9 i+ c9 I) `# w" U# l
J5 @( Q& s7 T
( @0 {6 w3 }8 H! m0 M! U4 u% R* t
{: _: @8 t1 K& Fvar Gameloop = function () {5 O3 x. M- i: M7 _
requestAnimationFrame(Gameloop);" M$ |7 w0 m% J$ o6 M
update();
9 |, J) l7 q; r7 i$ I1 q render();
, M$ C- B9 ?5 |3 |}
/ ` r: ~9 N$ W
2 ^% ]% ]9 A5 C4 H) U+ R6 RGameloop();
) P: g/ }1 r2 L8 p; `[/mw_shl_code]
) v! O2 h1 M: t: x
@. e- ?- D: ]* w$ W# v/ x! l: O" j x
引入争取的html,
, i5 N% i# \, V' e0 d. a4 ^) Q% h& P% M
[mw_shl_code=html,true]<!DOCTYPE html>
# i. y% L% J5 j, v! w<html>& u- l; D8 {3 C8 K' q4 U
/ W1 w! T$ F5 d3 E" R! U& X' F/ H, A<head>
6 {5 S$ F- t: `& G <title>hello ThreeJS</title>
$ b7 w9 v. g. S& T; I' h; M7 j <style>
0 u9 Y+ F! P3 c! J, i1 ~ body {) ?; I2 M2 l+ A! J2 F( l
margin: 0;3 W; N7 \; ]# z# P1 K4 Y
}, R, w1 v* Z. H2 P! T- u2 s1 q
9 @$ N5 Z: B5 c' }; V canvas {. X, c0 o& v/ n; ~
width: 100%;! s! U, B- a$ Q+ P* g
height: 100%;' r: j7 Y6 g C) S: V
}
1 A! Q3 @' J, n8 t7 q
% C" D4 i O8 i1 y4 w! b' J5 V h1 {9 Y$ t' ?* P/ Q5 J% B8 u7 {
color: aqua;
2 f8 B6 _3 A: o# D }+ Y# b9 a, l F$ a' Q1 {/ j" X- V
</style>
8 p, ]! {/ W, S- R8 R; d% D</head>
8 i! O1 L4 i2 b, ^! j+ \% s0 }. L i+ f9 o
<body>6 ]$ l0 R$ S% _6 Q: h
<script src="js/three.js"></script>
& Q/ V8 q) l. v1 I! _- R <script src="js/OrbitControls.js"></script>
. U1 J, I* k+ e. c <script src="myjs.js"></script>
7 w: Z( |* T' q3 M6 B4 y# p8 |# {
3 u0 L( s/ M' P% x' J4 E2 U" |; X$ s
, Y9 ~7 H' |) J1 r
" T$ p- p8 k3 k& g' m3 q6 q! B `% g
</body>
0 g; F" { C# u" g5 Q1 k1 J9 I1 B0 ~7 ^" }5 d* O ~
</html>[/mw_shl_code]: J3 ?4 h; J7 d3 j& w8 c
& C0 W8 Z% B; [5 T" p效果点击这里:# P6 b) y; `* E) A
& e) s* |# M2 l2 Xhttp://plmhome.com/doteam/lesson1.html3 w. Q8 q' c( N
0 f, P0 r f3 q2 y% u! R( q
2 N# y, M/ A* j( R, b5 X. ^# ?% L( T
|
|