|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
+ ^& o s* R5 n: M: S s) i
* c" E9 h9 C' E+ J废话不多说,官网自己百度下, threejs.org ,入门很简单。- a! R! [$ B8 {9 Q5 s; l1 s& g
- r( I! p( P0 x. }! ]' Z1 d
创建的javascript脚本如下
+ d6 W4 _. z% S) Y" |7 K
7 `) C7 s# d, t- U
- _9 U- o7 w' `
[mw_shl_code=javascript,true]! a+ c* H" z$ h& k H! N: z
var scene = new THREE.Scene();
, T( P7 w& a7 @& Z5 [! uvar camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);' n, j- _/ S( X5 v
var renderer = new THREE.WebGLRenderer();
$ N5 q5 F( F; u0 Brenderer.setSize(window.innerWidth, window.innerHeight);/ j' _+ h1 {! \: ` `+ U
document.body.appendChild(renderer.domElement);
& A8 E5 l- ]& U/ N# g4 T \1 _
* T5 @" f: f1 Z// Refresh Issue
2 m; \/ r `. e& T! v" o4 \2 x% wwindow.addEventListener('resize', function () {5 j& L+ H+ C. @5 o' C5 r! [2 Q
var width = this.window.innerWidth;
( R t9 c _+ V1 v0 d! {, Q var height = this.window.innerHeight;# m* H/ B* J9 s0 G+ ]) t
render.setSize(width, height);. q( b5 H4 P: l, ^
camera.aspect = width / height;
4 }* E) ^, t( Z+ B, Z camera.updateProjectionMatrix();" w0 E" T$ c6 L% y& T5 J' r
})
0 X4 @4 b1 e9 P' e/ J$ E, M; s* ^2 F" `. V; b6 K# A
//orbit contorls/ u- z |9 x e) v0 d
controls = new THREE.OrbiTControls(camera,renderer.domElement);
( c+ M4 n0 R# k* X" P. n
0 o+ s7 g' {# G; q) X- V//create the shape
! ~8 j Q# Z$ W8 e/ o' A' q0 ~1 Pvar geometry = new THREE.TorusGeometry(2, 1, 16, 100);
. d. V3 |( D. A" V//create a meterial3 l4 t4 C& z. r& w
var material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true, });+ | k9 W. V9 Q" q
//var myMaterial = [new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load('image/plmhome.png'),side:THREE.DoubleSide}),];0 i( D* n! h; G" k& X+ E( `
//var material = new THREE.MeshFaceMaterial(myMaterial);/ o+ V9 o7 C8 N' _( [
. }% a8 G! I ?7 T: n( \ g( |
var cube = new THREE.Mesh(geometry, material);
0 D Y3 \) M* i8 A- s* \: e8 G5 |scene.add(cube);- Y, n9 a1 M/ [: q; F K4 G3 q% m
camera.position.z = 5;
3 M( P8 ?! c4 L
d- ]2 [, m. R3 l% y; A" U( v1 @6 M: v; P1 D4 b) K
, d- d* I+ D: D2 c E4 c8 F( R T( {. Z0 L5 M- G
, N! |1 n% Z7 J//rotate
$ _, {! P# ?" W% x, Dvar update = function () {
. \5 F1 T5 }1 z( z! D/ I# e cube.rotation.x += .01;0 g" V6 |4 H- Z' u3 N3 i
cube.rotation.y += .02;
' O8 }+ U, L( q/ K, j6 Y( Q: E cube.rotation.z += .02;$ L6 y4 |, I$ B; q) ]
}
1 g, P0 D3 }& {6 ?- s8 _( |/ i2 ]) Y2 H, [9 [
var render = function () {
6 w9 w& J: Y0 s* Q! ?5 @# |7 W; d renderer.render(scene, camera);
. k) n( o, ~; r* E}7 a0 o6 [( r1 k$ H0 z' M S
w7 i- k5 T/ g" D& m7 N7 Z
4 M/ {2 ?# ^1 @
0 @: G; @. i( ? ~7 t8 ivar Gameloop = function () {( r! g9 p, ]$ w; k( O M4 b
requestAnimationFrame(Gameloop);
/ U; Z3 D- f! ?# w" V' \ update();" K& w' }7 J2 q
render();% @, m& I7 }7 J5 r
}( \5 T$ [% ?8 d
$ M. C* Y5 Q, v0 s( e6 [5 tGameloop();
; r! F, ?; n7 ]6 ?8 Z* [[/mw_shl_code]0 q9 e/ ]0 U- M# Z8 p* }
0 f7 x6 z! @& J& E
1 E9 K: d/ j: r) @引入争取的html,5 ]2 s8 C# D8 E( q/ H7 L3 a
! B; @- l5 D, ] x) r, K! { w[mw_shl_code=html,true]<!DOCTYPE html>
8 F+ A5 W: _: P F0 r<html>
) G+ f* S5 l/ x% M
' n% k& I! h# Z0 y<head> N; P4 R. l! w$ l( t1 [# n1 e3 G9 J
<title>hello ThreeJS</title>
/ m. f: D% [6 R g5 M1 g4 B% c <style>
9 i! \) l" m- e body {
: }% c O* j! Y) e9 v5 G: A margin: 0;
) h; }$ x {4 ?- h' }% `& ^ }; f& @# W( j% X6 R; B7 U
" Y% R( A. L: W
canvas {" h% j$ B3 w+ Y' D6 `
width: 100%;
3 @" G z6 @3 b! ]: I6 @# D height: 100%;2 H5 m' }$ A1 }6 Z5 D9 U) s! i. t
}- k0 b, |, c7 p( g+ I4 }
7 R0 @0 v" V) c( l7 Q2 ~
h1 {2 ^ A1 [, V/ i6 \
color: aqua;
: _- f/ r! c" L H }
! j8 z" O* l& ]. [+ k </style>3 a, ^0 T3 ?% Q( `# O
</head>7 v6 `" v2 E( m9 @8 I
- j4 d! ]4 m3 e# x2 ]<body>- N8 g" X( T0 G; s
<script src="js/three.js"></script>
# I6 q/ i* ~# S$ r% X& o5 E: V1 g <script src="js/OrbitControls.js"></script>: v& C& G/ e4 ?2 X/ p: Y
<script src="myjs.js"></script>
/ S( p \ m: O: f) l$ ]
* p* Y L2 P! g0 [9 J( }
V( {; ]' }+ v/ Q% H
, w* R' J/ h; H4 E: I8 |! U4 b! d# L! h
</body>/ e ?* D# c- K3 K- y' e/ O0 X- ]
; L4 q- n4 ^: N$ Z+ H* W9 q: s- M</html>[/mw_shl_code]
, i! y F, k7 \/ M' t
/ [) `0 l i2 m2 u. X( h效果点击这里:
6 X- W! D! S3 {& g" l5 _7 H0 A. Z3 {
http://plmhome.com/doteam/lesson1.html( f6 ?$ L# m4 R f
6 b, W m2 X" s" {0 |; S! H- z( ]6 a2 S
|
|