|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
9 F: c P$ @; n% `
" s R, e* r$ N' Y废话不多说,官网自己百度下, threejs.org ,入门很简单。3 Q! s7 H4 ?2 V
2 x$ m1 c6 U8 B4 q
创建的javascript脚本如下5 } l7 P3 \4 O4 S7 K
" U9 S' o" ~9 _& j o' y. V
4 r/ A1 L9 D" S) |, ]: O3 w
[mw_shl_code=javascript,true]
+ W7 e6 D! f) k1 x% kvar scene = new THREE.Scene();. T: H% q! `' f9 I5 j
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);) ^+ X# ~( A) b+ {( m! U# x
var renderer = new THREE.WebGLRenderer();
" B% {1 j- O) t: K% X$ g' V, P1 mrenderer.setSize(window.innerWidth, window.innerHeight);5 U3 ]2 K" q& s
document.body.appendChild(renderer.domElement);
. g9 Q% g- D0 F9 c3 I E6 ^6 @3 \
4 Q% V6 w3 A3 p j% f// Refresh Issue 4 @. U" d7 \( ]+ ?( g% O4 m
window.addEventListener('resize', function () {
; G2 h0 A( K' O! T/ T var width = this.window.innerWidth;2 U" Z4 [. M+ b+ b
var height = this.window.innerHeight;
5 L0 B1 i. I: u6 @) I7 i render.setSize(width, height);
& V+ p M7 Q6 B% ]% F camera.aspect = width / height;' v& m0 Z% O [) d- k, |; F) Z
camera.updateProjectionMatrix();; b+ w6 c& ~% \. `# [" R# n
})( N' E, }; b/ d: x3 G
, g; S2 e/ a, _9 ^; K3 c# \//orbit contorls) l7 |- F# c0 k' a+ x2 X
controls = new THREE.OrbiTControls(camera,renderer.domElement);
/ {2 D! j, Y+ P6 {! Z! ^8 k5 v V/ R
//create the shape
# \: _) T! P' P! e; \var geometry = new THREE.TorusGeometry(2, 1, 16, 100);, N1 K, u8 x, c' q. c6 W! g7 @: r5 B
//create a meterial7 K& k. O" K( V) S2 m+ `
var material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true, });
% r. J3 T* S9 z" X2 j( L( D//var myMaterial = [new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load('image/plmhome.png'),side:THREE.DoubleSide}),];- W* F9 J) i; j0 ]" ]
//var material = new THREE.MeshFaceMaterial(myMaterial);
4 k# Z4 E) f# K- H5 f* k9 c, Q# [
- ^( k3 f; e5 w; {' Nvar cube = new THREE.Mesh(geometry, material);
6 G6 c/ c y+ f1 a) e" a! Uscene.add(cube);. o) I7 a0 v' `5 A& Y2 s5 E; ~0 e0 b
camera.position.z = 5;
7 Q' G; ~ u R: w8 C4 h/ \- {/ H( t5 @ F
$ Y* U& f. D% c4 j) J
/ l4 U. D! x; g* w8 ^' y& J
/ z) j9 B# c0 C3 I+ W" S; e
' M6 ]5 x6 Z j; Z$ ]4 N//rotate ; n6 E: w5 i% M1 h
var update = function () {
$ P# u- v/ m( q2 I$ i& c5 p cube.rotation.x += .01;/ y: V0 e( Q/ l" @
cube.rotation.y += .02;
1 h- n$ H$ |1 C4 g) L! C, ?/ ~. ` cube.rotation.z += .02;
) G) g$ ^# s8 |* `. F}2 L: S! `2 o4 Z
/ w, Z! H* |) tvar render = function () {' x$ w5 T" A( v+ _9 V3 C1 x+ _
renderer.render(scene, camera);
. j, n7 ]% l: T! E$ ], w- j" b" d3 F}
. t9 u8 W7 N* I( ]
6 f8 }% A. S% {8 L- t$ F' u
+ j9 M0 Q$ M( b/ y* n, d2 {' c# B" S! k
var Gameloop = function () {3 U! R+ L- M2 j
requestAnimationFrame(Gameloop);
6 s$ ~9 t" x8 w7 F g update();
# |; l6 \5 |2 @( j+ l2 [" h! m render();
- Z8 v: m* ?- |% b2 X}
: N; ~; k2 Q5 q4 G6 ]+ t4 W9 _7 `4 Y, @6 `" O2 f: V4 `
Gameloop();
1 s% [0 ^2 X9 l$ n, G+ C$ J[/mw_shl_code]
5 m6 j4 C" |4 N1 W; Z2 L0 D: B8 a2 N- T: G* Y
! }! |2 L" P, x' n+ h- t引入争取的html,
2 [# S! o* D# A/ G+ }& [
|, R. o8 ]$ T* _: L$ ~[mw_shl_code=html,true]<!DOCTYPE html>
: H. r# k0 g: p. a<html>' f/ G* A% B: v8 B' V& g
# Q: ?5 m( Y: |1 C1 `0 k- y
<head>/ \3 @3 j+ t0 v! E( A3 ?# Z
<title>hello ThreeJS</title>
. ~9 d, @& i$ C% v T$ ~ <style>1 [9 F7 P( w G8 M7 g& \: K
body {
( k) {9 l! S# X4 V" R margin: 0;
( t8 ~1 u; v9 {8 ~" j! Y- B0 O X' G }, l$ I( k& d9 N
2 e5 `# _# G4 h, o! R. x
canvas {% P O. t2 k9 [5 ^& g4 Y$ Z2 {
width: 100%;
; O; K! A% N2 ~2 Z* U" Z height: 100%;1 O- K$ M b+ Z5 O. J
}$ K: G9 m! I/ O! E' N. p
" g% r! }. S# e/ d
h1 {* u) x+ E& s2 u* c; M9 s
color: aqua;
: q3 x4 R/ H; b, ] R: Q" i }
0 M+ H) [1 m, s7 q# O) ~ </style>2 b( ~- J3 S; X) `
</head>
3 `4 V& F1 A) z! Z# I1 B. s1 j' o4 K" O. `5 H$ J& }
<body>) |8 G9 {- l" f: y+ o2 Z. z
<script src="js/three.js"></script>
4 @" e0 d' K, b4 \9 ^& o: h' ~ <script src="js/OrbitControls.js"></script>
+ }# `: ?% w! g: k8 V. k5 R <script src="myjs.js"></script>, c; V$ d1 r' x2 ]& y) J
% a6 e! R1 C o
0 P* U2 C7 q- x+ [) i4 }$ E& e! `+ r1 V! v$ }8 t8 N- R
+ O9 j8 b4 q; u3 \* \3 e1 n</body>" T' w3 P+ R( a
: x0 ]+ _4 w( m0 g8 {+ q2 w7 k
</html>[/mw_shl_code]4 N! T1 \9 r; v$ q$ Y
. b9 j& o" T# h0 y. T0 {0 z
效果点击这里:
/ E9 _) Q( I! X' b, V ^# c
& D' E- q9 ]3 U0 l! d* _http://plmhome.com/doteam/lesson1.html
/ _9 k0 X8 u6 h# [+ D
! d$ \" @& ~* c" o' ~, O* ~! t, N+ y3 s6 V
|
|