|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
: K1 e( R7 V: D9 Q1 S+ \. B
! F# U+ a# X" a' f) V废话不多说,官网自己百度下, threejs.org ,入门很简单。8 }- c% f% j! k6 H! E% M
' i6 B' d4 I7 N1 x; v6 a
创建的javascript脚本如下
2 N. G" M2 F& u/ Y8 v$ s
7 n- c& W/ d7 m- k
, c+ J' F$ R5 s0 O, c7 Q& P
[mw_shl_code=javascript,true]4 R. W* ?. q) q# z1 v* e
var scene = new THREE.Scene();7 s5 L, {( t( u1 J
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);6 N; J/ |( p+ V& l9 t: l n
var renderer = new THREE.WebGLRenderer();
8 @9 W' ? [& `0 lrenderer.setSize(window.innerWidth, window.innerHeight);
5 S2 g( Y5 D, h% bdocument.body.appendChild(renderer.domElement);/ F9 R' \7 ~) I) v7 j
* [ d# e5 O6 P' E5 j; |4 H9 ^// Refresh Issue 3 ?4 f& ^% ]5 z2 r$ ~
window.addEventListener('resize', function () {
* b% K8 ~4 i: X" G& J var width = this.window.innerWidth;
) D! M0 a9 f" f! U' @; q$ A var height = this.window.innerHeight;5 b$ N. R0 C1 _$ A) v' f
render.setSize(width, height);
+ ^) t6 G1 f) W3 @, K v camera.aspect = width / height;
+ k, U D7 g! o3 ]3 \, e* d camera.updateProjectionMatrix();' C" z3 `" M/ R+ w
}). p) @! e" [ O- O- y9 r" ]* Y4 _3 G
- n! Q1 k. v0 C4 Y//orbit contorls
) a% ]8 A$ F1 @& A9 h1 ~& q, B7 Vcontrols = new THREE.OrbiTControls(camera,renderer.domElement);1 K# z4 L* d5 q: b5 s! l
* _9 o( ^% h) x4 B
//create the shape- }" J4 D) ?; T( R' @
var geometry = new THREE.TorusGeometry(2, 1, 16, 100);
( c' ~6 A8 x! E* n//create a meterial
) o: b& s, y2 b+ X: U8 Avar material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true, });$ I' M+ r6 d2 p6 e# i
//var myMaterial = [new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load('image/plmhome.png'),side:THREE.DoubleSide}),];1 ], P! l7 U* N& }' }* P, c* t0 d
//var material = new THREE.MeshFaceMaterial(myMaterial);
- i* x% S% b( [2 L' H5 u+ k4 e
0 M6 v# R' {0 d% ~# N; a7 w6 _var cube = new THREE.Mesh(geometry, material);
; k) V# h1 c% o/ }& ^4 }% nscene.add(cube);' |4 n4 r/ u8 Z B+ n
camera.position.z = 5;' c1 q$ B$ ^9 y" K% p
$ [3 r3 d3 N+ J- p2 S$ A5 P! u; n5 h1 R- O3 s) Z+ G
# n. g7 d' a8 l# G: X7 |
9 M+ A! b! c& \% P) j- t' C2 ?, T% _9 l
//rotate
5 @% u$ E+ b# ^( Y7 [* Hvar update = function () {9 s5 X0 R3 y$ z H! {4 p1 F
cube.rotation.x += .01;. A5 E1 g7 ?% \+ r
cube.rotation.y += .02;
0 w5 I; F" l- m8 f) P/ G. ? cube.rotation.z += .02;. V& d; X6 y9 q
}' {7 g: l# s$ q2 c/ [
9 V, p& b# z5 x7 X( bvar render = function () {7 ~* Y) E! X2 w8 J+ `
renderer.render(scene, camera);
) |- U8 D1 `) B- ^; p3 c+ l* n}
6 W/ y' `# ~) A8 j% f9 z; F k7 ^! x- ?; e' O0 ?% B
. E; c8 ? @6 Z5 D" R$ C
: @/ e: A4 w2 Q; K& i( o
var Gameloop = function () {
: ?' K& f) w5 s) X1 W$ }1 M4 T requestAnimationFrame(Gameloop);
1 j+ X' k8 _, v: h& a4 W4 J5 ?1 n update();( X/ |9 U, g! g z3 k# h0 f
render();
, k2 T2 p+ z& w! K$ y}* z+ h5 {2 z" e0 O/ M9 Q9 r' Z
7 i0 |+ Y% f9 }5 U% s5 a
Gameloop();" Q0 r" \) _0 }" Y( }" ], \
[/mw_shl_code]
; D P+ b3 X+ ^! ^% a4 A4 x$ E' ~1 S4 g; u
$ N6 K7 ~6 B) i0 P1 g0 X" |
引入争取的html,' e* ]: l' f9 e- z8 u
/ X% `/ k1 N) N. I9 j0 H) M[mw_shl_code=html,true]<!DOCTYPE html>
1 \& | |" ]. p0 `3 X- U7 u0 d4 q<html>
1 y/ t }' r8 j" n. G' K. e; w
( Q( u% L6 n9 @1 R2 Q/ N<head>/ \( w; ]" E. D0 s
<title>hello ThreeJS</title>
1 K$ A( F l( L1 P- t8 v <style>
+ a: m6 q4 I. f- ^- [; X( L0 r body {; s! ?( ^+ ~6 ]( D$ c9 V# n+ `
margin: 0;
) r% b9 g/ u/ y9 Z% n$ X9 y% |% c }
o$ T: B8 j% v, q7 m3 k( _& Z6 A" a3 K- i
canvas {
* |, Q8 k3 [/ I8 f; o! t h width: 100%;
; U, O( }! P$ l8 @" Q height: 100%;
% r6 q- a" }' l) n5 f, n/ y }9 I1 ~1 i+ U8 r5 T
* ~6 `: `1 d. Q; k' Y h1 {3 C3 l9 ?: Z0 S
color: aqua;( E+ E0 x* ^- {# p+ a
}1 z, l; |+ u$ d, j9 `" ?+ g: w( r
</style>
m3 L' Y- A% {7 [</head>
2 I. [6 a! R: k; q* D, E2 Q8 f* m. o, G! v2 G5 T1 E) Z
<body>
; t, W# H) g: X* H" Q. F <script src="js/three.js"></script>
. O! ]6 a% B9 L+ n7 Z, d. K; W <script src="js/OrbitControls.js"></script>5 ?) I6 U- w7 r5 S" y5 j
<script src="myjs.js"></script>
5 G* j/ q$ I2 {/ y) \
/ j# l+ U" D$ f( U4 h3 R; i B* _! Y, P2 w' A
/ D' L$ g; m! c" A- U1 v
# \7 x; x! q- r</body>
+ i# @- w6 k: P* K u$ t
# `/ q* }) k% Y4 ~" S: ~</html>[/mw_shl_code]
9 c8 b' i9 o( ?( X4 J8 a7 [& H+ \9 A* {
效果点击这里:
- x* K% a+ `* g- `* I. O9 ?( Y' u: C
http://plmhome.com/doteam/lesson1.html( B5 ]1 \! |) f) \$ g, y
+ C9 j3 s v* J7 M+ M
}) \' W/ E' b |
|