|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
: T5 @# f) ]3 W# z5 Y( A
1 i9 X7 s3 n, J: U废话不多说,官网自己百度下, threejs.org ,入门很简单。' F8 V3 }2 F' a7 E2 ^/ k8 r( c
' H& n% f- J1 u& |9 n
创建的javascript脚本如下3 j% s! ?3 I# U; X9 g0 u
% d9 |3 E: k/ {9 Q5 ~% w% S. P
T3 r2 S/ Q4 O2 z" F$ w) T0 y. H
[mw_shl_code=javascript,true]* y5 r) d- K. B# f
var scene = new THREE.Scene();
4 C% ]! R! u( Z( |% zvar camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
/ H, U' O# }) jvar renderer = new THREE.WebGLRenderer();
4 {$ I n7 e3 G; I- b3 S, orenderer.setSize(window.innerWidth, window.innerHeight);+ M7 l% _- m2 @' F5 R5 J8 e. X
document.body.appendChild(renderer.domElement);
N' h) ^0 L& S- G) ?2 ~( _' ]. X2 X" z6 t
// Refresh Issue
- R- l7 P% Z1 s, p, u: D0 N! ^* T' [window.addEventListener('resize', function () {/ F: m/ ]$ N5 J V4 G( T; ]
var width = this.window.innerWidth;
. l$ m" \/ D% W" Q, m var height = this.window.innerHeight;! e3 I+ t6 v0 ^7 Y
render.setSize(width, height);
9 w+ `1 {: H6 R) _ camera.aspect = width / height;% Y3 _" ^" O( n' h, }% h
camera.updateProjectionMatrix();
) R k7 @- {6 Q c% Y) M})& T5 u, }' w/ x5 X1 u* _1 e
7 z/ T8 [. E& Y7 u- _2 u! M' X% Y
//orbit contorls- _+ } |5 X6 |
controls = new THREE.OrbiTControls(camera,renderer.domElement);
& ?( H, V5 I1 k8 N$ a. n' d0 q% l S3 C4 R" ~7 R* p
//create the shape' k! x' T: T! g6 V8 B" V
var geometry = new THREE.TorusGeometry(2, 1, 16, 100);7 F0 u# ?/ J' t5 Y9 `( F
//create a meterial5 p! u% j, R2 P% ~5 k E# ~
var material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true, });
3 @( s; h R# g; @# c& a8 a6 b//var myMaterial = [new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load('image/plmhome.png'),side:THREE.DoubleSide}),];
1 q3 R! }- v7 q2 M9 a9 Y1 k//var material = new THREE.MeshFaceMaterial(myMaterial);2 A ]# h7 u3 y) H9 B% ~2 X
" y3 R2 U' Q% q. P' g5 [2 R) Kvar cube = new THREE.Mesh(geometry, material);
$ w) F. i9 S5 I4 q) fscene.add(cube);
; } ?/ u6 }% b* f' Rcamera.position.z = 5;& y3 ^. u/ p5 }6 h; [' [0 n8 Z, ~
Q9 n5 L8 _9 y8 I) m
+ Y; P7 V- ~! j/ U0 r+ b
8 W! u+ Q w% E" n2 J( E" P, W
! l, E& c& X& A" j: @9 m5 n7 ]
1 H4 C" q5 ]" }; U G7 |9 E//rotate 5 E: d" E' \& _# r$ c! B q- V7 t
var update = function () {- ~2 ?5 B1 Q5 I2 W6 l( _$ e
cube.rotation.x += .01;
! r* B: q; ]4 l cube.rotation.y += .02;0 w# @# f" M7 T1 `
cube.rotation.z += .02;+ y# J, g7 N- y: Q$ Y/ X% s* F
}
, _- b+ h) e2 w0 d
2 t0 p; k' e9 L8 M% Fvar render = function () {% @9 N' ^" u/ O4 y f- Z
renderer.render(scene, camera);
5 J, a, `1 B8 N# y}
: I+ z4 o7 R, [2 L9 a( E; t- V9 o2 j4 M) ?" g
+ M1 z# o/ \* x% J0 h1 F. c- X' y% i/ o! X# T; g4 X2 F
var Gameloop = function () {
: I" _' G" a& P& X/ x requestAnimationFrame(Gameloop);! y: [) s6 G. E% j3 g4 m+ m
update();
, |4 T) X6 c. E$ d' P render();
. k1 q0 e* ]! ~6 T}0 B0 A5 \9 Z8 S* ?
( i2 C- }) R, @' R' C% ~Gameloop();2 {8 f4 O, H6 |, T
[/mw_shl_code]- K" j8 l+ i y+ [
! O# N- v$ L# a6 O
/ F' U t4 \- }6 B! ?! m2 @
引入争取的html,
! j# ]) c" ?- G- w! z3 w" x1 k- q' _- Y: i4 h! n8 n( p
[mw_shl_code=html,true]<!DOCTYPE html>
& s5 i8 H! D. f4 B+ E, O<html>; z1 _7 {4 k; m& j& C" |5 b
- E* I+ |) H3 b<head>9 J3 t$ g {! c$ {, M3 A
<title>hello ThreeJS</title>
& r. }+ i8 u5 }% G z0 ^% P <style>
; U/ z! i I4 U+ q( v body {( j2 X3 q& a0 Z* `* R3 {
margin: 0;
6 m2 ~' W5 t. {* W } d1 e* o9 Z8 C9 L
% R2 I% ]' B$ ]2 J+ @
canvas {
7 h/ S. @9 ]( E8 r width: 100%;6 M i8 G/ @; T. o W' S
height: 100%;
1 L* f- V; e: j7 C& E- T) C }
, W# z0 W; f- Z: A7 z2 l# U! j$ D
9 F( ? u& Z3 Y h1 {
+ r6 k; |/ x- d/ f( D6 }( ?- H3 t' ` color: aqua;
2 m* Z. m" l& R/ `2 O }
/ f B2 h0 w; z* z$ k0 y8 J </style>
+ F) {- y' ]8 V& E' X2 U, b</head>
% x$ |% }, c5 m* J& J* l* |: `
5 Y: ^1 t9 [) P- K* w7 }8 H<body>! G/ n8 j b; n- b+ _+ n7 x% ?
<script src="js/three.js"></script>
$ h7 j! V6 G* @* A9 B, \; h7 J <script src="js/OrbitControls.js"></script>3 h# M, b/ e7 c; |4 b) P
<script src="myjs.js"></script>" ]; Y( N% {; r* |4 Y0 Y6 q
0 r I; D, [4 A# O/ `! O
+ R- Y$ w" \ `. p- j. A- n" `9 |( @3 V
" W8 t( y$ L0 k8 X) B, |</body>! Q2 y) j1 g+ j- y' m
( ^6 v9 p9 w4 i0 h
</html>[/mw_shl_code]
: U5 e/ m& i! Y+ E! \, z7 C& Z$ Z' S' X7 ]
效果点击这里:1 g" Q2 o( Z. E \
' _6 B7 ]; s, d( c$ T3 e9 B2 whttp://plmhome.com/doteam/lesson1.html8 I$ y8 M4 ^! Q2 u+ A
; W# X7 V) x+ ?6 `1 l& S" f( P
$ A: y6 s* d9 {7 W% d( o4 ^- }
|
|